/* ============================================================
   dashboard-welcome.css — first-visit welcome state for the
   employer dashboard. Renders inside .inner_pages when the
   controller sets showPopup = true.
   Tokens mirror those in public/css/auth.css.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600&display=swap");

.dash-welcome {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --bg-subtle: #F3F4F6;

  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 48px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-welcome,
.dash-welcome *,
.dash-welcome *::before,
.dash-welcome *::after { box-sizing: border-box; }

/* Head row: NEW HERE chip + date + dismiss ------------------ */
.dash-welcome__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.dash-welcome__chip {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 4px;
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-welcome__chip-meta {
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-welcome__head-spacer { flex: 1; }
.dash-welcome__dismiss {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dash-welcome__dismiss:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* Title + deck --------------------------------------------- */
.dash-welcome__title {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: 52px;
  line-height: 56px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 760px;
}
.dash-welcome__deck {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-soft);
  margin: 0;
  max-width: 640px;
}

/* Tiles section header ------------------------------------- */
.dash-welcome__tiles-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
}
.dash-welcome__tiles-head-title {
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-transform: uppercase;
}
.dash-welcome__tiles-head-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.dash-welcome__tiles-head-count {
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-disabled);
  text-transform: uppercase;
}

/* Tiles ----------------------------------------------------- */
.dash-welcome__tiles {
  display: flex;
  flex-direction: row;
  gap: 14px;
}
.dash-welcome__tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
  padding: 22px 22px 20px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.dash-welcome__tile:hover {
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.dash-welcome__tile:active { transform: translateY(1px); }
.dash-welcome__tile:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.dash-welcome__tile--rec {
  background: var(--brand);
  border-color: var(--brand);
}
.dash-welcome__tile--rec:hover { border-color: var(--ink); }

.dash-welcome__tile-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
}
.dash-welcome__tile-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-subtle);
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  flex-shrink: 0;
}
.dash-welcome__tile--rec .dash-welcome__tile-num {
  background: var(--ink);
  color: var(--brand);
}
.dash-welcome__tile-rec-pill {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 600;
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 0.12em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-welcome__tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-welcome__tile-title {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  color: var(--ink);
}
.dash-welcome__tile-desc {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}
.dash-welcome__tile--rec .dash-welcome__tile-desc {
  color: rgba(10, 10, 10, 0.72);
}
.dash-welcome__tile-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.dash-welcome__tile-meta {
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-disabled);
  text-transform: uppercase;
}
.dash-welcome__tile--rec .dash-welcome__tile-meta { color: var(--ink); }
.dash-welcome__tile-arrow {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

/* Responsive: stack tiles under ~900px --------------------- */
@media (max-width: 900px) {
  .dash-welcome { padding: 28px; gap: 18px; }
  .dash-welcome__title { font-size: 36px; line-height: 40px; }
  .dash-welcome__tiles { flex-direction: column; }
}


/* ============================================================
   .dash-form — shared card chrome for profileSetup-* flows
   ============================================================ */

.dash-form {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --bg-subtle: #F3F4F6;
  --cream-2: #F0EBDC;

  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 880px;
  padding: 40px 48px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-form,
.dash-form *,
.dash-form *::before,
.dash-form *::after { box-sizing: border-box; }

/* Defensive type reset: legacy style.scss applies Bebas Neue + 80px size
   + center alignment + 9px letter-spacing to h1 inside .inner_pages, and
   similar Bebas treatments to other headings. We force everything inside
   .dash-form back to our Roboto stack with neutral defaults, then specific
   rules below set the intended size/weight/letter-spacing. */
.dash-form,
.dash-form * {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-align: left;
}
.dash-form h1,
.dash-form h2,
.dash-form h3,
.dash-form h4,
.dash-form h5,
.dash-form h6,
.dash-form p {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
}

/* Defeat any legacy padding / border / background that the cascade is
   applying to <header> or <form> inside .inner_pages. Without these
   resets a thin border-bottom (acting as a section separator) and ~37px
   of left padding bleed in from style.scss. */
.dash-form > header.dash-form__head,
.dash-form > form.dash-form__group {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
}

.dash-form__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-form__eyebrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.dash-form__chip {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 4px;
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-form__chip-meta {
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-form h1.dash-form__title {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 44px !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  text-transform: none !important;
  color: var(--ink);
  margin: 0 !important;
  padding: 0 !important;
}
.dash-form p.dash-form__deck {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 26px !important;
  letter-spacing: normal;
  color: var(--text-soft);
  margin: 0;
  padding: 0;
  max-width: 640px;
}

.dash-form__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-form__label {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-soft);
}

/* Inline notice banner (saved / success state) ------------- */
.dash-form__notice {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #FAFAF7;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.dash-form__notice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--ink);
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
  flex-shrink: 0;
}
.dash-form__notice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.dash-form__notice-title {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
.dash-form__notice-desc {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}

/* Option tile (checkbox/radio rendered as a card) ---------- */
.dash-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dash-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dash-option:hover { border-color: var(--ink); }
.dash-option input[type="checkbox"],
.dash-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dash-option input[type="radio"] { border-radius: 50%; }
.dash-option input[type="checkbox"]:checked,
.dash-option input[type="radio"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.dash-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dash-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.dash-option__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.dash-option__title {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}
.dash-option__desc {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}
.dash-option:has(input:checked) {
  border-color: var(--ink);
  background: #FAFAF7;
}

/* Footer with back link + primary CTA --------------------- */
.dash-form__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}
/* Works on BOTH an <a> and a <button>. achievement1Test uses an <a>;
   achievement2Test must use a <button> because its back action is a JS
   handler (goBack()). Without the UA-style resets below, that <button>
   rendered as a raw grey OS button — reported 2026-08-03. */
.dash-form__back {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dash-form__back:hover { color: var(--ink); text-decoration: underline; }
.dash-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  background: var(--ink);
  color: var(--brand);
  border: 0;
  border-radius: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.dash-form__btn:hover { filter: brightness(1.12); color: var(--brand); text-decoration: none; }
.dash-form__btn:active { transform: translateY(1px); }
.dash-form__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (max-width: 900px) {
  .dash-form { padding: 28px; gap: 20px; }
  .dash-form__title { font-size: 30px; line-height: 34px; }
  .dash-options { grid-template-columns: 1fr; }
  .dash-form__footer { flex-direction: column-reverse; align-items: stretch; }
  .dash-form__btn { width: 100%; }
}


/* ============================================================
   .dash-form — input fields, textareas, intl-tel-input, tagsinput
   Used in views/employer-addProfileDetailsTest.ejs and similar
   edit forms inside the .dash-form card chrome.
   ============================================================ */

.dash-form__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dash-form__field-row {
  display: flex;
  flex-direction: row;
  gap: 14px;
}
.dash-form__field-row > .dash-form__field {
  flex: 1;
  min-width: 0;
}
.dash-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-form__field-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.dash-form .dash-form__field-label,
.dash-form label.dash-form__field-label {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--text-soft);
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dash-form__field-meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-disabled);
  text-transform: uppercase !important;
}
.dash-form__help {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* Text inputs ---------------------------------------------- */
.dash-form input.dash-form__input,
.dash-form input[type="text"].dash-form__input,
.dash-form input[type="email"].dash-form__input,
.dash-form input[type="tel"].dash-form__input {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
}
.dash-form input.dash-form__input:focus { border-color: var(--ink) !important; }
.dash-form input.dash-form__input::placeholder { color: var(--text-disabled) !important; }

/* A tag plugin (bootstrap-tagsinput via data-role, or Tagify) HIDES this
   original input and renders its own chip UI beside it. The
   `display:block !important` above — needed to beat legacy .form-control —
   was overriding the plugin's inline display:none and resurrecting the
   original, which then showed its raw serialised value as visible text
   (e.g. `[{"value":"sdfsdf"}]` on /createAchievementTest). Keep it hidden.
   Plugin-agnostic: the generated inner input carries neither the
   data-role attribute nor .dash-form__input, so it is unaffected.
   QA 2026-07-30. */
.dash-form input.dash-form__input[data-role="tagsinput"] { display: none !important; }

/* Textareas ------------------------------------------------ */
.dash-form textarea.dash-form__textarea {
  display: block !important;
  width: 100% !important;
  min-height: 96px !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical;
  transition: border-color 0.15s ease;
}
.dash-form textarea.dash-form__textarea:focus { border-color: var(--ink) !important; }
.dash-form textarea.dash-form__textarea::placeholder { color: var(--text-disabled) !important; }
.dash-form textarea.dash-form__textarea--tall { min-height: 128px !important; }

/* intl-tel-input phone field ------------------------------- */
.dash-form .iti {
  width: 100%;
  display: block;
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 48px;
  transition: border-color 0.15s ease;
}
.dash-form .iti:focus-within { border-color: var(--ink); }
.dash-form .iti input.form-control,
.dash-form .iti input[type="text"].form-control,
.dash-form .iti input[type="tel"] {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  padding-left: 100px !important;
  padding-right: 14px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
}
.dash-form .iti input.form-control:focus { border: 0 !important; }
.dash-form .iti__flag-container { position: static; padding: 0; }
.dash-form .iti__selected-flag {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 14px;
  background: transparent;
  border-right: 1px solid var(--border);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  outline: none;
  cursor: pointer;
  z-index: 2;
}
.dash-form .iti__selected-flag:hover,
.dash-form .iti__selected-flag[aria-expanded="true"] {
  background: var(--bg-subtle);
}
.dash-form .iti__arrow {
  width: 10px;
  height: 6px;
  margin-left: 2px;
  border: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23374151' d='M5 6L0 0h10z'/></svg>") no-repeat center / 10px 6px;
  transition: transform 0.15s ease;
}
.dash-form .iti__arrow.iti__arrow--up {
  border: 0;
  transform: rotate(180deg);
}
.dash-form .iti .iti__country-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.10);
  list-style: none;
  white-space: normal;
  z-index: 50;
}
.dash-form .iti__country {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  cursor: pointer;
}
.dash-form .iti__country-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-form .iti__country .iti__dial-code {
  flex-shrink: 0;
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 13px;
}
.dash-form .iti__country:hover,
.dash-form .iti__country.iti__highlight,
.dash-form .iti__country.iti__active {
  background: var(--bg-subtle);
}
.dash-form .iti__divider {
  margin: 6px 4px;
  padding: 0;
  border-top: 1px solid var(--border);
}

/* bootstrap-tagsinput (skills, highlights) ----------------- */
.dash-form .bootstrap-tagsinput {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 10px 12px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  cursor: text;
  transition: border-color 0.15s ease;
}
.dash-form .bootstrap-tagsinput:focus-within { border-color: var(--ink) !important; }
.dash-form .bootstrap-tagsinput input {
  flex: 1;
  min-width: 140px;
  height: auto !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}
.dash-form .bootstrap-tagsinput input::placeholder {
  color: var(--text-disabled);
  font-style: italic;
}
.dash-form .bootstrap-tagsinput .tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  background: var(--cream-2) !important;
  border-radius: 999px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.dash-form .bootstrap-tagsinput .tag [data-role="remove"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  background: transparent;
  border-radius: 50%;
  color: var(--text-disabled);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  box-shadow: none;
}
.dash-form .bootstrap-tagsinput .tag [data-role="remove"]:hover {
  background: rgba(10, 10, 10, 0.08);
  color: var(--ink);
}
.dash-form .bootstrap-tagsinput .tag [data-role="remove"]::after {
  content: "\00d7";
}

/* ── custom tag editor (industry-expert-addProfileDetailsTest) ─────────────
   That page cannot use bootstrap-tagsinput — industry-expert-layout-test.ejs
   never loads the plugin — so it keeps its own editor: hidden inputs plus a
   script that renders .tag-pill / .tag-remove into a list. Values below are
   copied from the .bootstrap-tagsinput block above ON PURPOSE, so the expert
   field is visually identical to the employee one despite different plumbing.
   No !important needed here: these are our own classes, not plugin markup
   fighting legacy rules. */
.dash-form__tagbox {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: text;
  transition: border-color 0.15s ease;
}
.dash-form__tagbox:focus-within { border-color: var(--ink); }
.dash-form__taglist { display: contents; }
.dash-form__taginput {
  flex: 1;
  min-width: 140px;
  height: auto;
  margin: 0;
  padding: 4px;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
}
.dash-form__taginput::placeholder { color: var(--text-disabled); font-style: italic; }
/* .tag-pill / .tag-remove are created by that view's script. */
.dash-form__tagbox .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  background: var(--cream-2);
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--ink);
}
.dash-form__tagbox .tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-disabled);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.dash-form__tagbox .tag-remove:hover { background: rgba(10, 10, 10, 0.08); color: var(--ink); }

@media (max-width: 900px) {
  .dash-form__field-row { flex-direction: column; }
}


/* ============================================================
   Topnav restyle — applies to the legacy .topnav strip rendered
   inline in dashboard page templates. Keeps the existing
   FontAwesome icons (fa-user, fa-gear, fa-bell, fa-circle) and
   the legacy markup structure; only changes visual treatment.
   ============================================================ */

/* Free the topnav from its Bootstrap .container wrapper so the strip
   spans the full width of .dashbord-mainsec. Scoped via :has() so only
   the container that wraps the topnav is affected. */
.dashbord-mainsec > .container:has(> .topnav) {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.topnav,
.dashbord-mainsec .topnav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 64px !important;
  padding: 0 40px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Defeat legacy style1.css rules that apply 20px vertical padding,
   float: left, and top: 27px to every <a> inside .topnav — these inflate
   our pills/icon buttons beyond 64px and get clipped by overflow: hidden. */
.topnav a {
  float: none !important;
  top: auto !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Breadcrumb (left) ---------------------------------------- */
.topnav .breadcrumbs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.topnav .breadcrumbs li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  color: #9CA3AF;
}
.topnav .breadcrumbs li:last-child,
.topnav .breadcrumbs li:last-child span {
  color: #0A0A0A !important;
  font-weight: 600 !important;
}
/* Slash divider between crumbs via CSS (replaces the literal "/" text node) */
.topnav .breadcrumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: #D1D5DB;
  font-weight: 400;
}

/* Right cluster (user pill + role pill + icon buttons) ---- */
.topnav .breadcrumbs_list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.topnav .breadcrumbs_list > li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Hide the search input — not surfaced in the new topnav */
.topnav .breadcrumbs_list li input[type="search"] {
  display: none !important;
}

/* User pill (Berhgss Studio with fa-user icon) */
.topnav .breadcrumbs_list .user_btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px 6px 6px !important;
  background: #F3F4F6 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: #0A0A0A !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.topnav .breadcrumbs_list .user_btn:hover {
  background: #E5E7EB !important;
  color: #0A0A0A !important;
  text-decoration: none !important;
}
.topnav .breadcrumbs_list .user_btn .fa-user {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  background: #C5F154 !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  color: #0A0A0A !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Role pill (Business Head — dark with mono caps lime text) */
.topnav .breadcrumbs_list .business_btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  background: #0A0A0A !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  letter-spacing: 0.06em !important;
  color: #C5F154 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.topnav .breadcrumbs_list .business_btn:hover {
  filter: brightness(1.15);
  color: #C5F154 !important;
  text-decoration: none !important;
}

/* Icon buttons (gear, bell) — bordered squares */
.topnav .breadcrumbs_list .notification-icon {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  color: #6B7280 !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.topnav .breadcrumbs_list .notification-icon:hover {
  border-color: #0A0A0A !important;
  color: #0A0A0A !important;
  background: #FAFAF7 !important;
  text-decoration: none !important;
}
.topnav .breadcrumbs_list .notification-icon > i {
  font-size: 14px !important;
  line-height: 1;
}
/* Notification dot on the bell — replace legacy red with our lime accent.
   Legacy markup renders <i class="fa fa-bell"></i><i class="fa fa-circle"></i>
   when there are unread notifications. */
.topnav .breadcrumbs_list .notification-icon > i.fa-circle {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 8px !important;
  height: 8px !important;
  font-size: 0 !important;
  background: #C5F154 !important;
  color: transparent !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 50% !important;
  line-height: 0 !important;
}

@media (max-width: 900px) {
  .topnav { height: auto !important; padding: 12px 20px !important; flex-wrap: wrap !important; gap: 10px !important; }
  .topnav .breadcrumbs_list { flex-wrap: wrap !important; }
}

/* Meetings shortcut in the top bar (left of the company name). Same pill as the identity button;
   dark with a lime icon while you're on the Meetings page. */
.topnav .breadcrumbs_list .bttn.topnav-meetings {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px 6px 6px !important;
  background: #F3F4F6 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: #0A0A0A !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap;
}
.topnav .breadcrumbs_list .bttn.topnav-meetings:hover { background: #E5E7EB !important; }
/* Not the notification dot: the legacy `.topnav ul li a span` rule (style-new.css) positions every span
   in a top-bar link absolutely, so undo that here. */
.topnav .breadcrumbs_list .bttn.topnav-meetings .topnav-meetings__icon {
  position: static !important; top: auto !important; right: auto !important;
  width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #C5F154 !important; color: #0A0A0A;
  display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0;
}
.topnav .breadcrumbs_list .bttn.topnav-meetings.is-active { background: #0A0A0A !important; color: #C5F154 !important; }

/* Test-layout topnav (employer-layout-test.ejs uses different button classes) */
.topnav .breadcrumbs_list .bttn.white-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px 6px 6px !important;
  background: #F3F4F6 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: #0A0A0A !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap;
}
.topnav .breadcrumbs_list .bttn.white-btn:hover {
  background: #E5E7EB !important;
  color: #0A0A0A !important;
  text-decoration: none !important;
}
.topnav .breadcrumbs_list .bttn.white-btn img {
  width: 22px !important;
  height: 22px !important;
  padding: 5px !important;
  background: #C5F154 !important;
  border-radius: 50% !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.topnav .breadcrumbs_list .bttn.small_btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  background: #0A0A0A !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  letter-spacing: 0.06em !important;
  color: #C5F154 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.topnav .breadcrumbs_list .bttn.small_btn:hover {
  filter: brightness(1.15);
  color: #C5F154 !important;
  text-decoration: none !important;
}
.topnav .breadcrumbs_list .logout-btn,
.topnav .breadcrumbs_list .noti-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  color: #6B7280 !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.topnav .breadcrumbs_list .logout-btn:hover,
.topnav .breadcrumbs_list .noti-btn:hover {
  border-color: #0A0A0A !important;
  color: #0A0A0A !important;
  background: #FAFAF7 !important;
  text-decoration: none !important;
}
.topnav .breadcrumbs_list .logout-btn img,
.topnav .breadcrumbs_list .noti-btn img {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}
.topnav .breadcrumbs_list .noti-btn span {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #C5F154;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
}


/* ============================================================
   .dash-profile — employer company profile page
   View: views/employer-company-profile-new-test.ejs
   Controller: employerCompanyProfileTest (route /employerCompanyProfileTest)
   Hybrid empty/populated states: each card detects its own data
   shape and renders an empty-state block when missing.
   Setup checklist appears server-side conditional via pfShowChecklist.
   ============================================================ */
.dash-profile { --brand:#C5F154; --ink:#0A0A0A; --soft-ink:#1F2937; --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF; --border:#E5E7EB; --hairline:#F3F4F6; --cream:#F5F1E8; --cream-2:#F0EBDC; --bg:#FAFAF7; }
.dash-profile.container-fluid { padding:0; margin:0 !important; }
.dash-profile .pf-board { display:flex; flex-direction:column; gap:32px; padding:48px 56px 80px; box-sizing:border-box; background:var(--bg); width:100%; min-width:0; }
.dash-profile > * { width:100% !important; max-width:none !important; }

/* atoms */
.dash-profile .pf-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.dash-profile .pf-dot--lime { background:var(--brand); }
.dash-profile .pf-dot--muted { background:#9CA3AF; }
.dash-profile .pf-mono { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-profile .pf-mono--lime { color:var(--brand) !important; font-size:12px; line-height:16px; }
.dash-profile .pf-mono--dim { color:var(--text-disabled); }
.dash-profile .pf-sep { color:#D1D5DB; }
.dash-profile .pf-eyebrow { display:inline-flex; align-items:center; gap:8px; }

/* shared button atoms */
.dash-profile .pf-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; font-family:"Roboto",system-ui,sans-serif; font-weight:500; font-size:14px; line-height:18px; text-decoration:none !important; transition:filter 0.15s, background 0.15s; cursor:pointer; border:none; }
.dash-profile .pf-btn--dark { background:var(--ink); color:var(--brand) !important; }
.dash-profile .pf-btn--dark:hover { filter:brightness(1.1); color:var(--brand) !important; }
.dash-profile .pf-btn--lime { background:var(--brand); color:var(--ink) !important; }
.dash-profile .pf-btn--lime:hover { filter:brightness(0.96); color:var(--ink) !important; }
.dash-profile .pf-btn--ghost { background:#FFFFFF; color:var(--ink) !important; border:1px solid var(--border); padding:9px 15px; }
.dash-profile .pf-btn--ghost:hover { background:#FAFAF7; color:var(--ink) !important; }
.dash-profile .pf-btn--small { padding:9px 14px; font-size:12px; }

/* page header (chip row + actions) */
.dash-profile .pf-page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-profile .pf-page-head__crumb { display:flex; align-items:center; gap:12px; }
.dash-profile .pf-chip { background:var(--ink); color:var(--brand); font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; padding:3px 8px; border-radius:4px; text-transform:uppercase; }
.dash-profile .pf-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:16px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-profile .pf-page-head__actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* HERO ---------------------------------------------------- */
.dash-profile .pf-hero { display:flex; align-items:stretch; background:#FFFFFF; border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.dash-profile .pf-hero__id { flex:1.4; display:flex; flex-direction:column; padding:40px 44px; gap:22px; min-width:0; box-sizing:border-box; }
.dash-profile .pf-hero__top { display:flex; align-items:flex-start; gap:24px; }
.dash-profile .pf-hero__logo { position:relative; flex-shrink:0; width:96px; height:96px; background:var(--ink); border-radius:18px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--brand); font-family:"Roboto",system-ui,sans-serif; font-weight:800; font-size:38px; line-height:1; letter-spacing:-0.02em; }
.dash-profile .pf-hero__logo--empty { background:var(--cream); border:2px dashed #D8CFB8; color:var(--text-disabled); }
.dash-profile .pf-hero__logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dash-profile .pf-hero__logo.is-fallback img { display:none; }
.dash-profile .pf-hero__logo-fallback { display:none; }
.dash-profile .pf-hero__logo--empty .pf-hero__logo-fallback, .dash-profile .pf-hero__logo.is-fallback .pf-hero__logo-fallback { display:inline; }
.dash-profile .pf-hero__identity { display:flex; flex-direction:column; gap:8px; flex-grow:1; min-width:0; }
.dash-profile .pf-hero__name-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dash-profile .pf-hero__name { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:36px !important; line-height:42px !important; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.dash-profile .pf-hero__badge { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; }
.dash-profile .pf-hero__badge--public { width:24px; height:24px; padding:0; background:var(--brand); border:1.5px solid var(--ink); justify-content:center; }
.dash-profile .pf-hero__badge--private { background:var(--cream); border:1px solid var(--cream-2); color:var(--text-muted); }
.dash-profile .pf-hero__meta { display:flex; align-items:center; gap:6px; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); flex-wrap:wrap; }
.dash-profile .pf-hero__desc { font-family:"Roboto",system-ui,sans-serif !important; font-size:16px !important; line-height:26px !important; color:var(--text-soft); margin:0; max-width:680px; }
.dash-profile .pf-hero__desc-empty { display:flex; flex-direction:column; gap:8px; padding:18px 20px; background:var(--cream); border:1px dashed #D8CFB8; border-radius:14px; text-decoration:none !important; color:var(--text-soft); }
.dash-profile .pf-hero__desc-empty:hover { background:#EFE9D9; color:var(--text-soft); text-decoration:none !important; }
.dash-profile .pf-hero__desc-empty span:nth-child(2) { font-family:"Roboto",system-ui,sans-serif; font-size:15px; line-height:23px; color:var(--text-soft); }
.dash-profile .pf-hero__desc-empty-cta { font-family:"Roboto",system-ui,sans-serif; font-size:13px; font-weight:600; color:var(--ink); padding-top:2px; }
.dash-profile .pf-hero__pills { display:flex; gap:8px; flex-wrap:wrap; }
.dash-profile .pf-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:#FFFFFF; border:1px solid var(--border); border-radius:999px; font-family:"Roboto",system-ui,sans-serif; font-size:13px; color:var(--text-soft); }
.dash-profile .pf-pill--dark { background:var(--ink); color:var(--brand) !important; border-color:var(--ink); font-weight:500; }
.dash-profile .pf-pill--muted { color:var(--text-disabled); }
.dash-profile .pf-hero__panel { flex:1; display:flex; flex-direction:column; padding:40px 36px; gap:18px; background:var(--ink); color:#FFFFFF; min-width:0; box-sizing:border-box; }
.dash-profile .pf-hero__panel-head { display:flex; align-items:center; gap:10px; }
.dash-profile .pf-hero__panel-list { display:flex; flex-direction:column; gap:14px; }
.dash-profile .pf-hero__panel-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.dash-profile .pf-hero__panel-row--hero { padding-bottom:14px; border-bottom:1px solid var(--soft-ink); }
.dash-profile .pf-hero__panel-val { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:20px; line-height:24px; color:#FFFFFF; }
.dash-profile .pf-hero__panel-val.is-zero { color:var(--text-muted); }
.dash-profile .pf-hero__panel-big { display:flex; align-items:baseline; gap:4px; }
.dash-profile .pf-hero__panel-big-num { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800; font-size:32px; line-height:36px; color:var(--brand); letter-spacing:-0.02em; }
.dash-profile .pf-hero__panel-big-unit { font-family:"Roboto Mono",monospace !important; font-size:13px; color:var(--text-disabled); }
.dash-profile .pf-hero__panel-muted { font-family:"Roboto Mono",monospace !important; font-size:13px; color:var(--text-muted); }
.dash-profile .pf-hero__panel-foot { margin-top:8px; padding-top:14px; border-top:1px solid var(--soft-ink); font-family:"Roboto",system-ui,sans-serif; font-size:12px; line-height:18px; color:var(--text-disabled); }

/* SETUP CHECKLIST ----------------------------------------- */
.dash-profile .pf-checklist { display:flex; gap:32px; align-items:stretch; background:#FFFFFF; border:1px solid var(--border); border-radius:20px; padding:36px 40px; box-sizing:border-box; }
.dash-profile .pf-checklist__intro { flex:1; display:flex; flex-direction:column; gap:18px; min-width:0; }
.dash-profile .pf-checklist__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:32px !important; line-height:38px !important; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.dash-profile .pf-checklist__sub { font-family:"Roboto",system-ui,sans-serif !important; font-size:15px !important; line-height:24px !important; color:var(--text-muted); margin:0; max-width:520px; }
.dash-profile .pf-checklist__progress { display:flex; align-items:center; gap:14px; padding-top:6px; }
.dash-profile .pf-ring { position:relative; width:64px; height:64px; flex-shrink:0; }
.dash-profile .pf-ring__num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"Roboto",system-ui,sans-serif; font-weight:800; font-size:15px; color:var(--ink); }
.dash-profile .pf-checklist__progress-text { display:flex; flex-direction:column; gap:4px; font-family:"Roboto",system-ui,sans-serif; font-size:14px; line-height:20px; color:var(--ink); }
.dash-profile .pf-checklist__list { flex:1.3; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.dash-profile .pf-step { display:flex; align-items:center; gap:14px; padding:14px 16px; background:#FFFFFF; border:1px solid var(--border); border-radius:12px; }
.dash-profile .pf-step--done { background:#FAFAF7; opacity:0.65; }
.dash-profile .pf-step--next { border-color:var(--ink); }
.dash-profile .pf-step__check { flex-shrink:0; width:22px; height:22px; border:1.5px solid #D1D5DB; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dash-profile .pf-step--next .pf-step__check { border-color:var(--ink); }
.dash-profile .pf-step--done .pf-step__check { background:var(--brand); border-color:var(--brand); }
.dash-profile .pf-step__copy { display:flex; flex-direction:column; gap:0; flex-grow:1; min-width:0; }
.dash-profile .pf-step__label { font-family:"Roboto",system-ui,sans-serif !important; font-weight:500; font-size:14px; line-height:18px; color:var(--ink); text-decoration:none !important; }
.dash-profile .pf-step--next .pf-step__label { font-weight:600; }
.dash-profile .pf-step--done .pf-step__label { text-decoration:line-through !important; }
.dash-profile a.pf-step__label:hover { color:var(--ink); text-decoration:underline !important; }
.dash-profile .pf-step__sub { font-family:"Roboto",system-ui,sans-serif; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-profile .pf-step--done .pf-step__sub { color:var(--text-disabled); }
.dash-profile .pf-step__next { font-family:"Roboto Mono",monospace; font-weight:500; font-size:10px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); text-decoration:none !important; flex-shrink:0; }
.dash-profile .pf-step__next:hover { color:var(--ink); text-decoration:underline !important; }

/* ABOUT --------------------------------------------------- */
.dash-profile .pf-about { display:flex; flex-direction:column; gap:28px; background:#FFFFFF; border:1px solid var(--border); border-radius:20px; padding:36px 44px; box-sizing:border-box; }
.dash-profile .pf-about__head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dash-profile .pf-about__heading { display:flex; flex-direction:column; gap:10px; flex-grow:1; min-width:0; }
.dash-profile .pf-about__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:32px !important; line-height:38px !important; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.dash-profile .pf-about__edit { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:transparent; border:1px solid var(--border); border-radius:999px; font-family:"Roboto",system-ui,sans-serif; font-size:13px; color:var(--ink); text-decoration:none !important; flex-shrink:0; }
.dash-profile .pf-about__edit:hover { background:#FAFAF7; color:var(--ink); text-decoration:none !important; }
.dash-profile .pf-about__body { display:flex; flex-direction:column; gap:14px; }
.dash-profile .pf-about__body p { font-family:"Roboto",system-ui,sans-serif !important; font-size:16px !important; line-height:28px !important; color:var(--text-soft); margin:0; }
.dash-profile .pf-about__body p:first-child { font-size:17px !important; line-height:30px !important; color:#1F2937; }
.dash-profile .pf-about__tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.dash-profile .pf-about__tile { padding:22px 24px; background:var(--cream); border:1px solid var(--cream-2); border-radius:14px; display:flex; flex-direction:column; gap:6px; }
.dash-profile .pf-about__tile-val { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:18px; line-height:24px; color:var(--ink); }

/* MAIN GRID ----------------------------------------------- */
.dash-profile .pf-grid { display:flex; gap:24px; align-items:flex-start; }
.dash-profile .pf-grid__left { flex:1.7; min-width:0; display:flex; flex-direction:column; gap:24px; }
.dash-profile .pf-grid__right { flex:1; min-width:0; display:flex; flex-direction:column; gap:24px; }

/* card shell */
.dash-profile .pf-card { background:#FFFFFF; border:1px solid var(--border); border-radius:18px; padding:28px 32px; display:flex; flex-direction:column; gap:18px; box-sizing:border-box; }
.dash-profile .pf-grid__right .pf-card { padding:28px; }
.dash-profile .pf-card__head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.dash-profile .pf-card__head--stacked { flex-direction:column; align-items:stretch; gap:4px; }
.dash-profile .pf-card__heading { display:flex; flex-direction:column; gap:4px; }
.dash-profile .pf-card__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:24px !important; line-height:30px !important; letter-spacing:-0.01em; color:var(--ink); margin:0; }
.dash-profile .pf-grid__right .pf-card__title { font-size:22px !important; line-height:28px !important; }
.dash-profile .pf-card__link { display:inline-flex; align-items:center; gap:6px; font-family:"Roboto",system-ui,sans-serif; font-size:13px; font-weight:500; color:var(--ink); text-decoration:none !important; }
.dash-profile .pf-card__link:hover { color:var(--ink); text-decoration:underline !important; }

/* empty-state block (shared) */
.dash-profile .pf-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 24px; background:var(--cream); border:1.5px dashed #D8CFB8; border-radius:14px; text-align:center; }
.dash-profile .pf-empty__icon { width:44px; height:44px; background:#FFFFFF; border:1px solid var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.dash-profile .pf-empty__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:15px; line-height:20px; color:var(--ink); }
.dash-profile .pf-empty__body { font-family:"Roboto",system-ui,sans-serif !important; font-size:13px; line-height:19px; color:var(--text-muted); max-width:360px; }
.dash-profile .pf-empty__cta { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:9px 16px; background:var(--ink); color:var(--brand) !important; border-radius:10px; font-family:"Roboto",system-ui,sans-serif; font-weight:500; font-size:13px; text-decoration:none !important; }
.dash-profile .pf-empty__cta:hover { filter:brightness(1.1); color:var(--brand) !important; text-decoration:none !important; }

/* TOP PROJECTS -------------------------------------------- */
.dash-profile .pf-projects__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.dash-profile .pf-project { display:flex; align-items:center; gap:16px; padding:18px 20px; background:#FAFAF7; border:1px solid var(--border); border-radius:12px; }
.dash-profile .pf-project__num { flex-shrink:0; width:44px; height:44px; background:var(--ink); color:var(--brand); border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:"Roboto Mono",monospace; font-weight:700; font-size:14px; }
.dash-profile .pf-project__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:16px; line-height:22px; color:var(--ink); flex-grow:1; min-width:0; }

/* KEY SERVICES -------------------------------------------- */
.dash-profile .pf-services__list { display:flex; flex-wrap:wrap; gap:10px; }
.dash-profile .pf-service { display:inline-flex; align-items:center; padding:10px 18px; background:var(--cream); border:1px solid var(--cream-2); border-radius:999px; font-family:"Roboto",system-ui,sans-serif !important; font-weight:500; font-size:14px; color:var(--ink); }
.dash-profile .pf-service--active { background:var(--ink); color:var(--brand) !important; border-color:var(--ink); }
.dash-profile .pf-service--add { background:transparent; border:1.5px dashed #D8CFB8; color:var(--text-disabled); text-decoration:none !important; cursor:pointer; }
.dash-profile .pf-service--add:hover { color:var(--ink); border-color:var(--ink); }
.dash-profile .pf-service--ghost { background:transparent; border:1.5px dashed var(--border); color:#D1D5DB; }
.dash-profile .pf-services__hint { font-family:"Roboto",system-ui,sans-serif; font-size:13px; line-height:19px; color:var(--text-disabled); margin:0; }

/* OPEN POSITIONS ------------------------------------------ */
.dash-profile .pf-jobs__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.dash-profile .pf-job { display:flex; align-items:center; gap:16px; padding:18px 20px; background:#FFFFFF; border:1px solid var(--border); border-radius:12px; }
.dash-profile .pf-job__copy { display:flex; flex-direction:column; gap:4px; flex-grow:1; min-width:0; }
.dash-profile .pf-job__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:16px; line-height:20px; color:var(--ink); text-transform:capitalize; }
.dash-profile .pf-job__meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dash-profile .pf-job__tag { display:inline-flex; align-items:center; padding:3px 8px; background:var(--brand); border-radius:999px; font-family:"Roboto Mono",monospace; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); }

/* LATEST WRITING ------------------------------------------ */
/* Existing employer-side company profile block. */
.dash-profile .pf-blogs__row { display:flex; gap:14px; align-items:stretch; }
.dash-profile .pf-blog-featured { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--ink); color:#FFFFFF; border-radius:14px; min-height:200px; }
.dash-profile .pf-blog-featured__eyebrow { display:flex; align-items:center; gap:8px; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand); }
.dash-profile .pf-blog-featured__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:18px; line-height:24px; color:#FFFFFF; margin:0; flex-grow:1; }
.dash-profile .pf-blog-featured__meta { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-disabled); }
.dash-profile .pf-blog-list { flex:1; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.dash-profile .pf-blog { display:flex; flex-direction:column; gap:6px; padding:16px 18px; background:#FAFAF7; border:1px solid var(--border); border-radius:12px; }
.dash-profile .pf-blog__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:600; font-size:14px; line-height:20px; color:var(--ink); }

/* Employee-side company profile article hierarchy. */
.dash-profile .pf-articles { padding:24px 28px; gap:14px; }
.dash-profile .pf-articles__head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.dash-profile .pf-articles__count-link { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; font-family:"Roboto Mono",monospace !important; font-size:11px; font-weight:500; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled) !important; text-decoration:none !important; }
.dash-profile .pf-articles__count-link:hover { color:var(--ink) !important; }
.dash-profile .pf-articles__count-link:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.dash-profile .pf-articles__features { display:flex; flex-shrink:0; gap:12px; height:136px; }
.dash-profile .pf-articles__features--solo .pf-article-featured { flex-grow:1; }
.dash-profile .pf-article-featured,
.dash-profile .pf-article-secondary,
.dash-profile .pf-article-row { text-decoration:none !important; box-sizing:border-box; }
.dash-profile .pf-article-featured { display:flex; flex-basis:0; flex-grow:1.05; flex-direction:column; gap:10px; min-width:0; min-height:136px; height:136px; padding:18px 20px; border-radius:14px; background:var(--ink); color:#FFFFFF !important; transition:transform 0.15s ease, background 0.15s ease; }
.dash-profile .pf-article-featured:hover { transform:translateY(-1px); background:#1A1A1A; color:#FFFFFF !important; }
.dash-profile .pf-article-featured__eyebrow { display:flex; align-items:center; gap:8px; font-family:"Roboto Mono",monospace !important; font-size:12px; font-weight:500; line-height:16px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand); }
.dash-profile .pf-article-featured__title { font-family:"Roboto",system-ui,sans-serif !important; font-size:18px; font-weight:700; line-height:24px; color:#FFFFFF; }
.dash-profile .pf-article-featured__date { margin-top:auto; font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:500; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-disabled); }
.dash-profile .pf-articles__secondary { display:flex; flex-basis:0; flex-grow:0.95; flex-direction:column; gap:10px; min-width:0; height:136px; }
.dash-profile .pf-article-secondary { display:flex; flex-basis:0; flex-grow:1; flex-direction:column; gap:4px; min-width:0; min-height:0; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:#FAFAF7; color:var(--ink) !important; transition:border-color 0.15s ease, background 0.15s ease; }
.dash-profile .pf-articles__secondary--single .pf-article-secondary { gap:10px; padding:18px 20px; border-radius:14px; }
.dash-profile .pf-article-secondary:hover { border-color:#D1D5DB; background:#FFFFFF; color:var(--ink) !important; }
.dash-profile .pf-article-secondary__title { flex-grow:1; min-width:0; font-family:"Roboto",system-ui,sans-serif !important; font-size:14px; font-weight:700; line-height:18px; color:var(--ink); }
.dash-profile .pf-articles__secondary--single .pf-article-secondary__title { font-size:16px; line-height:21px; }
.dash-profile .pf-article-secondary__date { font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:500; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-disabled); }
.dash-profile .pf-articles__older { display:flex; flex-direction:column; width:100%; padding-top:4px; border-top:1px solid var(--border); }
.dash-profile .pf-articles__older-head { display:flex; align-items:center; justify-content:space-between; width:100%; height:34px; padding:0 2px; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; text-transform:uppercase; }
.dash-profile .pf-articles__older-head span:first-child { font-weight:600; letter-spacing:0.08em; color:var(--text-muted); }
.dash-profile .pf-articles__older-head span:last-child { font-weight:500; letter-spacing:0.06em; color:var(--text-disabled); }
.dash-profile .pf-articles__older-list { list-style:none; margin:0; padding:0; }
.dash-profile .pf-article-row { display:grid; grid-template-columns:24px minmax(0,1fr) 88px 16px; align-items:center; width:100%; min-height:44px; padding:0 2px; gap:12px; border-bottom:1px solid var(--border); color:var(--ink) !important; transition:background 0.15s ease; }
.dash-profile .pf-article-row:hover { background:#FAFAF7; color:var(--ink) !important; }
.dash-profile .pf-article-row__number { width:24px; font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:14px; letter-spacing:0.06em; color:var(--text-disabled); }
.dash-profile .pf-article-row__title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:"Roboto",system-ui,sans-serif !important; font-size:14px; font-weight:600; line-height:18px; color:var(--ink); }
.dash-profile .pf-article-row__date { width:88px; font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:500; line-height:14px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-disabled); }
.dash-profile .pf-article-row__arrow { width:16px; font-family:"Roboto",system-ui,sans-serif !important; font-size:16px; font-weight:500; line-height:18px; color:var(--ink); }
.dash-profile .pf-article-featured:focus-visible,
.dash-profile .pf-article-secondary:focus-visible,
.dash-profile .pf-article-row:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }

/* CONTACT ------------------------------------------------- */
.dash-profile .pf-contact__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.dash-profile .pf-contact__row { display:flex; align-items:flex-start; gap:14px; }
.dash-profile .pf-contact__row--empty { padding:12px 14px; border:1.5px dashed var(--border); border-radius:12px; align-items:center; }
.dash-profile .pf-contact__row--empty .pf-contact__icon { background:var(--cream); }
.dash-profile .pf-contact__icon { flex-shrink:0; width:34px; height:34px; background:var(--cream); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.dash-profile .pf-contact__copy { display:flex; flex-direction:column; gap:2px; flex-grow:1; min-width:0; }
.dash-profile .pf-contact__val { font-family:"Roboto",system-ui,sans-serif !important; font-size:14px; line-height:20px; color:var(--ink); text-decoration:none !important; word-break:break-all; }
.dash-profile a.pf-contact__val:hover { color:var(--ink); text-decoration:underline !important; }
.dash-profile .pf-contact__add { font-family:"Roboto",system-ui,sans-serif !important; font-size:14px; line-height:20px; color:var(--text-disabled); text-decoration:none !important; }
.dash-profile a.pf-contact__add:hover { color:var(--ink); text-decoration:underline !important; }

/* WORKSPACE PULSE ----------------------------------------- */
.dash-profile .pf-pulse__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.dash-profile .pf-pulse__row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--hairline); }
.dash-profile .pf-pulse__row:last-child { padding-bottom:0; border-bottom:none; }
.dash-profile .pf-pulse__icon { flex-shrink:0; width:32px; height:32px; background:var(--cream); border-radius:9px; display:flex; align-items:center; justify-content:center; }
.dash-profile .pf-pulse__label { flex-grow:1; font-family:"Roboto",system-ui,sans-serif !important; font-size:14px; line-height:18px; color:var(--text-soft); }
.dash-profile .pf-pulse__val { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:20px; line-height:24px; color:var(--ink); }
.dash-profile .pf-pulse__val.is-zero { color:#D1D5DB; }
.dash-profile .pf-pulse__hint { padding-top:8px; font-family:"Roboto",system-ui,sans-serif; font-size:12px; line-height:18px; color:var(--text-disabled); margin:0; }

/* SHARE CTA ----------------------------------------------- */
.dash-profile .pf-share { display:flex; flex-direction:column; gap:14px; background:var(--ink); border-radius:18px; padding:28px; color:#FFFFFF; }
.dash-profile .pf-share .pf-eyebrow .pf-mono { color:var(--text-disabled); }
.dash-profile .pf-share__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em; color:#FFFFFF; margin:0; }
.dash-profile .pf-share__body { font-family:"Roboto",system-ui,sans-serif !important; font-size:14px !important; line-height:22px !important; color:#9CA3AF; margin:0; }
.dash-profile .pf-share__url-row { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--soft-ink); border:1px solid #374151; border-radius:10px; }
.dash-profile .pf-share__url { flex-grow:1; min-width:0; background:transparent; border:none; outline:none; font-family:"Roboto Mono",monospace !important; font-size:12px; line-height:16px; color:#9CA3AF; padding:0; }
.dash-profile .pf-share__copy { background:transparent; border:none; cursor:pointer; padding:0; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--brand); }
.dash-profile .pf-share__copy.is-copied { color:#FFFFFF; }
.dash-profile .pf-share__actions { display:flex; gap:8px; padding-top:4px; }
.dash-profile .pf-share__toggle-row { display:flex; align-items:center; gap:12px; padding-top:4px; }
.dash-profile .pf-share__toggle { display:flex; align-items:center; gap:6px; font-family:"Roboto",system-ui,sans-serif; font-size:13px; color:#FFFFFF; }
.dash-profile .pf-share__toggle-track { display:inline-block; width:36px; height:20px; background:var(--soft-ink); border:1px solid #374151; border-radius:999px; position:relative; }
.dash-profile .pf-share__toggle-knob { position:absolute; left:2px; top:2px; width:14px; height:14px; background:#9CA3AF; border-radius:50%; }

/* responsive ---------------------------------------------- */
@media (max-width:1100px){
  .dash-profile .pf-hero { flex-direction:column; }
  .dash-profile .pf-checklist { flex-direction:column; }
  .dash-profile .pf-about__tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dash-profile .pf-grid { flex-direction:column; }
  .dash-profile .pf-grid__right { width:100%; }
  .dash-profile .pf-blogs__row { flex-direction:column; }
}
@media (max-width:720px){
  .dash-profile .pf-board { padding:32px 24px 56px; gap:24px; }
  .dash-profile .pf-hero__id { padding:28px; gap:18px; }
  .dash-profile .pf-hero__top { flex-direction:column; gap:18px; }
  .dash-profile .pf-hero__name { font-size:28px !important; line-height:34px !important; }
  .dash-profile .pf-hero__panel { padding:28px; }
  .dash-profile .pf-checklist { padding:24px; }
  .dash-profile .pf-checklist__title { font-size:24px !important; line-height:30px !important; }
  .dash-profile .pf-about { padding:24px; }
  .dash-profile .pf-about__title { font-size:24px !important; line-height:30px !important; }
  .dash-profile .pf-about__tiles { grid-template-columns:1fr; }
  .dash-profile .pf-card { padding:24px; }
  .dash-profile .pf-job { flex-direction:column; align-items:stretch; gap:10px; }
  .dash-profile .pf-articles { padding:22px 20px; }
  .dash-profile .pf-articles__head { align-items:flex-start; }
  .dash-profile .pf-articles__features { flex-direction:column; height:auto; }
  .dash-profile .pf-article-featured { flex-basis:auto; flex-grow:0; width:100%; }
  .dash-profile .pf-articles__secondary { flex-basis:auto; flex-grow:0; width:100%; height:auto; }
  .dash-profile .pf-article-secondary { flex-basis:auto; min-height:68px; }
  .dash-profile .pf-article-row { grid-template-columns:24px minmax(0,1fr) 16px; min-height:58px; padding:8px 2px; }
  .dash-profile .pf-article-row__title { white-space:normal; }
  .dash-profile .pf-article-row__date { grid-column:2; grid-row:2; width:auto; }
  .dash-profile .pf-article-row__arrow { grid-column:3; grid-row:1 / span 2; }
}


/* ============================================================
   .dash-me — the signed-in user's OWN profile ("My Profile")
   Views: views/employerProfilePage-test.ejs  (route /employer_ProfilePageTest)
          views/profileNewTest.ejs            (routes /userProfile, /userProfileTest)
   Built 2026-07-30 by lifting the .dash-profile / pf-* vocabulary
   (Company Profile) onto My Profile's real fields, at the user's ask
   to raise My Profile to the same standard.

   RENAMED from .dash-myprofile (2026-07-30). That name is now owned
   SOLELY by the 96 inline rules in views/aspirantProfileTest.ejs, so
   the aspirant chrome leg can add the dashboard-welcome.css <link>
   without the two definitions colliding per-property.

   Hybrid empty/populated: every block detects its own data and
   renders its own empty affordance. Ratings reuse the global
   .ink-score meter — no rating CSS lives here.
   ============================================================ */
/* ROOT INSET — stated, not inherited. Both profile roots are a bare <section>,
   so legacy public/css/style-test.css:448 `section { margin: 20px }` applies to
   them. But Company Profile's root is ALSO `.container-fluid`, and Bootstrap's
   `.container-fluid { margin-left:auto; margin-right:auto }` is (0,1,0) — it
   beats the (0,0,1) element rule on the horizontal axis only. So My Profile sat
   20px in on the left and right while Company Profile sat flush, and switching
   between the two tabs shifted the content sideways by 20px while the vertical
   inset stayed put. Both are now 0; each layer's own 48px/56px board padding
   provides the real inset. Reported 2026-08-03. */
.dash-me {
  margin: 0 !important;
  --brand:#C5F154; --ink:#0A0A0A; --soft-ink:#1F2937;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --cream:#F5F1E8; --cream-2:#F0EBDC; --dashed:#D8CFB8;
  --bg:#FAFAF7;
  display:flex; flex-direction:column; gap:32px;
  padding:48px 56px 80px; background:var(--bg);
  width:100%; min-width:0;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
}
.dash-me, .dash-me *, .dash-me *::before, .dash-me *::after { box-sizing:border-box; }

/* Defensive type reset — the legacy sheets push Bebas Neue + letter-spacing
   in at low specificity; every mono class below re-asserts Roboto Mono. */
.dash-me, .dash-me * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif !important; text-align:left; }
.dash-me h1, .dash-me h2, .dash-me h3, .dash-me h4, .dash-me h5, .dash-me h6, .dash-me p {
  margin:0 !important; padding:0 !important; font-weight:inherit;
  letter-spacing:normal !important; text-transform:none !important; text-align:left !important;
}
.dash-me .me-mono, .dash-me .me-chip, .dash-me .me-crumb, .dash-me .me-jobline,
.dash-me .me-role-pill__text, .dash-me .me-panel__big-unit, .dash-me .me-panel__muted,
.dash-me .me-hl__num, .dash-me .me-step__next, .dash-me .me-avatar-sm,
.dash-me .me-table th { font-family:"Roboto Mono",monospace !important; }

/* atoms --------------------------------------------------- */
.dash-me .me-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.dash-me .me-dot--lime { background:var(--brand); }
.dash-me .me-mono { font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-me .me-mono--lime { color:var(--brand) !important; font-size:12px; line-height:16px; }
.dash-me .me-mono--dim { color:var(--text-disabled); }
.dash-me .me-eyebrow { display:inline-flex; align-items:center; gap:8px; }

/* buttons ------------------------------------------------- */
.dash-me .me-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; font-weight:500 !important; font-size:14px !important; line-height:18px; text-decoration:none !important; border:none; cursor:pointer; transition:background .15s; }
.dash-me .me-btn--dark { background:var(--ink); color:var(--brand) !important; }
.dash-me .me-btn--dark:hover { background:#1A1A1A; color:var(--brand) !important; text-decoration:none !important; }
.dash-me .me-btn--ghost { background:transparent; color:var(--ink) !important; border:1px solid var(--border); border-radius:999px; padding:8px 14px; font-size:13px !important; }
.dash-me .me-btn--ghost:hover { background:var(--bg); color:var(--ink) !important; text-decoration:none !important; }
.dash-me .me-btn--row { padding:8px 16px; font-size:13px !important; border-radius:8px; }

/* page header --------------------------------------------- */
.dash-me .me-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-me .me-head__crumb { display:flex; align-items:center; gap:12px; }
.dash-me .me-chip { background:var(--ink); color:var(--brand); font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; padding:3px 8px; border-radius:4px; text-transform:uppercase; }
.dash-me .me-crumb { font-weight:500; font-size:11px; line-height:16px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }

/* HERO ---------------------------------------------------- */
.dash-me .me-hero { display:flex; align-items:stretch; background:#FFFFFF; border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.dash-me .me-hero__id { flex:1.4; display:flex; flex-direction:column; padding:40px 44px; gap:22px; min-width:0; }
.dash-me .me-hero__top { display:flex; align-items:flex-start; gap:24px; }
.dash-me .me-avatar { position:relative; width:96px; height:96px; flex-shrink:0; }
/* Placeholder disc is a system GREY, not ink (2026-08-03, user's call): with a
   photo the <img> covers this fill entirely, so the colour only ever shows in
   the initials state — where it needs to read as a quiet placeholder rather
   than a second black block competing with the hero panel beside it.
   Applies to all three profiles on this shared layer. */
.dash-me .me-avatar__disc { width:96px; height:96px; background:var(--border); border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.dash-me .me-avatar__initials { font-weight:800 !important; font-size:36px !important; line-height:36px !important; letter-spacing:-0.02em !important; color:var(--text-soft); }
.dash-me .me-avatar__img { width:100%; height:100%; object-fit:cover; }
.dash-me .me-avatar__upload { position:absolute; bottom:-2px; right:-2px; width:32px; height:32px; background:#FFFFFF; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; transition:border-color .15s; }
.dash-me .me-avatar__upload:hover { border-color:var(--ink); }
.dash-me .me-identity { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.dash-me .me-name-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dash-me h1.me-name { font-weight:800 !important; font-size:36px !important; line-height:42px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-me .me-role-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:var(--ink); border-radius:999px; }
.dash-me .me-role-pill .me-dot { width:6px; height:6px; }
.dash-me .me-role-pill__text { font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand); }
.dash-me .me-jobline { font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-me .me-hero__mission { font-size:16px !important; line-height:26px !important; color:var(--text-soft); max-width:600px; }
.dash-me a.me-mission-empty { display:flex; flex-direction:column; gap:8px; padding:18px 20px; background:var(--cream); border:1px dashed var(--dashed); border-radius:14px; text-decoration:none !important; max-width:600px; }
.dash-me a.me-mission-empty:hover { background:#EFE9D9; text-decoration:none !important; }
.dash-me .me-mission-empty__copy { font-size:15px !important; line-height:23px !important; color:var(--text-soft); }
.dash-me .me-mission-empty__cta { font-size:13px !important; font-weight:600 !important; color:var(--ink); padding-top:2px; }
.dash-me .me-contact-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.dash-me .me-contact-item { display:inline-flex; align-items:center; gap:6px; font-size:13px !important; line-height:18px; color:var(--text-muted); }
.dash-me .me-contact-divider { width:1px; height:14px; background:var(--border); flex-shrink:0; }

/* HERO — dark "at a glance" panel ------------------------- */
.dash-me .me-panel { flex:1; display:flex; flex-direction:column; padding:40px 36px; gap:18px; background:var(--ink); min-width:0; }
.dash-me .me-panel__head { display:flex; align-items:center; gap:10px; }
.dash-me .me-panel__list { display:flex; flex-direction:column; gap:14px; }
.dash-me .me-panel__row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.dash-me .me-panel__row--hero { padding-bottom:14px; border-bottom:1px solid var(--soft-ink); }
.dash-me .me-panel__val { font-weight:700 !important; font-size:20px !important; line-height:24px; color:#FFFFFF; }
.dash-me .me-panel__val.is-zero { color:var(--text-muted); }
.dash-me .me-panel__big { display:flex; align-items:baseline; gap:4px; }
.dash-me .me-panel__big-num { font-weight:800 !important; font-size:32px !important; line-height:36px; letter-spacing:-0.02em; color:var(--brand); }
.dash-me .me-panel__big-unit { font-weight:400; font-size:13px; color:var(--text-disabled); }
.dash-me .me-panel__muted { font-weight:400; font-size:13px; color:var(--text-muted); }

/* ABOUT --------------------------------------------------- */
.dash-me .me-about { display:flex; flex-direction:column; gap:28px; background:#FFFFFF; border:1px solid var(--border); border-radius:20px; padding:36px 44px; }
.dash-me .me-about__head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dash-me .me-about__heading { display:flex; flex-direction:column; gap:10px; flex:1; min-width:0; }
.dash-me h2.me-about__title { font-weight:800 !important; font-size:32px !important; line-height:38px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-me .me-about__body { display:flex; flex-direction:column; gap:14px; }
.dash-me .me-about__body p { font-size:17px !important; line-height:30px !important; color:var(--soft-ink); }
.dash-me .me-tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.dash-me .me-tile { padding:22px 24px; background:var(--cream); border:1px solid var(--cream-2); border-radius:14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.dash-me .me-tile__val { font-weight:700 !important; font-size:18px !important; line-height:24px; color:var(--ink); word-break:break-word; }
.dash-me .me-tile__val--empty { color:var(--text-disabled); }

/* asymmetric row + card shells ---------------------------- */
.dash-me .me-row { display:flex; gap:24px; align-items:stretch; }
.dash-me .me-row__main { flex:1.7; min-width:0; display:flex; flex-direction:column; }
.dash-me .me-row__side { flex:1; min-width:0; display:flex; flex-direction:column; }
.dash-me .me-card { background:#FFFFFF; border:1px solid var(--border); border-radius:18px; padding:28px 32px; display:flex; flex-direction:column; gap:18px; flex:1; }
.dash-me .me-card__head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.dash-me .me-card__heading { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dash-me h3.me-card__title { font-weight:800 !important; font-size:24px !important; line-height:30px !important; letter-spacing:-0.01em !important; color:var(--ink); }

/* CAREER HIGHLIGHTS --------------------------------------- */
.dash-me .me-hl-list { list-style:none; padding:0 !important; margin:0 !important; display:flex; flex-direction:column; gap:12px; }
.dash-me .me-hl { display:flex; align-items:center; gap:16px; padding:18px 20px; background:var(--bg); border:1px solid var(--border); border-radius:12px; }
.dash-me .me-hl__num { flex-shrink:0; width:44px; height:44px; background:var(--ink); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:var(--brand); }
.dash-me .me-hl__text { flex:1; min-width:0; font-weight:700 !important; font-size:16px !important; line-height:22px; color:var(--ink); }

/* SKILLS -------------------------------------------------- */
.dash-me .me-skills { display:flex; flex-wrap:wrap; gap:10px; }
.dash-me .me-skill { display:inline-flex; align-items:center; padding:10px 18px; background:var(--cream); border:1px solid var(--cream-2); border-radius:999px; font-weight:500 !important; font-size:14px !important; color:var(--ink); }
.dash-me .me-skill--active { background:var(--ink); color:var(--brand) !important; border-color:var(--ink); }
.dash-me a.me-skill--add { background:transparent; border:1.5px dashed var(--dashed); color:var(--ink) !important; text-decoration:none !important; }
.dash-me a.me-skill--add:hover { border-color:var(--ink); color:var(--ink) !important; text-decoration:none !important; }
.dash-me .me-skill--ghost { background:transparent; border:1.5px dashed var(--border); color:#D1D5DB; }
.dash-me .me-hint { font-size:13px !important; line-height:19px; color:var(--text-disabled); }

/* DARK SIDE CARD — the setup checklist. Rendered ONLY while the
   profile is incomplete; at 6/6 the whole .me-row__side is omitted and
   .me-row__main (flex:1.7, lone child) fills the row on its own. ---- */
.dash-me .me-side-card { background:var(--ink); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:16px; flex:1; }
.dash-me h3.me-side-card__title { font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em !important; color:#FFFFFF; }
.dash-me .me-ring-row { display:flex; align-items:center; gap:14px; }
.dash-me .me-ring { position:relative; width:64px; height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.dash-me .me-ring__num { position:absolute; font-weight:800 !important; font-size:15px !important; color:#FFFFFF; }
.dash-me .me-ring-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dash-me .me-ring-copy__note { font-size:14px !important; line-height:20px; color:#FFFFFF; }

/* setup checklist steps ----------------------------------- */
.dash-me .me-steps { list-style:none; padding:0 !important; margin:0 !important; display:flex; flex-direction:column; gap:6px; }
.dash-me .me-step { display:flex; align-items:center; gap:12px; padding:11px 14px; background:transparent; border:1px solid var(--soft-ink); border-radius:10px; }
.dash-me .me-step--done { background:#141414; }
.dash-me .me-step--next { border-color:var(--brand); }
.dash-me .me-step__check { width:20px; height:20px; flex-shrink:0; border:1.5px solid #374151; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dash-me .me-step--done .me-step__check { background:var(--brand); border-color:var(--brand); }
.dash-me .me-step--next .me-step__check { border-color:var(--brand); }
.dash-me .me-step__label { flex:1; min-width:0; font-size:14px !important; line-height:18px; color:#FFFFFF; text-decoration:none !important; }
.dash-me .me-step--done .me-step__label { color:var(--text-disabled); }
.dash-me .me-step--next .me-step__label { font-weight:600 !important; }
.dash-me a.me-step__label:hover { color:#FFFFFF; text-decoration:underline !important; }
.dash-me .me-step__next { font-weight:500; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--brand); flex-shrink:0; text-decoration:none !important; }

/* ── "Finish your profile" goes LIGHT (2026-08-03) ─────────────────────────
   This card and the "At a glance" hero panel were BOTH background:var(--ink),
   so every profile carried two heavy black blocks stacked down the page. One
   intense moment reads stronger than two, so the hero panel keeps the ink and
   this card becomes a white card like the rest of the column.

   Applies to ALL THREE profiles on this shared layer — employer
   (employerProfilePage-test), employee (profileNewTest) and industry expert
   (industry-expert-profile-new) — deliberately, so they stay identical.

   Overrides only; the base rules above still describe the dark original, and
   the markup is untouched — including the ring SVG, whose stroke is a
   PRESENTATION ATTRIBUTE and so loses to any CSS rule. That is what lets the
   ring be re-themed here rather than in three separate views. */
.dash-me .me-side-card { background:#FFFFFF; border:1px solid var(--border); }
.dash-me h3.me-side-card__title { color:var(--ink); }
/* lime text on white is ~1.27:1 — banned by design.md §11.5. The eyebrow goes
   muted; the lime survives as the ring fill and the done-check, which are
   fills, not text. */
.dash-me .me-side-card .me-mono--lime { color:var(--text-muted) !important; }
/* --dim is #9CA3AF, ~2.5:1 on white — too faint for an 11px mono label once
   the card stopped being dark. */
.dash-me .me-side-card .me-mono--dim { color:var(--text-muted); }
.dash-me .me-ring__num { color:var(--ink); }
.dash-me .me-ring-copy__note { color:var(--text-soft); }
.dash-me .me-ring svg circle { stroke:var(--border); }              /* track */
.dash-me .me-ring svg circle + circle { stroke:var(--ink); }        /* progress */
.dash-me .me-step { border-color:var(--border); }
.dash-me .me-step--done { background:var(--cream); }
.dash-me .me-step--next { border-color:var(--ink); }
.dash-me .me-step__check { border-color:var(--border); color:var(--ink); }
.dash-me .me-step--done .me-step__check { background:var(--brand); border-color:var(--brand); color:var(--ink); }
.dash-me .me-step--next .me-step__check { border-color:var(--ink); }
.dash-me .me-step__label { color:var(--ink); }
.dash-me .me-step--done .me-step__label { color:var(--text-muted); }
.dash-me a.me-step__label:hover { color:var(--ink); }
.dash-me .me-step__next { color:var(--ink); }

/* REVIEWS TABLE (canonical jb dialect) --------------------
   NOTE: the markup must NOT carry class="table" — style.css's
   .version_2_update_table .table adds a box-shadow on the employee
   views (design.md 11.6). Defensive resets below in case it does. */
.dash-me .me-table-wrap { width:100%; overflow-x:auto; }
.dash-me .me-table { width:100% !important; border-collapse:collapse !important; margin:0 !important; background:transparent !important; box-shadow:none !important; }
.dash-me .me-table th { font-weight:500 !important; font-size:10px !important; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); text-align:left !important; padding:0 16px 14px 0 !important; border:none !important; border-bottom:1px solid var(--border) !important; background:transparent !important; }
.dash-me .me-table td { padding:16px 16px 16px 0 !important; border:none !important; border-bottom:1px solid var(--border) !important; vertical-align:middle !important; background:transparent !important; }
.dash-me .me-table tbody tr:last-child td { border-bottom:none !important; }
.dash-me .me-cell-who { display:flex; align-items:center; gap:12px; }
.dash-me .me-avatar-sm { width:36px; height:36px; flex-shrink:0; background:var(--cream); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; color:var(--ink); text-transform:uppercase; }
.dash-me .me-cell-strong { font-weight:600 !important; font-size:14px !important; line-height:18px; color:var(--ink); }
.dash-me .me-cell-sub { font-size:12px !important; line-height:16px; color:var(--text-muted); }
.dash-me .me-th-action, .dash-me .me-cell-action { text-align:right !important; padding-right:0 !important; }

/* EMPTY STATES (shared) ----------------------------------- */
.dash-me .me-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 24px; background:var(--cream); border:1.5px dashed var(--dashed); border-radius:14px; text-align:center; text-decoration:none !important; }
.dash-me a.me-empty:hover { background:#EFE9D9; text-decoration:none !important; }
.dash-me .me-empty--tall { flex:1; justify-content:center; }
.dash-me .me-empty__icon { width:44px; height:44px; flex-shrink:0; background:#FFFFFF; border:1px solid var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.dash-me .me-empty__title { font-weight:700 !important; font-size:15px !important; line-height:20px; color:var(--ink); text-align:center !important; }
.dash-me .me-empty__body { font-size:13px !important; line-height:19px; color:var(--text-muted); max-width:400px; text-align:center !important; }
.dash-me .me-empty__cta { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:9px 16px; background:var(--ink); border-radius:10px; font-weight:500 !important; font-size:13px !important; color:var(--brand) !important; text-decoration:none !important; }
.dash-me .me-empty__cta:hover { background:#1A1A1A; color:var(--brand) !important; text-decoration:none !important; }

/* responsive ---------------------------------------------- */
@media (max-width:1100px){
  .dash-me .me-hero { flex-direction:column; }
  .dash-me .me-row { flex-direction:column; }
  .dash-me .me-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:720px){
  .dash-me { padding:32px 24px 56px; gap:24px; }
  .dash-me .me-hero__id { padding:28px; gap:18px; }
  .dash-me .me-hero__top { flex-direction:column; gap:18px; }
  .dash-me h1.me-name { font-size:28px !important; line-height:34px !important; }
  .dash-me .me-panel { padding:28px; }
  .dash-me .me-about { padding:24px; }
  .dash-me h2.me-about__title { font-size:24px !important; line-height:30px !important; }
  .dash-me .me-tiles { grid-template-columns:1fr; }
  .dash-me .me-card { padding:24px; }
  .dash-me .me-hl { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ============================================================
   Business Head My Profile v2
   View: employerProfilePage-test.ejs

   This layer is intentionally isolated from the shared .dash-me treatment
   used by employee and expert profiles. It implements the approved Paper
   hierarchy without changing those other profile surfaces.
   ============================================================ */
.dash-me.dash-me--leadership {
  gap:24px;
  padding:48px 64px 80px;
  background:#FAFAF7;
}
.dash-me--leadership .me2-mono,
.dash-me--leadership .me2-chip,
.dash-me--leadership .me2-role,
.dash-me--leadership .me2-job,
.dash-me--leadership .me2-count,
.dash-me--leadership .me2-review-head,
.dash-me--leadership .me2-review-date {
  font-family:"Roboto Mono",monospace !important;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.dash-me--leadership .me2-mono {
  font-size:10px;
  line-height:13px;
  font-weight:700;
  color:#6B7280;
}
.dash-me--leadership .me2-page-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding:0 2px 6px;
}
.dash-me--leadership .me2-page-head__copy {
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
}
.dash-me--leadership .me2-page-head__crumb {
  display:flex;
  align-items:center;
  gap:10px;
}
.dash-me--leadership .me2-chip {
  padding:7px 11px;
  border-radius:4px;
  background:#0A0A0A;
  color:#C5F154;
  font-size:10px;
  line-height:12px;
  font-weight:700;
}
.dash-me--leadership .me2-page-head h1 {
  color:#0A0A0A;
  font-size:40px !important;
  line-height:46px !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
}
.dash-me--leadership .me2-page-head p {
  color:#6B7280;
  font-size:15px !important;
  line-height:23px !important;
}
.dash-me--leadership .me2-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 18px;
  border-radius:10px;
  font-size:14px !important;
  line-height:18px;
  font-weight:700 !important;
  text-decoration:none !important;
  flex-shrink:0;
}
.dash-me--leadership .me2-btn--primary {
  background:#0A0A0A;
  color:#C5F154 !important;
}
.dash-me--leadership .me2-btn--primary:hover {
  background:#1A1A1A;
  color:#C5F154 !important;
  text-decoration:none !important;
}

/* identity + performance */
.dash-me--leadership .me2-hero {
  display:flex;
  min-height:340px;
  overflow:hidden;
  border:1px solid #E5E7EB;
  border-radius:18px;
  background:#FFFFFF;
}
.dash-me--leadership .me2-identity {
  width:68%;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  padding:38px 42px;
}
.dash-me--leadership .me2-identity__head {
  display:flex;
  align-items:center;
  gap:24px;
  min-width:0;
}
.dash-me--leadership .me2-avatar {
  position:relative;
  width:104px;
  height:104px;
  flex:0 0 104px;
}
.dash-me--leadership .me2-avatar__disc {
  width:104px;
  height:104px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#E5E7EB;
  color:#4B5563;
}
.dash-me--leadership .me2-avatar__disc img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.dash-me--leadership .me2-avatar__disc > span {
  font-size:36px !important;
  line-height:40px;
  font-weight:700 !important;
}
.dash-me--leadership .me2-avatar__edit {
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #E5E7EB;
  border-radius:50%;
  background:#FFFFFF;
  color:#0A0A0A !important;
}
.dash-me--leadership .me2-avatar__edit:hover { border-color:#0A0A0A; }
.dash-me--leadership .me2-identity__copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.dash-me--leadership .me2-name-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.dash-me--leadership .me2-name-row h2 {
  color:#0A0A0A;
  font-size:38px !important;
  line-height:42px !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
}
.dash-me--leadership .me2-role {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:4px;
  background:#0A0A0A;
  color:#C5F154;
  font-size:10px;
  line-height:12px;
  font-weight:700;
}
.dash-me--leadership .me2-role > span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#C5F154;
  flex-shrink:0;
}
.dash-me--leadership .me2-job {
  color:#6B7280;
  font-size:12px;
  line-height:16px;
  font-weight:600;
}
.dash-me--leadership a.me2-job--empty {
  color:#4B5563 !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}
.dash-me--leadership .me2-statement {
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:24px 0;
  border-top:1px solid #E5E7EB;
  border-bottom:1px solid #E5E7EB;
}
.dash-me--leadership .me2-statement > .me2-mono { color:#9CA3AF; }
.dash-me--leadership .me2-statement p {
  max-width:760px;
  color:#1F2937;
  font-size:21px !important;
  line-height:31px !important;
  font-weight:500 !important;
  letter-spacing:-.01em !important;
}
.dash-me--leadership .me2-statement a {
  width:max-content;
  color:#0A0A0A !important;
  font-size:13px !important;
  line-height:18px;
  font-weight:700 !important;
  text-decoration:none !important;
}
.dash-me--leadership .me2-statement--empty {
  padding:20px;
  border:1px dashed #D8CFB8;
  border-radius:14px;
  background:#F5F1E8;
}
.dash-me--leadership .me2-statement--empty p {
  font-size:16px !important;
  line-height:24px !important;
}
.dash-me--leadership .me2-contact {
  min-width:0;
  display:flex;
  align-items:center;
  gap:24px;
  color:#4B5563;
}
.dash-me--leadership .me2-contact > span {
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px !important;
  line-height:18px;
}
.dash-me--leadership .me2-contact > span > span { overflow-wrap:anywhere; }
.dash-me--leadership .me2-contact svg { color:#9CA3AF; flex-shrink:0; }
.dash-me--leadership .me2-contact i {
  width:1px;
  height:20px;
  background:#E5E7EB;
  flex-shrink:0;
}
.dash-me--leadership .me2-pulse {
  width:32%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:26px;
  padding:38px 36px;
  background:#0A0A0A;
  color:#FFFFFF;
}
.dash-me--leadership .me2-pulse__head {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dash-me--leadership .me2-pulse__head > div {
  display:flex;
  align-items:center;
  gap:9px;
}
.dash-me--leadership .me2-pulse__head > div > span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#C5F154;
}
.dash-me--leadership .me2-pulse__head strong {
  color:#C5F154;
  font-family:"Roboto Mono",monospace !important;
  font-size:11px !important;
  line-height:14px;
  font-weight:700 !important;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.dash-me--leadership .me2-pulse__head p {
  color:#9CA3AF;
  font-size:13px !important;
  line-height:19px !important;
}
.dash-me--leadership .me2-rating {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:20px 0;
  border-top:1px solid #252525;
  border-bottom:1px solid #252525;
}
.dash-me--leadership .me2-rating > div:first-child {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dash-me--leadership .me2-rating .me2-mono { color:#9CA3AF; }
.dash-me--leadership .me2-rating small {
  color:#6B7280;
  font-size:12px !important;
  line-height:16px;
}
.dash-me--leadership .me2-rating__value {
  display:flex;
  align-items:baseline;
  gap:4px;
  flex-shrink:0;
}
.dash-me--leadership .me2-rating__value strong {
  color:#C5F154;
  font-size:48px !important;
  line-height:48px;
  font-weight:800 !important;
  letter-spacing:-.04em !important;
}
.dash-me--leadership .me2-rating__value span,
.dash-me--leadership .me2-rating__empty {
  color:#9CA3AF;
  font-family:"Roboto Mono",monospace !important;
  font-size:14px !important;
  line-height:18px;
  font-weight:600 !important;
}
.dash-me--leadership .me2-pulse__facts {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.dash-me--leadership .me2-pulse__facts > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.dash-me--leadership .me2-pulse__facts .me2-mono { color:#9CA3AF; }
.dash-me--leadership .me2-pulse__facts strong {
  color:#FFFFFF;
  font-size:13px !important;
  line-height:18px;
  font-weight:700 !important;
  text-align:right !important;
}
.dash-me--leadership .me2-trend.is-positive { color:#C5F154 !important; }
.dash-me--leadership .me2-trend.is-negative { color:#FCA5A5 !important; }
.dash-me--leadership .me2-trend.is-steady { color:#FFFFFF !important; }
.dash-me--leadership .me2-status {
  padding:6px 9px;
  border-radius:4px;
  background:#202020;
  font-family:"Roboto Mono",monospace !important;
  font-size:10px !important;
  line-height:12px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dash-me--leadership .me2-pulse__next {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;
  border:1px solid #303030;
  border-radius:10px;
  color:#FFFFFF !important;
  text-decoration:none !important;
}
.dash-me--leadership .me2-pulse__next > span:first-child {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dash-me--leadership .me2-pulse__next .me2-mono { color:#9CA3AF; }
.dash-me--leadership .me2-pulse__next strong {
  color:#FFFFFF;
  font-size:13px !important;
  line-height:18px;
  font-weight:700 !important;
}
.dash-me--leadership .me2-pulse__next > span:last-child { color:#C5F154; }

/* leadership story + context */
.dash-me--leadership .me2-about {
  display:flex;
  overflow:hidden;
  border:1px solid #E5E7EB;
  border-radius:18px;
  background:#FFFFFF;
}
.dash-me--leadership .me2-about__story {
  width:68%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:36px 42px;
}
.dash-me--leadership .me2-section-label {
  display:flex;
  align-items:center;
  gap:8px;
}
.dash-me--leadership .me2-section-label > span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#C5F154;
}
.dash-me--leadership .me2-section-label strong {
  color:#6B7280;
  font-family:"Roboto Mono",monospace !important;
  font-size:10px !important;
  line-height:13px;
  font-weight:700 !important;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.dash-me--leadership .me2-about__story > h2,
.dash-me--leadership .me2-highlights h2,
.dash-me--leadership .me2-expertise h2,
.dash-me--leadership .me2-reviews h2 {
  font-size:30px !important;
  line-height:35px !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
}
.dash-me--leadership .me2-about__body {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dash-me--leadership .me2-about__body p {
  max-width:760px;
  color:#374151;
  font-size:16px !important;
  line-height:26px !important;
}
.dash-me--leadership .me2-context {
  width:32%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:34px 36px;
  background:#F5F1E8;
}
.dash-me--leadership .me2-context__head {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.dash-me--leadership .me2-context__head p {
  color:#1F2937;
  font-size:15px !important;
  line-height:21px !important;
  font-weight:600 !important;
}
.dash-me--leadership .me2-context dl { margin:0; padding:0; border-top:1px solid #DED8CC; }
.dash-me--leadership .me2-context dl > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid #DED8CC;
}
.dash-me--leadership .me2-context dl > div:last-child { border-bottom:0; }
.dash-me--leadership .me2-context dt {
  margin:0;
  color:#9A9387;
  font-family:"Roboto Mono",monospace !important;
  font-size:10px !important;
  line-height:13px;
  font-weight:700 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.dash-me--leadership .me2-context dd {
  margin:0;
  color:#0A0A0A;
  font-size:13px !important;
  line-height:18px;
  font-weight:600 !important;
  text-align:right !important;
}

/* outcome-led highlights and expertise */
.dash-me--leadership .me2-feature-row { display:flex; align-items:stretch; gap:24px; }
.dash-me--leadership .me2-highlights {
  width:68%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:36px 42px;
  border-radius:18px;
  background:#0A0A0A;
  color:#FFFFFF;
}
.dash-me--leadership .me2-highlights > header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.dash-me--leadership .me2-highlights > header > div {
  display:flex;
  flex-direction:column;
  gap:9px;
}
.dash-me--leadership .me2-highlights .me2-mono { color:#C5F154; }
.dash-me--leadership .me2-highlights > header > .me2-mono { color:#6B7280; }
.dash-me--leadership .me2-highlights h2 { color:#FFFFFF; }
.dash-me--leadership .me2-highlights ol {
  list-style:none;
  display:flex;
  flex-direction:column;
  margin:0 !important;
  padding:0 !important;
}
.dash-me--leadership .me2-highlights li {
  display:flex;
  gap:22px;
  padding:20px 0;
  border-top:1px solid #252525;
}
.dash-me--leadership .me2-highlights li > span {
  width:34px;
  flex-shrink:0;
  color:#C5F154;
  font-family:"Roboto Mono",monospace !important;
  font-size:11px !important;
  line-height:16px;
  font-weight:700 !important;
}
.dash-me--leadership .me2-highlights li > div {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.dash-me--leadership .me2-highlights li strong {
  color:#FFFFFF;
  font-size:18px !important;
  line-height:23px;
  font-weight:700 !important;
}
.dash-me--leadership .me2-highlights li p {
  color:#9CA3AF;
  font-size:13px !important;
  line-height:20px !important;
}
.dash-me--leadership .me2-expertise {
  width:32%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:36px;
  border:1px solid #E5E7EB;
  border-radius:18px;
  background:#FFFFFF;
}
.dash-me--leadership .me2-expertise > header {
  display:flex;
  flex-direction:column;
  gap:9px;
}
.dash-me--leadership .me2-expertise h2 { font-size:27px !important; line-height:32px !important; }
.dash-me--leadership .me2-expertise header p {
  color:#6B7280;
  font-size:13px !important;
  line-height:20px !important;
}
.dash-me--leadership .me2-skills { display:flex; flex-wrap:wrap; gap:9px; }
.dash-me--leadership .me2-skills > span {
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid #DED8CC;
  border-radius:999px;
  background:#F5F1E8;
  color:#374151;
  font-size:12px !important;
  line-height:16px;
  font-weight:500 !important;
}

/* honest empty states */
.dash-me--leadership .me2-empty,
.dash-me--leadership .me2-reviews__empty {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:24px;
  border:1px dashed #D8CFB8;
  border-radius:14px;
  background:#F5F1E8;
  color:#0A0A0A !important;
  text-decoration:none !important;
}
.dash-me--leadership .me2-empty__icon {
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #E5E7EB;
  border-radius:12px;
  background:#FFFFFF;
  color:#0A0A0A;
}
.dash-me--leadership .me2-empty strong,
.dash-me--leadership .me2-reviews__empty strong {
  color:#0A0A0A;
  font-size:15px !important;
  line-height:20px;
  font-weight:700 !important;
}
.dash-me--leadership .me2-empty > span:not(.me2-empty__icon),
.dash-me--leadership .me2-reviews__empty > span:not(.me2-empty__icon) {
  color:#6B7280;
  font-size:13px !important;
  line-height:19px;
}
.dash-me--leadership .me2-empty b {
  color:#0A0A0A;
  font-size:13px !important;
  line-height:18px;
  font-weight:700 !important;
}
.dash-me--leadership .me2-empty--dark { background:#F5F1E8; }
.dash-me--leadership .me2-empty--compact { padding:20px; }

/* performance evidence */
.dash-me--leadership .me2-reviews {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #E5E7EB;
  border-radius:18px;
  background:#FFFFFF;
}
.dash-me--leadership .me2-reviews > header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:32px 36px 24px;
}
.dash-me--leadership .me2-reviews > header > div {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dash-me--leadership .me2-reviews > header p {
  color:#6B7280;
  font-size:13px !important;
  line-height:20px !important;
}
.dash-me--leadership .me2-count {
  padding:7px 10px;
  border-radius:4px;
  background:#F5F1E8;
  color:#6B7280;
  font-size:10px !important;
  line-height:13px;
  font-weight:700 !important;
  white-space:nowrap;
}
.dash-me--leadership .me2-review-list { border-top:1px solid #E5E7EB; }
.dash-me--leadership .me2-review-head,
.dash-me--leadership .me2-review-row {
  display:grid;
  grid-template-columns:130px minmax(220px,1fr) 220px 90px 96px;
  align-items:center;
  column-gap:0;
  padding:0 28px;
}
.dash-me--leadership .me2-review-head {
  min-height:38px;
  border-bottom:1px solid #E5E7EB;
  background:#F9FAFB;
  color:#9CA3AF;
  font-size:9px !important;
  line-height:12px;
  font-weight:700 !important;
}
.dash-me--leadership .me2-review-head > span:last-child { text-align:right !important; }
.dash-me--leadership .me2-review-row {
  min-height:68px;
  border-bottom:1px solid #E5E7EB;
}
.dash-me--leadership .me2-review-row:last-child { border-bottom:0; }
.dash-me--leadership .me2-review-date {
  color:#6B7280;
  font-size:11px !important;
  line-height:16px;
  font-weight:500 !important;
  letter-spacing:0;
  text-transform:none;
}
.dash-me--leadership .me2-review-name {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding-right:20px;
}
.dash-me--leadership .me2-review-name strong {
  color:#0A0A0A;
  font-size:14px !important;
  line-height:18px;
  font-weight:700 !important;
}
.dash-me--leadership .me2-review-name small {
  color:#9CA3AF;
  font-size:12px !important;
  line-height:16px;
}
.dash-me--leadership .me2-reviewer {
  color:#374151;
  font-size:13px !important;
  line-height:18px;
  font-weight:500 !important;
  padding-right:18px;
}
.dash-me--leadership .me2-review-score {
  color:#0A0A0A;
  font-size:16px !important;
  line-height:20px;
  font-weight:800 !important;
}
.dash-me--leadership .me2-review-action { text-align:right !important; }
.dash-me--leadership .me2-review-action a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border:1px solid #D1D5DB;
  border-radius:8px;
  color:#0A0A0A !important;
  font-size:12px !important;
  line-height:16px;
  font-weight:700 !important;
  text-decoration:none !important;
}
.dash-me--leadership .me2-review-action a:hover { border-color:#0A0A0A; }
.dash-me--leadership .me2-reviews__empty {
  margin:0 28px 28px;
  align-items:center;
  text-align:center;
}
.dash-me--leadership .me2-reviews__empty strong,
.dash-me--leadership .me2-reviews__empty > span { text-align:center !important; }

@media (max-width:1180px) {
  .dash-me.dash-me--leadership { padding-right:40px; padding-left:40px; }
  .dash-me--leadership .me2-review-head,
  .dash-me--leadership .me2-review-row { grid-template-columns:112px minmax(190px,1fr) 180px 70px 76px; }
}
@media (max-width:1024px) {
  .dash-me--leadership .me2-hero,
  .dash-me--leadership .me2-about { flex-direction:column; }
  .dash-me--leadership .me2-identity,
  .dash-me--leadership .me2-pulse,
  .dash-me--leadership .me2-about__story,
  .dash-me--leadership .me2-context { width:100%; }
  .dash-me--leadership .me2-feature-row { flex-direction:column; }
  .dash-me--leadership .me2-highlights,
  .dash-me--leadership .me2-expertise { width:100%; }
}
@media (max-width:800px) {
  .dash-me--leadership .me2-review-head { display:none; }
  .dash-me--leadership .me2-review-list { padding:0 24px; }
  .dash-me--leadership .me2-review-row {
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 18px;
    padding:18px 0;
  }
  .dash-me--leadership .me2-review-date { grid-column:1; grid-row:1; }
  .dash-me--leadership .me2-review-score { grid-column:2; grid-row:1; text-align:right !important; }
  .dash-me--leadership .me2-review-name { grid-column:1 / -1; grid-row:2; padding:0; }
  .dash-me--leadership .me2-reviewer { grid-column:1; grid-row:3; padding:0; }
  .dash-me--leadership .me2-review-action { grid-column:2; grid-row:3; }
}
@media (max-width:720px) {
  .dash-me.dash-me--leadership { padding:32px 24px 56px; gap:20px; }
  .dash-me--leadership .me2-page-head { align-items:flex-start; flex-direction:column; }
  .dash-me--leadership .me2-page-head h1 { font-size:34px !important; line-height:39px !important; }
  .dash-me--leadership .me2-identity { padding:28px 24px; gap:20px; }
  .dash-me--leadership .me2-identity__head { align-items:flex-start; flex-direction:column; gap:18px; }
  .dash-me--leadership .me2-name-row h2 { font-size:30px !important; line-height:35px !important; }
  .dash-me--leadership .me2-statement p { font-size:18px !important; line-height:27px !important; }
  .dash-me--leadership .me2-contact { align-items:flex-start; flex-direction:column; gap:12px; }
  .dash-me--leadership .me2-contact i { display:none; }
  .dash-me--leadership .me2-pulse { padding:28px 24px; }
  .dash-me--leadership .me2-about__story,
  .dash-me--leadership .me2-context,
  .dash-me--leadership .me2-highlights,
  .dash-me--leadership .me2-expertise { padding:28px 24px; }
  .dash-me--leadership .me2-highlights > header { align-items:flex-start; flex-direction:column; }
  .dash-me--leadership .me2-highlights li { gap:14px; }
  .dash-me--leadership .me2-reviews > header { align-items:flex-start; flex-direction:column; padding:28px 24px 20px; }
  .dash-me--leadership .me2-reviews__empty { margin:0 20px 20px; }
}


/* ============================================================
   .dash-form__upload — Logo upload row used in
   businessHead-addCompanyDetailsTest.ejs (Edit Company Profile).
   Lives inside .dash-form so brand/border tokens inherit.
   ============================================================ */

.dash-form .dash-form__upload {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}
.dash-form .dash-form__upload:focus-within { border-color: var(--ink); }

.dash-form .dash-form__upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: #F5F1E8;
  border: 1px dashed #D8CFB8;
  border-radius: 10px;
  overflow: hidden;
}
.dash-form .dash-form__upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dash-form .dash-form__upload-preview span {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: #9A9485;
  text-transform: uppercase !important;
}

.dash-form .dash-form__upload-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.dash-form .dash-form__upload-name {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-form .dash-form__upload-hint {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--text-muted) !important;
}

.dash-form .dash-form__upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  background: #FFFFFF;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  margin: 0;
}
.dash-form .dash-form__upload-btn:hover {
  background: var(--ink);
  color: var(--brand) !important;
}

.dash-form .dash-form__upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .dash-form .dash-form__upload {
    flex-wrap: wrap;
  }
  .dash-form .dash-form__upload-meta {
    flex-basis: calc(100% - 72px);
  }
  .dash-form .dash-form__upload-btn {
    width: 100%;
    margin-top: 4px;
  }
}


/* ============================================================
   .dash-goals — Goals Dashboard (businessHead-view-company-goalsTest)
   Page layout, KPI tiles, chart cards, goals list, mgmt table,
   empty-state. Scoped via .dash-goals to avoid colliding with the
   legacy styles in style-test / style.scss.
   ============================================================ */

.dash-goals {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --border-soft: #F0EBDC;

  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-goals,
.dash-goals *,
.dash-goals *::before,
.dash-goals *::after { box-sizing: border-box; }
.dash-goals * {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Defensive resets for legacy h1-h6/p inside .inner_pages */
.dash-goals h1, .dash-goals h2, .dash-goals h3,
.dash-goals h4, .dash-goals h5, .dash-goals h6,
.dash-goals p, .dash-goals ul, .dash-goals li {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  list-style: none !important;
}

/* Top-level children stretch evenly; defeat legacy section margins
   from style-test.scss that make .dash-goals__card narrower than
   the KPI grid above it. */
.dash-goals > * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* Page header --------------------------------------------------- */
.dash-goals__head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.dash-goals__head-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 680px;
}
.dash-goals__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-goals__chip {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 4px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-goals__chip-meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-goals h1.dash-goals__title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 46px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
.dash-goals p.dash-goals__deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--text-soft);
  max-width: 640px;
}

/* CTAs (header + empty-state) ---------------------------------- */
.dash-goals__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  background: var(--ink);
  color: var(--brand);
  border-radius: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  flex-shrink: 0;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.dash-goals__cta:hover { filter: brightness(1.12); color: var(--brand); text-decoration: none; }
.dash-goals__cta:active { transform: translateY(1px); }
.dash-goals__cta--md { height: 44px; padding: 0 18px; }
.dash-goals__cta-plus { font-size: 18px; line-height: 1; font-weight: 600; }

/* KPI row ------------------------------------------------------- */
.dash-goals__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.dash-kpi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-kpi__label {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-kpi__meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
}
.dash-kpi__numbers {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dash-kpi__value {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 44px !important;
  line-height: 44px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
.dash-kpi__delta {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.dash-kpi__delta--up { background: var(--brand); color: var(--ink); }
.dash-kpi__delta--down { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.dash-kpi__delta--blank { background: var(--cream); color: var(--text-disabled); border-radius: 999px; }

/* Shared card chrome ------------------------------------------- */
.dash-goals__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-goals__card-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Only the eyebrow+title block stacks. This selector used to catch EVERY div
   child of the head — including .dash-goals__period-tabs — and at (0,1,1) it
   outranked .dash-goals__period-tabs (0,1,0), forcing flex-direction:column
   and stacking the Weekly/Monthly/Quarterly/Yearly pills vertically.
   QA 2026-07-30. */
.dash-goals__card-head > div:not(.dash-goals__period-tabs) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-goals__card-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-goals h2.dash-goals__card-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  color: var(--ink);
}

/* Charts row --------------------------------------------------- */
.dash-goals__charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

/* Period tabs (line chart) ------------------------------------- */
.dash-goals__period-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.dash-goals a.dash-goals__period,
.dash-goals .dash-goals__period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: transparent;
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--text-muted) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-goals a.dash-goals__period:hover { color: var(--ink) !important; }
/* Selected state hangs off `.active` ONLY. There used to be a
   `.dash-goals__period--active` modifier here too, hardcoded onto Quarterly in
   both goal views — but setupTimeFilters() only ever adds/removes `.active`, so
   the modifier never came off and two pills read as selected at once. Dropped
   from the markup and from this selector list so it cannot regrow. */
.dash-goals a.dash-goals__period.active,
.dash-goals .time-filter-btn.active {
  background: var(--ink);
  color: var(--brand) !important;
  font-weight: 600 !important;
}

/* Chart wrap + donut wrap (Chart.js canvases) ------------------ */
.dash-goals__chart-wrap {
  position: relative;
  width: 100%;
  height: 260px;
}
.dash-goals__chart-wrap canvas { max-width: 100% !important; }
.dash-goals__donut-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
}
.dash-goals__chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

/* Chart stats below line chart --------------------------------- */
.dash-goals__chart-stats {
  display: flex;
  flex-direction: row;
  gap: 24px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.dash-goals__chart-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
}
.dash-goals__chart-stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-goals__chart-stat-dot--ink { background: var(--ink); }
.dash-goals__chart-stat-dot--lime { background: var(--brand); }
.dash-goals__chart-stat-dot--muted { background: var(--text-disabled); }
.dash-goals .dash-goals__chart-stat-value {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--ink) !important;
}
.dash-goals .dash-goals__chart-stat-label {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}

/* Donut legend ------------------------------------------------- */
.dash-goals ul.dash-goals__legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}
.dash-goals__legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--ink);
}
.dash-goals__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* The legend now carries the real per-category count beside each label, so the
   donut and its legend are rendered from one derivation. QA 2026-07-30. */
.dash-goals__legend-count {
  margin-left: auto;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--ink);
}

/* ── OPTION B: the completion chart on a dark card (design.md §11.8) ──────
   Approved 2026-07-30. Lime is the solid series, and lime measures 1.27:1 on
   white — it belongs on a dark surface, where that warning disappears. The
   trade is that ink drops to 1.14:1 here, so the hatch and the value cap flip
   to WHITE (see the JS in both goal views). Only the bar-chart card is dark;
   the category donut deliberately stays on white, where its ink-solid /
   lime-hatch polarity still reads. Surface #0A0A0A, hairline #2A2A29. */
.dash-goals__card--chart {
  background: var(--ink);
  border-color: #2A2A29;
}
.dash-goals__card--chart .dash-goals__card-eyebrow { color: var(--brand); }
.dash-goals .dash-goals__card--chart h2.dash-goals__card-title { color: #FFFFFF; }

/* Period tabs on ink: the track loses its cream fill, and the active pill
   INVERTS — ink-on-ink would vanish, so active is a lime fill with ink text
   (lime as fill, never lime text on light). */
.dash-goals__card--chart .dash-goals__period-tabs {
  background: transparent;
  border-color: #2A2A29;
}
.dash-goals .dash-goals__card--chart a.dash-goals__period,
.dash-goals .dash-goals__card--chart .dash-goals__period {
  color: #9CA3AF !important;
}
.dash-goals .dash-goals__card--chart a.dash-goals__period:hover { color: #FFFFFF !important; }
.dash-goals .dash-goals__card--chart a.dash-goals__period.active,
.dash-goals .dash-goals__card--chart .time-filter-btn.active {
  background: var(--brand);
  color: var(--ink) !important;
}

/* Stats strip under the plot. The three dots ARE the three series, so they
   track the chart: lime solid, white (the hatch), translucent white (planned). */
.dash-goals__card--chart .dash-goals__chart-stats { border-top-color: #2A2A29; }
.dash-goals__card--chart .dash-goals__chart-stat-dot--ink { background: #FFFFFF; }
.dash-goals__card--chart .dash-goals__chart-stat-dot--muted { background: rgba(255, 255, 255, 0.28); }
.dash-goals .dash-goals__card--chart .dash-goals__chart-stat-value { color: #FFFFFF !important; }
.dash-goals .dash-goals__card--chart .dash-goals__chart-stat-label { color: #9CA3AF !important; }
.dash-goals__card--chart .dash-goals__chart-loading { color: #FFFFFF; }

/* ── Goal details modal (shared by both goal screens) ─────────────────────
   Was raw Bootstrap: no scrim, default header/footer rules, legacy .btn-green
   footer buttons, and a .btn-close that renders as an empty square wherever
   BS4 is the loaded bundle. BOTH screens drive these with their own JS and
   never bootstrap.Modal — the dashboard opens with display:block + .show, the
   BH view with display:flex — so this layer must work at either display value
   and must supply its own backdrop. Tokens are redeclared here because the BH
   view's modal sits OUTSIDE its .dash-goals container. QA 2026-07-30. */
.dash-goals__modal {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --border-soft: #F0EBDC;

  position: fixed;
  inset: 0;
  z-index: 1080;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(10, 10, 10, 0.55);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Only bite when the view's JS opens it with display:flex. */
  align-items: flex-start;
  justify-content: center;
}
.dash-goals__modal,
.dash-goals__modal *,
.dash-goals__modal *::before,
.dash-goals__modal *::after { box-sizing: border-box; }

.dash-goals__modal .modal-dialog {
  width: 100%;
  max-width: 680px;
  margin: 56px auto;
  transform: none !important;          /* kill BS's .modal.show translate */
}
.dash-goals__modal .modal-dialog-centered {
  display: block;                      /* BS makes this a flex row; margin auto centres it instead */
  min-height: 0;
}
.dash-goals__modal .modal-content {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.28);
  overflow: hidden;
}

/* Header ------------------------------------------------------- */
.dash-goals__modal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 18px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
}
.dash-goals__modal .modal-header h5 {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}

/* Close button. Both views ship an EMPTY <button>, so the glyph has to be
   drawn here — and BS5's background-image X has to be shot down explicitly. */
.dash-goals__modal .btn-close,
.dash-goals__modal .close-btn {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: var(--cream) !important;
  background-image: none !important;
  border: 0;
  border-radius: 999px;
  opacity: 1 !important;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  transition: background-color 0.15s ease;
}
.dash-goals__modal .btn-close:hover,
.dash-goals__modal .close-btn:hover { background-color: var(--cream-2) !important; }
.dash-goals__modal .btn-close::before,
.dash-goals__modal .btn-close::after,
.dash-goals__modal .close-btn::before,
.dash-goals__modal .close-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--ink);
}
.dash-goals__modal .btn-close::before,
.dash-goals__modal .close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.dash-goals__modal .btn-close::after,
.dash-goals__modal .close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Body --------------------------------------------------------- */
.dash-goals__modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 26px 26px;
}
.dash-goals__modal .modal-body > h5 {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 27px !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
.dash-goals__modal .modal-body > p {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-soft) !important;
}

/* Field grid. The .row/.col-md-6/.form-group scaffolding is the ORIGINAL
   markup — restyled in place rather than replaced, so every id stays where
   the views' JS expects it. */
.dash-goals__modal .modal-body .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.dash-goals__modal .modal-body .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: auto;
  max-width: none;
  flex: none;
  margin: 0 !important;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: 10px;
}
.dash-goals__modal .modal-body .form-group label {
  margin: 0 !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  line-height: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.dash-goals__modal .modal-body .form-group .text {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
  word-break: break-word;
}

/* Milestones (BH view only) ------------------------------------ */
.dash-goals__modal .goal_milestones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.dash-goals__modal .goal_milestones > h6 {
  margin: 0 !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.dash-goals__modal .goal_milestones ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.dash-goals__modal .goal_milestones li { list-style: none; }
.dash-goals__modal .goal_milestones ul > p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-muted) !important;
}
.dash-goals__modal .milestone-card {
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dash-goals__modal .milestone-card h6 {
  margin: 0 0 4px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
}
.dash-goals__modal .milestone-card p {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-soft) !important;
}
.dash-goals__modal .milestone-card p + p { margin-top: 6px !important; color: var(--text-muted) !important; }

/* Footer ------------------------------------------------------- */
.dash-goals__modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px 20px;
  background: #FFFFFF;
  border-top: 1px solid var(--border-soft);
}
/* Height comes from PADDING, not `height` + flex centring. The view's JS shows
   these two links with `el.style.display = 'inline-block'` (and hides them with
   'none'), and an inline style beats our `display:inline-flex` — so the flex
   cross-axis centring silently stopped applying and the label sat at the top of
   the box. Adding !important to `display` would have broken the JS's ability to
   hide them, so the box is sized so that BOTH display modes centre identically:
   11 + 16 + 11 + 2px border = 40px. QA 2026-07-30. */
.dash-goals__modal .modal-footer > a,
.dash-goals__modal .modal-footer > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
}
/* Targeted by id: both carry the legacy off-palette .btn-green. */
.dash-goals__modal #goalRedirectLink {
  background: var(--ink) !important;
  color: var(--brand) !important;
  border: 1px solid var(--ink) !important;
}
.dash-goals__modal #goalRedirectLink:hover { background: #1A1A1A !important; border-color: #1A1A1A !important; }
.dash-goals__modal #goalAssignedToStatus {
  background: #FFFFFF !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
.dash-goals__modal #goalAssignedToStatus:hover { background: var(--cream) !important; }

@media (max-width: 768px) {
  .dash-goals__modal .modal-dialog { max-width: none; margin: 20px 14px; }
  .dash-goals__modal .modal-body .row { grid-template-columns: minmax(0, 1fr); }
}

/* Guide card (empty state primer) ------------------------------ */
.dash-goals__guide {
  display: flex;
  flex-direction: row;
  gap: 0;
  background: var(--ink);
  border-radius: 18px;
  overflow: hidden;
}
.dash-goals__guide-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 36px 40px;
}
.dash-goals__guide-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 380px;
  flex-shrink: 0;
  padding: 36px;
  background: #111111;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-goals__guide-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-goals h2.dash-goals__guide-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  line-height: 34px !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  max-width: 420px;
}
.dash-goals p.dash-goals__guide-deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-disabled) !important;
  max-width: 440px;
}
.dash-goals__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dash-goals__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--text-disabled);
}
.dash-goals__step--active .dash-goals__step-num {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
}
.dash-goals__step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-goals__step-body strong {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #FFFFFF;
}
.dash-goals__step-body span {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--text-disabled);
}

/* Goals list card --------------------------------------------- */
.dash-goals__list-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dash-goals__list-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Search input (goals + mgmt) --------------------------------- */
.dash-goals__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 260px;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-disabled);
  transition: border-color 0.15s ease;
}
.dash-goals__search:focus-within { border-color: var(--ink); color: var(--ink); }
.dash-goals__search svg { flex-shrink: 0; }
.dash-goals__search input {
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-goals__search input::placeholder { color: var(--text-disabled); }

/* Tabs (goals list filter) — defeat legacy .nav-tabs / .nav-item
   styles from Bootstrap + style-test.scss with !important + scoped
   resets. */
.dash-goals ul.dash-goals__tabs,
.dash-goals ul.dash-goals__tabs.nav-tabs {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px !important;
  background: var(--cream) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 12px !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0 !important;
  list-style: none !important;
}
.dash-goals ul.dash-goals__tabs .dash-goals__tab,
.dash-goals ul.dash-goals__tabs li.nav-item,
.dash-goals ul.dash-goals__tabs > li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--text-soft) !important;
  cursor: pointer !important;
  list-style: none !important;
  float: none !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-goals ul.dash-goals__tabs .dash-goals__tab:hover { color: var(--ink) !important; }
.dash-goals ul.dash-goals__tabs .dash-goals__tab.active,
.dash-goals ul.dash-goals__tabs li.nav-item.active {
  background: var(--ink) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}
.dash-goals ul.dash-goals__tabs li::before,
.dash-goals ul.dash-goals__tabs li::after { content: none !important; }

/* Empty state ------------------------------------------------- */
.dash-goals__empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding: 36px 28px;
  background: var(--cream);
  border: 1px dashed #D8CFB8;
  border-radius: 14px;
}
.dash-goals__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-goals__empty-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.dash-goals__empty-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
}
.dash-goals h3.dash-goals__empty-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 28px !important;
  color: var(--ink);
}
.dash-goals p.dash-goals__empty-deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-soft);
  max-width: 480px;
}
.dash-goals__empty-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Goal cards inside the list (rendered by JS) ----------------- */
.dash-goals__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-goals__list .template-card-wrapper { padding: 0; }
/* Belt-and-braces for the same failure mode: renderGoalCard() shipped an
   unbalanced fragment, so the wrappers nested instead of stacking and `gap`
   (which only applies BETWEEN siblings of the flex container) had nothing to
   act on — the cards touched. The markup is fixed; this keeps any nested or
   adjacent wrapper spaced regardless. QA 2026-07-30. */
.dash-goals__list .template-card-wrapper .template-card-wrapper,
.dash-goals__list .template-card-wrapper + .template-card-wrapper { margin-top: 16px; }
.dash-goals__list .goal-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 0;
}
.dash-goals__list .goal-card .row { margin: 0; }
.dash-goals__list .goal-card .col-md-10,
.dash-goals__list .goal-card .col-md-2 { padding: 0; }
.dash-goals__list .goal-card .status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-right: 8px;
  border-radius: 999px;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--cream);
  color: var(--ink);
  border: 0;
}
.dash-goals__list .goal-card .status.company,
.dash-goals__list .goal-card .status.team,
.dash-goals__list .goal-card .status.personal,
.dash-goals__list .goal-card .status.total { background: var(--ink); color: var(--brand); }
.dash-goals__list .goal-card .status.quarterly,
.dash-goals__list .goal-card .status.monthly,
.dash-goals__list .goal-card .status.yearly,
.dash-goals__list .goal-card .status.pending { background: var(--cream); color: var(--text-muted); }
.dash-goals__list .goal-card .goal-desc { margin-top: 10px; }
.dash-goals__list .goal-card .goal-desc h5 {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--ink) !important;
}
.dash-goals__list .goal-card .goal-desc .text {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-soft) !important;
  display: block;
}
.dash-goals__list .goal-card .percentage-sec {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-top: 4px;
}
.dash-goals__list .goal-card .percentage-sec .text {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--ink) !important;
}
.dash-goals__list .goal-card .percentage-sec .progress-bar {
  width: 120px;
  height: 6px;
  background: var(--cream-2);
  border-radius: 999px;
  overflow: hidden;
  padding: 0;
}
.dash-goals__list .goal-card .percentage-sec .progress-bar-inner {
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}
.dash-goals__list .goal-card .percentage-sec .progress-bar-inner.high { background: var(--ink); }
.dash-goals__list .goal-card .percentage-sec .progress-bar-inner.low { background: var(--text-disabled); }
.dash-goals__list .goal-card .goal-team {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.dash-goals__list .goal-card .assignees {
  display: inline-flex;
  align-items: center;
}
.dash-goals__list .goal-card .assignee-avatar {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--cream);
  background-size: cover;
  background-position: center;
  border: 2px solid #FFFFFF;
  margin-left: -6px;
}
.dash-goals__list .goal-card .assignee-avatar:first-child { margin-left: 0; }
/* goal.assignees is a COUNT, not a person — the view used to render one
   i.pravatar.cc random face per unit, so every goal showed different
   strangers. No avatar at all: an avatar implies an identity this data does
   not carry. State the number. QA 2026-07-30. */
.dash-goals__list .goal-card .assignee-count,
.dash-goals__list .goal-card .assignees .assignee-count {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: 0;
  white-space: nowrap;
}
.dash-goals__list .goal-card .assignee-count--none { color: var(--text-disabled); }
/* Goal-management table: real photo when the user has one, otherwise the
   canonical cream initials circle. The previous fallback was
   testIcons/profile.svg — an 81KB SVG wrapping a stock PHOTO of a stranger,
   shown identically for every user without an image. QA 2026-07-30. */
.dash-goals .dash-goals__mgmt-table tbody td .dash-goals__avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream);
  font-family: "Roboto Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
/* `button.btn.small_btn` was missing here, so the View Goal <button> fell
   through to the legacy .small_btn rule and rendered off-palette #22C55E
   green. QA 2026-07-30. */
.dash-goals__list .goal-card .open-link,
.dash-goals__list .goal-card a.btn.small_btn,
.dash-goals__list .goal-card button.btn.small_btn,
.dash-goals__list .goal-card .view-goal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--ink) !important;
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
}
.dash-goals__list .goal-card .open-link:hover,
.dash-goals__list .goal-card button.btn.small_btn:hover,
.dash-goals__list .goal-card .view-goal-btn:hover { background: var(--ink); color: var(--brand) !important; }
.dash-goals__list .goal-card .dash-goals__date-icon {
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dash-goals__list .goal-card .text.mt-4 {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  margin-top: 8px;
}

/* List pagination --------------------------------------------- */
.dash-goals__list-pagination,
.dash-goals__mgmt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.dash-goals .dash-goals__pagination-info,
.dash-goals span.dash-goals__pagination-info,
.dash-goals span#paginationInfo,
.dash-goals span#pagination-info {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase;
}
.dash-goals ul.dash-goals__pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
}
.dash-goals .dash-goals__pagination .page-item {
  display: inline-flex;
  list-style: none;
}
.dash-goals .dash-goals__pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  text-decoration: none;
}
.dash-goals .dash-goals__pagination .page-link:hover { border-color: var(--ink); color: var(--ink) !important; }
.dash-goals .dash-goals__pagination .page-item.active .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--brand) !important;
}
.dash-goals .dash-goals__pagination .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
}
.dash-goals .dash-goals__pagination .page-link svg { display: block; }

/* Goal management table --------------------------------------- */
.dash-goals__mgmt-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-goals__mgmt-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-goals__mgmt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-goals__search--mgmt { width: 220px; }
.dash-goals select.dash-goals__mgmt-filter {
  height: 40px;
  padding: 0 32px 0 14px;
  background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236B7280' d='M5 6L0 0h10z'/></svg>") no-repeat right 14px center / 10px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.dash-goals select.dash-goals__mgmt-filter:focus { outline: none; border-color: var(--ink); }
.dash-goals a.dash-goals__btn,
.dash-goals__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--ink) !important;
  text-decoration: none;
  cursor: pointer;
}
.dash-goals a.dash-goals__btn:hover { background: var(--ink); color: var(--brand) !important; }
.dash-goals__btn--ghost { background: #FFFFFF; }

/* The th padding is flush-left by design (§11.4), but overflow-x clips at x=0
   and was shaving the leading glyph of the first header — "EMPLOYEE" rendered
   as "⌐MPLOYEE", missing the E's left stroke. Shift the clip box 2px left and
   pull it back, so alignment with the card title is unchanged.
   QA 2026-07-30. */
.dash-goals .dash-goals__mgmt-table-wrap { overflow-x: auto; padding-left: 2px; margin-left: -2px; }
.dash-goals table.dash-goals__mgmt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.dash-goals .dash-goals__mgmt-table thead th {
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase !important;
  text-align: left;
}
.dash-goals .dash-goals__mgmt-table tbody td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: transparent;
}
.dash-goals .dash-goals__mgmt-table tbody tr:last-child td { border-bottom: 0; }
.dash-goals .dash-goals__mgmt-table tbody td h5 {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.dash-goals .dash-goals__mgmt-table tbody td .text {
  display: block;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--text-disabled) !important;
}
.dash-goals .dash-goals__mgmt-table tbody td img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream);
  object-fit: cover;
}
.dash-goals .dash-goals__mgmt-table tbody td:last-child {
  text-align: right;
  white-space: nowrap;
}
.dash-goals .dash-goals__mgmt-table .bttn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  text-decoration: none;
  white-space: nowrap;
  margin: 0 0 0 8px;
}
.dash-goals .dash-goals__mgmt-table .bttn.small_btn {
  background: var(--ink);
  color: var(--brand) !important;
  border: 0;
}
.dash-goals .dash-goals__mgmt-table .bttn.small_btn:hover { filter: brightness(1.12); }
.dash-goals .dash-goals__mgmt-table .bttn.white-btn {
  background: transparent;
  color: var(--ink) !important;
  border: 1px solid var(--ink);
}
.dash-goals .dash-goals__mgmt-table .bttn.white-btn:hover { background: var(--ink); color: var(--brand) !important; }
.dash-goals .dash-goals__mgmt-table .bttn img { width: 14px; height: 14px; border-radius: 0; filter: invert(0%); }
/* Status pill (goal-status-by-employee table) -------------------
   Same 2-state monochrome shape as .dash-perf__status, scoped into the goals
   layer. GoalSet.status is pending | in-progress | completed, so `completed` is
   the filled state and everything else is the outline state — no third colour,
   per design.md §11. QA 2026-07-30. */
.dash-goals .dash-goals__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}
.dash-goals .dash-goals__status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.dash-goals .dash-goals__status--done {
  background: var(--ink);
  color: var(--brand) !important;
}
.dash-goals .dash-goals__status--done .dash-goals__status-dot { background: var(--brand); }
.dash-goals .dash-goals__status--open {
  background: transparent;
  color: var(--text-muted) !important;
  border: 1px solid var(--border);
}
.dash-goals .dash-goals__status--open .dash-goals__status-dot { background: var(--text-disabled); }

.dash-goals__no-results {
  padding: 28px;
  text-align: center;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
}

/* Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .dash-goals__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-goals__charts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dash-goals { padding: 24px; gap: 20px; }
  .dash-goals h1.dash-goals__title { font-size: 30px !important; line-height: 34px !important; }
  .dash-goals__head { flex-direction: column; align-items: flex-start; }
  .dash-goals__list-head,
  .dash-goals__mgmt-head { flex-direction: column; align-items: stretch; }
  .dash-goals__search,
  .dash-goals__search--mgmt { width: 100%; }
  .dash-goals__guide { flex-direction: column; }
  .dash-goals__guide-right { width: 100%; border-left: 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .dash-goals__empty { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dash-goals__empty-actions { align-items: stretch; width: 100%; }
}
@media (max-width: 600px) {
  .dash-goals__kpis { grid-template-columns: 1fr; }
}


/* ============================================================
   .dash-goalform — Create Goal Form (businessHead-set-company-goalsTest)
   Two-column layout with sticky side rail + numbered sections.
   ============================================================ */

.dash-goalform {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --border-soft: #F0EBDC;

  display: block;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-goalform,
.dash-goalform *,
.dash-goalform *::before,
.dash-goalform *::after { box-sizing: border-box; }
.dash-goalform * {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
}
.dash-goalform h1, .dash-goalform h2, .dash-goalform h3,
.dash-goalform h4, .dash-goalform h5, .dash-goalform h6,
.dash-goalform p, .dash-goalform ul, .dash-goalform li {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  list-style: none !important;
}

/* Two-column layout ------------------------------------------- */
.dash-goalform__layout {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  padding: 32px 40px 96px;
}
.dash-goalform__rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 248px;
  flex-shrink: 0;
  position: sticky;
  top: 32px;
}
.dash-goalform__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-width: 0;
  max-width: 820px;
}

/* Rail eyebrow + title ---------------------------------------- */
.dash-goalform__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-goalform__chip {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 4px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-goalform__chip-meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-goalform h1.dash-goalform__title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  line-height: 40px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
.dash-goalform p.dash-goalform__deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-soft);
}

/* Rail nav ---------------------------------------------------- */
.dash-goalform__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.dash-goalform a.dash-goalform__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border-radius: 10px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--text-soft) !important;
  text-decoration: none !important;
}
.dash-goalform a.dash-goalform__nav-item:hover {
  background: var(--cream);
  color: var(--ink) !important;
}
/* R13, 2026-07-30: the `--active` state is GONE — markup and stylesheet both.
   It was hardcoded onto item 01 and could never move (all five sections are in
   the DOM at once; this is a scrolling form, not a wizard), so it permanently
   asserted progress that did not exist. The rail is now an index: five equal
   anchors, hover only. Removing the state also retires the ink-on-ink hover bug
   that used to live here — the :hover rule at (0,3,1) outranked --active at
   (0,2,1) and repainted the active label to var(--ink) on a var(--ink) fill. */
.dash-goalform__nav-label {
  padding: 0 12px 2px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-disabled) !important;
}
.dash-goalform__nav-num {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  color: var(--text-disabled);
  min-width: 18px;
}
.dash-goalform a.dash-goalform__nav-item:hover .dash-goalform__nav-num { color: var(--ink); }

/* Mode toggle ------------------------------------------------- */
.dash-goalform__mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  align-self: flex-start;
}
.dash-goalform button.dash-goalform__mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--text-soft) !important;
  cursor: pointer;
}
.dash-goalform button.dash-goalform__mode-btn:hover { color: var(--ink) !important; }

/* Employee create-goal only. That screen has ONE AI action that fills the form
   in place, not the employer's two-tab Manual/AI panel switch — different
   behaviour, so it stays a button rather than being forced into the toggle.
   Ghost treatment so it reads as secondary to Save goal. 2026-07-31. */
.dash-goalform button.dash-goalform__ai-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: -4px;
  padding: 10px 16px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dash-goalform button.dash-goalform__ai-fill:hover {
  background: var(--cream);
  border-color: var(--ink);
}
.dash-goalform button.dash-goalform__mode-btn--active {
  background: var(--ink) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}
/* Same specificity trap as the nav item: :hover (0,3,1) beat --active (0,2,1)
   and set color:var(--ink) over an unchanged var(--ink) background, so
   "Create manually" vanished on hover. The user asked for NO hover effect on
   the selected button, so hold the active colours. QA 2026-07-30. */
.dash-goalform button.dash-goalform__mode-btn--active:hover {
  background: var(--ink) !important;
  color: var(--brand) !important;
}
.dash-goalform button.dash-goalform__mode-btn svg { flex-shrink: 0; }

/* Form ------------------------------------------------------- */
.dash-goalform .dash-goalform__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

/* Section card ----------------------------------------------- */
.dash-goalform__section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 36px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  scroll-margin-top: 96px;
}
.dash-goalform__section-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.dash-goalform__section-num {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  color: var(--text-disabled);
}
.dash-goalform__section-rule {
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.dash-goalform__section-label {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  color: var(--ink);
}
.dash-goalform p.dash-goalform__section-deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-muted);
}

/* Fields ------------------------------------------------------ */
.dash-goalform__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-goalform__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.dash-goalform .dash-goalform__label,
.dash-goalform label.dash-goalform__label {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}
.dash-goalform__meta {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--text-disabled);
  text-transform: uppercase;
}
.dash-goalform__hint {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--text-muted) !important;
  display: block;
  margin-top: 2px;
}
.dash-goalform__row {
  display: flex;
  flex-direction: row;
  gap: 14px;
}
.dash-goalform__row > .dash-goalform__field { flex: 1; min-width: 0; }
.dash-goalform__field--narrow { max-width: 300px; }

/* Inputs / selects / textareas -------------------------------- */
.dash-goalform input.dash-goalform__input,
.dash-goalform input.form-control.dash-goalform__input,
.dash-goalform .dash-goalform__select,
.dash-goalform select.dash-goalform__select.form-select {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
}
.dash-goalform select.dash-goalform__select.form-select {
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236B7280' d='M5 6 0 0h10z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 10px 6px !important;
  cursor: pointer;
}
.dash-goalform input.dash-goalform__input:focus,
.dash-goalform select.dash-goalform__select.form-select:focus { border-color: var(--ink) !important; }
.dash-goalform input.dash-goalform__input::placeholder { color: var(--text-disabled) !important; }
.dash-goalform input[type="date"].dash-goalform__input { color: var(--ink) !important; }
/* 2026-08-04 — an EMPTY date input still renders its "mm/dd/yyyy" hint, and the
   rule above forced it to solid ink, so the two date fields read as if they were
   already filled while every neighbouring placeholder was muted grey. Two selectors
   because the two fields differ: Start date is `required`, so empty === :invalid;
   End date is optional, so empty is still :valid and CSS cannot see it — for that
   one we mute the individual sub-fields, which carry no `aria-valuenow` until they
   hold a value. Filled dates are unaffected and stay ink. */
.dash-goalform input[type="date"].dash-goalform__input:invalid { color: var(--text-disabled) !important; }
.dash-goalform input[type="date"].dash-goalform__input::-webkit-datetime-edit-month-field:not([aria-valuenow]),
.dash-goalform input[type="date"].dash-goalform__input::-webkit-datetime-edit-day-field:not([aria-valuenow]),
.dash-goalform input[type="date"].dash-goalform__input::-webkit-datetime-edit-year-field:not([aria-valuenow]) {
  color: var(--text-disabled) !important;
}

.dash-goalform textarea.dash-goalform__textarea,
.dash-goalform textarea.form-control.dash-goalform__textarea {
  display: block !important;
  width: 100% !important;
  min-height: 120px !important;
  padding: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical;
  transition: border-color 0.15s ease;
}
.dash-goalform textarea.dash-goalform__textarea--sm { min-height: 80px !important; font-size: 14px !important; }
.dash-goalform textarea.dash-goalform__textarea:focus { border-color: var(--ink) !important; }
.dash-goalform textarea.dash-goalform__textarea::placeholder { color: var(--text-disabled) !important; }

.dash-goalform .invalid-feedback {
  font-family: "Roboto", sans-serif !important;
  font-size: 12px !important;
  color: #DC2626;
  margin-top: 4px;
}

/* Milestones repeater ----------------------------------------- */
.dash-goalform__milestones {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-goalform__milestone {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.dash-goalform__milestone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dash-goalform__milestone-tag {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-goalform__milestone-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--ink);
  border-radius: 50%;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--brand);
}
.dash-goalform__milestone-label {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ink);
}
.dash-goalform button.dash-goalform__milestone-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  background: transparent !important;
  border: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.dash-goalform button.dash-goalform__milestone-remove:hover { color: var(--ink) !important; }

.dash-goalform button.dash-goalform__add-milestone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 40px;
  padding: 0 16px;
  background: transparent !important;
  border: 1px dashed var(--ink) !important;
  border-radius: 999px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-goalform button.dash-goalform__add-milestone:hover {
  background: var(--ink) !important;
  color: var(--brand) !important;
  border-color: var(--ink) !important;
}
.dash-goalform__add-plus { font-size: 16px; line-height: 1; font-weight: 600; }

/* Upload row -------------------------------------------------- */
.dash-goalform__upload {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px 14px 14px;
  background: #FFFFFF;
  border: 1px dashed #D8CFB8;
  border-radius: 12px;
  transition: border-color 0.15s ease;
}
.dash-goalform__upload:focus-within { border-color: var(--ink); }
.dash-goalform__upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 10px;
}
.dash-goalform__upload-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.dash-goalform__upload-name {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-goalform__upload-hint {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--text-muted) !important;
}
.dash-goalform__upload-hint strong { color: var(--ink); font-weight: 600; }
.dash-goalform__upload-btn,
.dash-goalform label.dash-goalform__upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 18px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-goalform label.dash-goalform__upload-btn:hover {
  background: var(--ink) !important;
  color: var(--brand) !important;
}
.dash-goalform input.dash-goalform__upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dash-goalform .dash-goalform__upload-feedback {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  color: var(--brand) !important;
  background: var(--ink);
  display: inline-block;
  padding: 4px 10px !important;
  border-radius: 999px;
  margin-top: 8px !important;
}

/* Assignees --------------------------------------------------- */
.dash-goalform__assignees-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dash-goalform__assignees-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-goalform button.dash-goalform__pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  background: #FFFFFF !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-goalform button.dash-goalform__pick-btn:hover {
  background: var(--ink) !important;
  color: var(--brand) !important;
}

/* Chip tray --------------------------------------------------- */
.dash-goalform ul.dash-goalform__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px !important;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  list-style: none !important;
  min-height: 56px;
}
.dash-goalform ul.dash-goalform__chips:empty::before {
  content: "No managers selected yet";
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--text-disabled);
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.dash-goalform li.dash-goalform__chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px 6px 6px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  list-style: none !important;
  margin: 0 !important;
}
.dash-goalform__chip-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--brand);
  border-radius: 50%;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  color: var(--ink);
}
/* Was a hook with no rule — the chip's own type cascaded into it, so it looked
   fine while being a dead class. Stated explicitly. QA 2026-07-30. */
.dash-goalform__chip-name {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--ink) !important;
  white-space: nowrap;
}
.dash-goalform li.dash-goalform__chips-empty {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--text-disabled) !important;
  padding: 0 4px !important;
  list-style: none !important;
}

/* Footer ------------------------------------------------------ */
.dash-goalform__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px 4px;
}
.dash-goalform button.dash-goalform__cancel {
  background: transparent !important;
  border: 0 !important;
  padding: 0 4px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.dash-goalform button.dash-goalform__cancel:hover { color: var(--ink) !important; }
.dash-goalform button.dash-goalform__save {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  background: var(--ink) !important;
  color: var(--brand) !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.dash-goalform button.dash-goalform__save:hover { filter: brightness(1.12); }
.dash-goalform button.dash-goalform__save:active { transform: translateY(1px); }
.dash-goalform button.dash-goalform__save--sm { height: 40px; padding: 0 18px; font-size: 13px; }

/* Employee modal (Bootstrap) --------------------------------- */
.dash-goalform__modal .modal-content {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(10, 10, 10, 0.12);
}
.dash-goalform__modal .modal-header {
  padding: 22px 28px;
  border-bottom: 1px solid var(--border-soft);
}
.dash-goalform__modal h2.modal-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  color: var(--ink) !important;
}
.dash-goalform__modal .modal-body { padding: 20px 28px; }
.dash-goalform__modal .modal-footer {
  padding: 18px 28px;
  border-top: 1px solid var(--border-soft);
  justify-content: flex-end;
}

.dash-goalform__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  color: var(--text-disabled);
  transition: border-color 0.15s ease;
}
.dash-goalform__search:focus-within { border-color: var(--ink); color: var(--ink); }
.dash-goalform__search input {
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-goalform__search input::placeholder { color: var(--text-disabled); }

.dash-goalform__emp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}
.dash-goalform .dash-goalform__emp,
.dash-goalform label.dash-goalform__emp.form-check {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  margin: 0 !important;
  min-height: 56px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dash-goalform .dash-goalform__emp:hover { border-color: var(--ink); }
.dash-goalform .dash-goalform__emp input.form-check-input,
.dash-goalform .dash-goalform__emp input.employee-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dash-goalform .dash-goalform__emp input.employee-checkbox:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.dash-goalform .dash-goalform__emp input.employee-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dash-goalform__emp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 50%;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--ink);
}
.dash-goalform__emp-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.dash-goalform .dash-goalform__emp .form-check-label,
.dash-goalform .dash-goalform__emp-name {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--ink) !important;
}
.dash-goalform__emp-role {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase;
}
.dash-goalform__emp:has(input:checked) {
  border-color: var(--ink);
  background: #FAFAF7 !important;
}
.dash-goalform__emp-empty {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  padding: 16px 12px !important;
  margin: 0 !important;
}

/* AI panel (uses the existing JS-driven goal list) ------------ */
.dash-goalform__ai {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 36px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-goalform__ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dash-goalform h2.dash-goalform__ai-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--ink) !important;
}
.dash-goalform button.dash-goalform__ai-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-goalform button.dash-goalform__ai-refresh:hover {
  background: var(--ink) !important;
  color: var(--brand) !important;
}
.dash-goalform__ai-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 241, 232, 0.85);
  z-index: 9998;
}
.dash-goalform__ai-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .dash-goalform__layout { flex-direction: column; padding: 24px 28px 80px; gap: 24px; }
  .dash-goalform__rail { position: static; width: 100%; }
  .dash-goalform__nav { flex-direction: row; flex-wrap: wrap; }
  .dash-goalform__body { max-width: none; }
}
@media (max-width: 700px) {
  .dash-goalform__section { padding: 24px 20px; }
  .dash-goalform__row { flex-direction: column; }
  .dash-goalform h1.dash-goalform__title { font-size: 28px !important; line-height: 32px !important; }
  .dash-goalform__upload { flex-wrap: wrap; }
  .dash-goalform__upload-btn { width: 100%; margin-top: 4px; }
  .dash-goalform__assignees-head { flex-direction: column; align-items: flex-start; }
  .dash-goalform button.dash-goalform__pick-btn { width: 100%; justify-content: center; }
  .dash-goalform__footer { flex-direction: column-reverse; align-items: stretch; }
  .dash-goalform button.dash-goalform__save { width: 100%; justify-content: center; }
}

/* ── Migrated out of the view's inline <style> (M3, 2026-07-30) ────────────
   152 lines used to sit in a <style> block at the top of
   businessHead-set-company-goalsTest.ejs. Reskin CSS has one home, so they live
   here now — and SCOPED, because the class names are generic (.popup,
   .css-only-modal, #screen-shade, .emp_added) and would otherwise leak across
   the app. Every one of these nodes renders inside <section class="dash-goalform">.
   The original was a wall of !important fighting the legacy sheets; kept where
   it is still doing that job, dropped where it was only fighting itself. */

/* AI suggested-goal popup ------------------------------------- */
.dash-goalform .popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  width: 100%;
  max-width: 520px;
  padding: 24px 26px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.28);
}
.dash-goalform .popup h3 {
  margin: 0 0 8px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 27px !important;
  color: var(--ink) !important;
}
.dash-goalform .popup p {
  margin: 0 0 12px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-soft) !important;
}
.dash-goalform .popup p strong { color: var(--ink) !important; font-weight: 600 !important; }
.dash-goalform .popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.55);
}
/* Legacy .bttn/.btn-green/.btn-grey are off-palette; restated by id. */
.dash-goalform .popup #selectGoal,
.dash-goalform .popup #closePopup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 8px 0 0 !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  cursor: pointer;
}
.dash-goalform .popup #selectGoal {
  background: var(--ink) !important;
  color: var(--brand) !important;
  border: 1px solid var(--ink) !important;
}
.dash-goalform .popup #selectGoal:hover { background: #1A1A1A !important; border-color: #1A1A1A !important; }
.dash-goalform .popup #closePopup {
  background: #FFFFFF !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
.dash-goalform .popup #closePopup:hover { background: var(--cream) !important; }

/* Post-create success modal ----------------------------------- */
.dash-goalform #css-only-modals {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin: 0;
}
.dash-goalform .css-only-modal-check { display: none; }
.dash-goalform .css-only-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0;
}
.dash-goalform .css-only-modal .modal-content {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 30px 36px 32px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.28);
  overflow: hidden;
}
.dash-goalform .css-only-modal .modal_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  padding-top: 6px;
}
.dash-goalform .css-only-modal .modal_header h5 {
  margin: 0 0 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 28px !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
.dash-goalform .css-only-modal .modal_header p {
  max-width: 440px;
  margin: 0 0 24px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-soft) !important;
}
/* The original pinned min-height:280px on the header to reserve space for a
   checkmark animation that the same stylesheet then set to display:none — so
   the modal carried ~150px of empty air. The animation stays hidden (it is
   legacy, and unhiding it pulls in animation CSS from style-test); the dead
   reservation does not. */
.dash-goalform .check_animation { display: none; }
.dash-goalform .css-only-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--cream);
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  line-height: 1;
  cursor: pointer;
}
.dash-goalform .css-only-modal-close:hover { background: var(--cream-2); }
.dash-goalform .css-only-modal-close:focus { outline: none; box-shadow: none; }
.dash-goalform .css-only-modal-close .fa { font-size: 16px !important; }
.dash-goalform .emp_added {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
}
/* Legacy .btn-grey / .btn-green are off-palette; the reskin has one green. */
.dash-goalform .emp_added .btn,
.dash-goalform .emp_added button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  cursor: pointer;
}
.dash-goalform .emp_added .btn-green {
  background: var(--ink) !important;
  color: var(--brand) !important;
  border: 1px solid var(--ink) !important;
}
.dash-goalform .emp_added .btn-green:hover { background: #1A1A1A !important; border-color: #1A1A1A !important; }
.dash-goalform .emp_added .btn-grey {
  background: #FFFFFF !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
.dash-goalform .emp_added .btn-grey:hover { background: var(--cream) !important; }
.dash-goalform #screen-shade {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: rgba(10, 10, 10, 0.55);
}

/* AI panel loader. Replaces an external media.giphy.com GIF (no-dummy-data:
   no external placeholder assets, and it was a third-party request on a
   render path). Pure CSS, on-palette. */
.dash-goalform__ai-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: dashGoalformSpin 0.8s linear infinite;
}
@keyframes dashGoalformSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dash-goalform__ai-spinner { animation-duration: 2.4s; }
}


/* ============================================================
   .dash-perf — Performance Dashboard (performance-dashboard-test)
   ============================================================ */

.dash-perf {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --border-soft: #F0EBDC;

  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-perf,
.dash-perf *,
.dash-perf *::before,
.dash-perf *::after { box-sizing: border-box; }
.dash-perf * {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
}
.dash-perf h1, .dash-perf h2, .dash-perf h3,
.dash-perf h4, .dash-perf h5, .dash-perf h6,
.dash-perf p, .dash-perf ul, .dash-perf li {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  list-style: none !important;
}
.dash-perf > * { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; }

/* Page header --------------------------------------------------- */
.dash-perf__head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.dash-perf__head-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}
.dash-perf__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-perf__chip {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 4px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-perf__chip-meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-perf h1.dash-perf__title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 46px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
.dash-perf p.dash-perf__deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--text-soft);
  max-width: 720px;
}

/* KPI row — re-uses .dash-kpi base from .dash-goals, layout overridden here */
.dash-perf__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.dash-perf .dash-kpi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-perf .dash-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-perf .dash-kpi__label {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-perf .dash-kpi__meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
}
.dash-perf .dash-kpi__numbers {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-perf .dash-kpi__value {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 44px !important;
  line-height: 44px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
.dash-perf .dash-kpi__delta {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.dash-perf .dash-kpi__delta--up { background: var(--brand); color: var(--ink); }
.dash-perf .dash-kpi__delta--down { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }

/* Charts row --------------------------------------------------- */
.dash-perf__charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.dash-perf__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-perf__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dash-perf__card-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-perf__card-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-perf h2.dash-perf__card-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  color: var(--ink);
}

/* Range switcher (Last week / month / year) ------------------- */
.dash-perf__range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.dash-perf a.dash-perf__range-btn,
.dash-perf .dash-perf__range-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-perf a.dash-perf__range-btn:hover { color: var(--ink) !important; }
.dash-perf a.dash-perf__range-btn.active,
.dash-perf .dash-perf__range-btn.active {
  background: var(--ink) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}

/* Trend chart -------------------------------------------------- */
.dash-perf__chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}
.dash-perf__chart-wrap canvas { max-width: 100% !important; }

.dash-perf__legend {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-top: 4px;
}
.dash-perf__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--text-soft) !important;
}
.dash-perf__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.dash-perf__legend-swatch--ink { background: var(--ink); }
.dash-perf__legend-swatch--lime { background: var(--brand); }

/* Range stats below trend chart ------------------------------- */
.dash-perf__range-stats {
  display: flex;
  flex-direction: row;
  gap: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.dash-perf__range-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-perf__range-stat-label {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase !important;
}
.dash-perf__range-stat-value {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 24px !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}

/* Department ranked list -------------------------------------- */
.dash-perf__dept-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dash-perf__dept-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-perf__dept-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dash-perf__dept-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dash-perf__dept-name {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-perf__dept-tag {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}
.dash-perf__dept-tag--top { background: var(--brand) !important; color: var(--ink) !important; }
.dash-perf__dept-tag--muted {
  background: transparent !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  padding: 0 !important;
}
.dash-perf__dept-score {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-perf__dept-score-max {
  color: var(--text-disabled) !important;
  font-weight: 500 !important;
}
.dash-perf__dept-bar {
  width: 100%;
  height: 6px;
  background: var(--cream-2);
  border-radius: 999px;
  overflow: hidden;
}
.dash-perf__dept-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
  transition: width 0.3s ease;
}
.dash-perf__dept-bar-fill--top { background: var(--brand); }
.dash-perf__dept-bar-fill--muted { background: var(--text-disabled); }
.dash-perf__dept-empty {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  padding: 12px 0 !important;
}

/* Guide card (empty state primer) ----------------------------- */
.dash-perf__guide {
  display: flex;
  flex-direction: row;
  gap: 0;
  background: var(--ink);
  border-radius: 18px;
  overflow: hidden;
}
.dash-perf__guide-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 36px 40px;
}
.dash-perf__guide-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 380px;
  flex-shrink: 0;
  padding: 36px;
  background: #111111;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-perf__guide-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-perf h2.dash-perf__guide-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  line-height: 34px !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  max-width: 420px;
}
.dash-perf p.dash-perf__guide-deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-disabled) !important;
  max-width: 440px;
}
.dash-perf__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dash-perf__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--text-disabled);
}
.dash-perf__step--active .dash-perf__step-num {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
}
.dash-perf__step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-perf__step-body strong {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #FFFFFF;
}
.dash-perf__step-body span {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--text-disabled);
}

/* Employee table --------------------------------------------- */
.dash-perf__table-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-perf__table-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-perf__table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-perf__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-disabled);
  transition: border-color 0.15s ease;
}
.dash-perf__search:focus-within { border-color: var(--ink); color: var(--ink); }
.dash-perf__search input {
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-perf__search input::placeholder { color: var(--text-disabled); }

.dash-perf select.dash-perf__filter,
.dash-perf input.dash-perf__date-filter {
  height: 40px;
  padding: 0 14px;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none !important;
}
.dash-perf select.dash-perf__filter {
  padding-right: 32px !important;
  background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236B7280' d='M5 6L0 0h10z'/></svg>") no-repeat right 14px center / 10px 6px !important;
}
.dash-perf select.dash-perf__filter:focus,
.dash-perf input.dash-perf__date-filter:focus { border-color: var(--ink) !important; }

.dash-perf__table-wrap { overflow-x: auto; margin-top: 12px; }
.dash-perf table.dash-perf__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.dash-perf__table thead th {
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase !important;
  text-align: left;
}
.dash-perf__table tbody td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: transparent;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}
.dash-perf__table tbody tr:last-child td { border-bottom: 0; }

.dash-perf__emp {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-perf__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 50%;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-perf__emp-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-perf__emp-name {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
}
.dash-perf__emp-email {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--text-disabled) !important;
}
.dash-perf__dept {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-perf__date {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
}
.dash-perf__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.dash-perf__status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.dash-perf__status--active {
  background: var(--ink);
  color: var(--brand) !important;
}
.dash-perf__status--active .dash-perf__status-dot { background: var(--brand); }
.dash-perf__status--inactive {
  background: transparent;
  color: var(--text-muted) !important;
  border: 1px solid var(--border);
}
.dash-perf__status--inactive .dash-perf__status-dot { background: var(--text-disabled); }
.dash-perf__actions-cell {
  white-space: nowrap;
  text-align: right;
}
.dash-perf .dash-perf__btn,
.dash-perf a.dash-perf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  margin: 0 0 0 8px;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.dash-perf a.dash-perf__btn--ghost {
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
}
.dash-perf a.dash-perf__btn--ghost:hover { background: var(--ink) !important; color: var(--brand) !important; }
.dash-perf a.dash-perf__btn--primary {
  background: var(--ink) !important;
  border: 0 !important;
  color: var(--brand) !important;
}
.dash-perf a.dash-perf__btn--primary:hover { filter: brightness(1.12); }
.dash-perf .dash-perf__btn--sm { height: 32px; padding: 0 12px; font-size: 11px !important; }

.dash-perf__no-results {
  padding: 28px;
  text-align: center;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
}

/* Pagination -------------------------------------------------- */
.dash-perf__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.dash-perf__pagination-info {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase;
}
.dash-perf ul.dash-perf__pagination-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
}
.dash-perf .dash-perf__pagination-list .page-item {
  display: inline-flex;
  list-style: none;
}
.dash-perf .dash-perf__pagination-list .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  text-decoration: none;
}
.dash-perf .dash-perf__pagination-list .page-link:hover { border-color: var(--ink); color: var(--ink) !important; }
.dash-perf .dash-perf__pagination-list .page-item.active .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--brand) !important;
}
.dash-perf .dash-perf__pagination-list .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty state inside the table card --------------------------- */
.dash-perf__empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding: 36px 28px;
  background: var(--cream);
  border: 1px dashed #D8CFB8;
  border-radius: 14px;
}
.dash-perf__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-perf__empty-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.dash-perf__empty-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
}
.dash-perf h3.dash-perf__empty-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 28px !important;
  color: var(--ink);
}
.dash-perf p.dash-perf__empty-deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-soft);
  max-width: 480px;
}

/* Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .dash-perf__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-perf__charts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dash-perf__head { flex-direction: column; align-items: flex-start; }
  .dash-perf h1.dash-perf__title { font-size: 30px !important; line-height: 34px !important; }
  .dash-perf__table-head { flex-direction: column; align-items: stretch; }
  .dash-perf__table-actions { flex-wrap: wrap; }
  .dash-perf__search { width: 100%; }
  .dash-perf__guide { flex-direction: column; }
  .dash-perf__guide-right { width: 100%; border-left: 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .dash-perf__empty { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .dash-perf__kpis { grid-template-columns: 1fr; }
}


/* ============================================================
   .dash-ach — Achievement Tracker (employer-achievement-tracker-new-test)
   ============================================================ */

.dash-ach {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --border-soft: #F0EBDC;

  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-ach,
.dash-ach *,
.dash-ach *::before,
.dash-ach *::after { box-sizing: border-box; }
.dash-ach * {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
}
.dash-ach h1, .dash-ach h2, .dash-ach h3,
.dash-ach h4, .dash-ach h5, .dash-ach h6,
.dash-ach p, .dash-ach ul, .dash-ach li {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  list-style: none !important;
}
.dash-ach > * { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; }

/* Page header --------------------------------------------------- */
.dash-ach__head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.dash-ach__head-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}
.dash-ach__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dash-ach__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-ach__chip {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 4px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-ach__chip-meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-ach h1.dash-ach__title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 46px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
.dash-ach p.dash-ach__deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--text-soft);
  max-width: 720px;
}

/* Buttons ------------------------------------------------------ */
.dash-ach button.dash-ach__btn,
.dash-ach a.dash-ach__btn,
.dash-ach .dash-ach__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  border: 0;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.dash-ach .dash-ach__btn--ghost,
.dash-ach button.dash-ach__btn--ghost,
.dash-ach a.dash-ach__btn--ghost {
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
}
.dash-ach .dash-ach__btn--ghost:hover { background: var(--ink) !important; color: var(--brand) !important; }
.dash-ach .dash-ach__btn--primary,
.dash-ach button.dash-ach__btn--primary,
.dash-ach a.dash-ach__btn--primary {
  background: var(--ink) !important;
  color: var(--brand) !important;
}
.dash-ach .dash-ach__btn--primary:hover { filter: brightness(1.12); }
.dash-ach .dash-ach__btn--sm { height: 34px; padding: 0 12px; font-size: 12px !important; }

/* KPI tiles ---------------------------------------------------- */
.dash-ach__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.dash-ach .dash-kpi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-ach .dash-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-ach .dash-kpi__label {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-ach .dash-kpi__meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
}
.dash-ach .dash-kpi__numbers {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-ach .dash-kpi__value {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 44px !important;
  line-height: 44px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
.dash-ach .dash-kpi__delta {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.dash-ach .dash-kpi__delta--up { background: var(--brand); color: var(--ink); }
.dash-ach .dash-kpi__delta--down { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.dash-ach .dash-kpi__delta--blank { background: var(--cream); color: var(--text-disabled); border-radius: 999px; }
.dash-ach__kpi-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Shared card chrome ------------------------------------------- */
.dash-ach__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-ach__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dash-ach__card-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-ach__card-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-ach h2.dash-ach__card-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  color: var(--ink);
}

/* Range pill switcher ----------------------------------------- */
.dash-ach__range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.dash-ach a.dash-ach__range-btn,
.dash-ach .dash-ach__range-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dash-ach a.dash-ach__range-btn:hover { color: var(--ink) !important; }
.dash-ach a.dash-ach__range-btn.active,
.dash-ach .dash-ach__range-btn.active,
.dash-ach .time-filter-btn.active {
  background: var(--ink) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}

/* Chart wrap + stats ------------------------------------------ */
.dash-ach__chart-wrap {
  position: relative;
  width: 100%;
  height: 300px;
}
.dash-ach__chart-wrap canvas { max-width: 100% !important; }
.dash-ach__chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.dash-ach__chart-stats {
  display: flex;
  flex-direction: row;
  gap: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.dash-ach__chart-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-ach__chart-stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-ach__chart-stat-dot--ink { background: var(--ink); }
.dash-ach__chart-stat-dot--lime { background: var(--brand); }
.dash-ach .dash-ach__chart-stat-value {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  line-height: 22px !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
.dash-ach .dash-ach__chart-stat-label {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}

/* Recent achievements grid ------------------------------------ */
.dash-ach__recent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dash-ach__recent-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.dash-ach__recent-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-ach__featured {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--brand);
  border-radius: 999px;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--ink) !important;
  text-transform: uppercase !important;
}
.dash-ach__recent-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.dash-ach__recent-rating svg { display: block; }
.dash-ach__recent-rating-value {
  margin-left: 4px;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--ink) !important;
}
.dash-ach__recent-date {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase !important;
}
.dash-ach__recent-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-ach h3.dash-ach__recent-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
}
.dash-ach p.dash-ach__recent-desc {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-soft) !important;
}
.dash-ach__recent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dash-ach__recent-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  color: var(--ink) !important;
}
.dash-ach__recent-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.dash-ach__recent-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 50%;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--ink) !important;
}
.dash-ach__recent-author-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.dash-ach__recent-author-name {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--ink) !important;
}
.dash-ach__recent-author-role {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  line-height: 14px !important;
  color: var(--text-disabled) !important;
}

/* Guide card (empty state primer) ----------------------------- */
.dash-ach__guide {
  display: flex;
  flex-direction: row;
  gap: 0;
  background: var(--ink);
  border-radius: 18px;
  overflow: hidden;
}
.dash-ach__guide-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 36px 40px;
}
.dash-ach__guide-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 380px;
  flex-shrink: 0;
  padding: 36px;
  background: #111111;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-ach__guide-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-ach h2.dash-ach__guide-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  line-height: 34px !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  max-width: 420px;
}
.dash-ach p.dash-ach__guide-deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-disabled) !important;
  max-width: 440px;
}
.dash-ach .dash-ach__guide-cta,
.dash-ach button.dash-ach__guide-cta,
.dash-ach a.dash-ach__guide-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  height: 44px;
  padding: 0 20px;
  margin-top: 8px;
  background: var(--brand) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.dash-ach .dash-ach__guide-cta:hover,
.dash-ach button.dash-ach__guide-cta:hover,
.dash-ach a.dash-ach__guide-cta:hover {
  color: var(--ink) !important;
  filter: brightness(0.95);
}

.dash-ach__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dash-ach__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--text-disabled);
}
.dash-ach__step--active .dash-ach__step-num {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
}
.dash-ach__step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-ach__step-body strong {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #FFFFFF;
}
.dash-ach__step-body span {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--text-disabled);
}

/* History table ----------------------------------------------- */
.dash-ach__table-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-ach__table-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-ach__table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-ach__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-disabled);
  transition: border-color 0.15s ease;
}
.dash-ach__search:focus-within { border-color: var(--ink); color: var(--ink); }
.dash-ach__search input {
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-ach__search input::placeholder { color: var(--text-disabled); }
.dash-ach input.dash-ach__date-filter {
  height: 40px;
  padding: 0 14px;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  cursor: pointer;
  outline: none !important;
}
.dash-ach input.dash-ach__date-filter:focus { border-color: var(--ink) !important; }

.dash-ach__table-wrap { overflow-x: auto; margin-top: 12px; }
.dash-ach table.dash-ach__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.dash-ach__table thead th {
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase !important;
  text-align: left;
}
.dash-ach__table tbody td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: transparent;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}
.dash-ach__table tbody tr:last-child td { border-bottom: 0; }

.dash-ach__emp {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-ach__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 50%;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-ach__emp-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-ach__emp-name {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
}
.dash-ach__project {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-ach__company {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--text-soft) !important;
}
.dash-ach__date {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
}
.dash-ach__stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.dash-ach__stars svg { display: block; }
.dash-ach__stars-value {
  margin-left: 6px;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-ach__actions-cell {
  white-space: nowrap;
  text-align: right;
}
.dash-ach__actions-cell .dash-ach__btn { margin-left: 8px; height: 34px; padding: 0 14px; font-size: 12px !important; }

.dash-ach__no-results {
  padding: 28px;
  text-align: center;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  color: var(--text-muted) !important;
}

/* Pagination -------------------------------------------------- */
.dash-ach__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.dash-ach__pagination-info {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase;
}
.dash-ach ul.dash-ach__pagination-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
}
.dash-ach .dash-ach__pagination-list .page-item {
  display: inline-flex;
  list-style: none;
}
.dash-ach .dash-ach__pagination-list .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  text-decoration: none;
}
.dash-ach .dash-ach__pagination-list .page-link:hover { border-color: var(--ink); color: var(--ink) !important; }
.dash-ach .dash-ach__pagination-list .page-item.active .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--brand) !important;
}
.dash-ach .dash-ach__pagination-list .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty state inside the history card ------------------------- */
.dash-ach__empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding: 36px 28px;
  background: var(--cream);
  border: 1px dashed #D8CFB8;
  border-radius: 14px;
}
.dash-ach__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-ach__empty-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.dash-ach__empty-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  text-transform: uppercase;
}
.dash-ach h3.dash-ach__empty-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 28px !important;
  color: var(--ink);
}
.dash-ach p.dash-ach__empty-deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-soft);
  max-width: 480px;
}

/* Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .dash-ach__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-ach__recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-ach__head { flex-direction: column; align-items: flex-start; }
  .dash-ach h1.dash-ach__title { font-size: 30px !important; line-height: 34px !important; }
  .dash-ach__table-head { flex-direction: column; align-items: stretch; }
  .dash-ach__table-actions { flex-wrap: wrap; }
  .dash-ach__search { width: 100%; }
  .dash-ach__guide { flex-direction: column; }
  .dash-ach__guide-right { width: 100%; border-left: 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .dash-ach__empty { flex-direction: column; align-items: flex-start; }
  .dash-ach__recent-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dash-ach__kpis { grid-template-columns: 1fr; }
}


/* ============================================================
   .dash-manage — Manage Employees (company-manage-employees-testV2)
   Mirrors .dash-perf table vocabulary. Parent (#page-content-wrapper)
   provides the cream ground & padding — do not set a page bg here.
   ============================================================ */

.dash-manage {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --border-soft: #F0EBDC;

  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-manage,
.dash-manage *,
.dash-manage *::before,
.dash-manage *::after { box-sizing: border-box; }
.dash-manage * { font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; }
.dash-manage h1, .dash-manage h2, .dash-manage h3,
.dash-manage h4, .dash-manage h5, .dash-manage h6,
.dash-manage p, .dash-manage ul, .dash-manage li {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: left !important;
  list-style: none !important;
}
.dash-manage > * { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; }

/* Page header --------------------------------------------------- */
.dash-manage__head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.dash-manage__head-text { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.dash-manage__eyebrow { display: flex; align-items: center; gap: 10px; }
.dash-manage__chip {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 4px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.1em;
  color: var(--brand);
  text-transform: uppercase;
}
.dash-manage__chip-meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-manage h1.dash-manage__title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 40px !important;
  line-height: 46px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
.dash-manage p.dash-manage__deck {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--text-soft);
  max-width: 640px;
}
.dash-manage__head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Buttons ------------------------------------------------------- */
.dash-manage .dash-manage__btn,
.dash-manage a.dash-manage__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  transition: filter .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dash-manage a.dash-manage__btn--ghost { background: #FFFFFF !important; border: 1px solid var(--border) !important; border-radius: 999px !important; color: var(--ink) !important; height: auto !important; padding: 11px 18px !important; line-height: 22px !important; }
.dash-manage a.dash-manage__btn--ghost:hover { border-color: var(--ink) !important; }
.dash-manage a.dash-manage__btn--primary { background: var(--ink) !important; border: 0 !important; color: var(--brand) !important; }
.dash-manage a.dash-manage__btn--primary:hover { filter: brightness(1.12); }
.dash-manage__btn svg { display: block; flex-shrink: 0; }

/* Card --------------------------------------------------------- */
.dash-manage__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-manage__card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-manage__card-head > div:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-manage__card-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-manage h2.dash-manage__card-title {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  color: var(--ink);
}
.dash-manage__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #F3F4F6;
  border-radius: 999px;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: var(--text-soft) !important;
  text-transform: uppercase;
}

/* Search ------------------------------------------------------- */
.dash-manage__search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-disabled);
  transition: border-color .15s ease;
}
.dash-manage__search:focus-within { border-color: var(--ink); color: var(--ink); }
.dash-manage__search svg { flex-shrink: 0; display: block; }
.dash-manage__search input {
  flex: 1;
  min-width: 0;
  height: 24px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
}
.dash-manage__search input::placeholder { color: var(--text-disabled); }

/* Filter pills ------------------------------------------------- */
.dash-manage ul.dash-manage__pills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; }
.dash-manage .dash-manage__pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px !important;
  border-radius: 999px;
  cursor: pointer;
  background: #F3F4F6;
  color: var(--text-soft);
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  list-style: none;
  transition: background-color .15s ease, color .15s ease;
}
.dash-manage .dash-manage__pill:hover { color: var(--ink); }
.dash-manage .dash-manage__pill.active { background: var(--ink); color: var(--brand); }

/* Table -------------------------------------------------------- */
.dash-manage__table-wrap { overflow-x: auto; }
.dash-manage table.dash-manage__table { width: 100%; border-collapse: collapse; margin: 0; }
.dash-manage__table thead th {
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase !important;
  text-align: left;
  white-space: nowrap;
}
.dash-manage__table thead th.dash-manage__actions-col { text-align: right; }
.dash-manage__table tbody td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: transparent;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}
.dash-manage__table tbody tr:last-child td { border-bottom: 0; }

/* Employee cell */
.dash-manage__emp { display: flex; align-items: center; gap: 12px; }
.dash-manage__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--cream);
  border-radius: 50%;
  overflow: hidden;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.dash-manage__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-manage__emp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-manage__emp-name { font-family: "Roboto", sans-serif !important; font-weight: 600 !important; font-size: 14px !important; line-height: 20px !important; color: var(--ink) !important; }
.dash-manage__emp-email { font-family: "Roboto", sans-serif !important; font-weight: 400 !important; font-size: 12px !important; line-height: 16px !important; color: var(--text-disabled) !important; }

/* Role cell */
.dash-manage__role { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-manage__role-title { font-family: "Roboto", sans-serif !important; font-weight: 600 !important; font-size: 13px !important; line-height: 18px !important; color: var(--ink) !important; }
.dash-manage__role-sub { font-family: "Roboto", sans-serif !important; font-weight: 400 !important; font-size: 12px !important; line-height: 16px !important; color: var(--text-muted) !important; }

/* Review-cycle chip */
.dash-manage__cycle {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F3F4F6;
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
  color: var(--ink) !important;
}
.dash-manage__cycle--none { background: transparent; color: var(--text-disabled) !important; }

/* Invite states */
.dash-manage .dash-manage__invite,
.dash-manage a.dash-manage__invite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease;
}
.dash-manage a.dash-manage__invite--send { background: var(--brand) !important; color: var(--ink) !important; }
.dash-manage a.dash-manage__invite--send:hover { filter: brightness(1.08); }
.dash-manage .dash-manage__invite--sent { background: #F3F4F6; color: var(--text-muted) !important; }
.dash-manage .dash-manage__invite--done { background: #F3F4F6; color: var(--text-soft) !important; }
.dash-manage__invite svg { display: block; flex-shrink: 0; }
.dash-manage__invite-na { color: var(--text-disabled) !important; font-family: "Roboto Mono", monospace !important; font-size: 13px !important; }

/* Actions kebab + dropdown */
.dash-manage__actions-cell { white-space: nowrap; text-align: right; }
.dash-manage__menu { position: relative; display: inline-block; }
.dash-manage .dash-manage__kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #F3F4F6;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s ease;
}
.dash-manage .dash-manage__kebab:hover { background: #E5E7EB; }
.dash-manage .dash-manage__kebab svg { display: block; }
/* Floating row action menu — escapes the table-wrap's overflow:auto clipping by
   using position:fixed, placed via JS from the trigger's bounding rect. Hidden
   by default; .is-open shows it with a soft slide-in. Shared `.pf-kebab-menu`
   is the canonical class; `.dash-manage__dropdown` is kept as a back-compat
   alias for the manage-employees screen. Vanilla JS lives in
   `views/partials/employer/employer-footer-test.ejs` so every reskinned
   employer view picks it up automatically. */
.pf-kebab-menu,
.dash-manage__dropdown {
  display: none;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 230px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  box-shadow: 0 18px 40px -8px rgba(10, 10, 10, 0.18), 0 4px 12px -2px rgba(10, 10, 10, 0.08);
}
.pf-kebab-menu.is-open,
.dash-manage__dropdown.is-open {
  display: block;
  position: fixed;
  z-index: 9999;
  animation: dashManageMenuIn 140ms cubic-bezier(0.2, 0.7, 0.25, 1);
  transform-origin: top right;
}
@keyframes dashManageMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.pf-kebab-menu::before,
.dash-manage__dropdown::before {
  content: "Actions";
  display: block;
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9CA3AF;
  padding: 8px 12px 6px;
}
.pf-kebab-menu li,
.dash-manage__dropdown li { list-style: none; margin: 0; }
.pf-kebab-menu hr.dropdown-divider,
.dash-manage__dropdown hr.dropdown-divider {
  margin: 6px 4px;
  border: 0;
  border-top: 1px solid #F3F4F6;
  position: relative;
}
.pf-kebab-menu hr.dropdown-divider::after,
.dash-manage__dropdown hr.dropdown-divider::after {
  content: "Danger zone";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 8px;
  background: #FFFFFF;
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D1D5DB;
}
.pf-kebab-menu .dropdown-item,
.dash-manage__dropdown .dropdown-item {
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--ink) !important;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.12s ease, transform 0.12s ease, padding-left 0.12s ease;
}
.pf-kebab-menu button.dropdown-item,
.dash-manage__dropdown button.dropdown-item {
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.pf-kebab-menu .dropdown-item:hover,
.dash-manage__dropdown .dropdown-item:hover {
  background: #F5F1E8;
  color: var(--ink) !important;
  text-decoration: none;
  padding-left: 14px;
}
.pf-kebab-menu .dropdown-item.text-danger,
.dash-manage__dropdown .dropdown-item.text-danger { color: #DC2626 !important; }
.pf-kebab-menu .dropdown-item.text-danger:hover,
.dash-manage__dropdown .dropdown-item.text-danger:hover { background: #FEF2F2; color: #DC2626 !important; }
/* Icon badges — wrap the existing inline svg/img in a cream tile via padding+bg. */
.pf-kebab-menu .dropdown-item img,
.pf-kebab-menu .dropdown-item svg,
.dash-manage__dropdown .dropdown-item img,
.dash-manage__dropdown .dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  padding: 6px;
  box-sizing: content-box;
  background: #F5F1E8;
  border-radius: 7px;
  transition: background-color 0.12s ease;
}
.pf-kebab-menu .dropdown-item:hover img,
.pf-kebab-menu .dropdown-item:hover svg,
.dash-manage__dropdown .dropdown-item:hover img,
.dash-manage__dropdown .dropdown-item:hover svg { background: #FFFFFF; }
.pf-kebab-menu .dropdown-item.text-danger img,
.pf-kebab-menu .dropdown-item.text-danger svg,
.dash-manage__dropdown .dropdown-item.text-danger img,
.dash-manage__dropdown .dropdown-item.text-danger svg { background: #FEE2E2; }
.pf-kebab-menu .dropdown-item.text-danger:hover img,
.pf-kebab-menu .dropdown-item.text-danger:hover svg,
.dash-manage__dropdown .dropdown-item.text-danger:hover img,
.dash-manage__dropdown .dropdown-item.text-danger:hover svg { background: #FFFFFF; }
.dash-manage__dropdown .dropdown-item.text-danger:hover img,
.pf-kebab-menu,
.dash-manage__dropdown .dropdown-item.text-danger:hover svg { background: #FFFFFF; }

/* Pagination --------------------------------------------------- */
.dash-manage__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.dash-manage__pagination-info {
  font-family: "Roboto Mono", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-disabled) !important;
  text-transform: uppercase;
}
.dash-manage ul.dash-manage__pagination-list { display: flex; align-items: center; gap: 4px; margin: 0 !important; padding: 0 !important; }
.dash-manage .dash-manage__pagination-list .page-item { display: inline-flex; list-style: none; }
.dash-manage .dash-manage__pagination-list .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  text-decoration: none;
}
.dash-manage .dash-manage__pagination-list .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--brand) !important; }

/* Empty state -------------------------------------------------- */
.dash-manage__empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding: 36px 28px;
  background: var(--cream);
  border: 1px dashed #D8CFB8;
  border-radius: 14px;
}
.dash-manage__empty-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; background: #FFFFFF; border: 1px solid var(--border); border-radius: 18px; }
.dash-manage__empty-copy { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.dash-manage__empty-eyebrow { font-family: "Roboto Mono", "Roboto", monospace !important; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; color: var(--text-disabled); text-transform: uppercase; }
.dash-manage h3.dash-manage__empty-title { font-family: "Roboto", sans-serif !important; font-weight: 700 !important; font-size: 22px !important; line-height: 28px !important; color: var(--ink); }
.dash-manage p.dash-manage__empty-deck { font-family: "Roboto", sans-serif !important; font-weight: 400 !important; font-size: 14px !important; line-height: 22px !important; color: var(--text-soft); max-width: 480px; }

/* Responsive --------------------------------------------------- */
@media (max-width: 900px) {
  .dash-manage__head { flex-direction: column; align-items: flex-start; }
  .dash-manage h1.dash-manage__title { font-size: 30px !important; line-height: 34px !important; }
  .dash-manage__empty { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   .dash-teamboard — Team Performance Dashboard
   (companyTeamPerformanceDashboard-test2 / route /companyManagerBoardTest)
   ============================================================ */
.dash-teamboard {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --bg-subtle: #F3F4F6;
  --warn-soft: #FEF9C3;
  --warn-deep: #92400E;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-teamboard,
.dash-teamboard *,
.dash-teamboard *::before,
.dash-teamboard *::after { box-sizing: border-box; }
.dash-teamboard * { font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; }
.dash-teamboard h1, .dash-teamboard h2, .dash-teamboard h3,
.dash-teamboard h4, .dash-teamboard h5, .dash-teamboard h6,
.dash-teamboard p, .dash-teamboard ul, .dash-teamboard li {
  margin: 0 !important; padding: 0 !important; font-weight: inherit;
  letter-spacing: normal !important; text-transform: none !important;
  text-align: left !important; list-style: none !important;
}

/* shared bits -------------------------------------------------- */
.dash-teamboard .db-eyebrow {
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 500; font-size: 11px; line-height: 14px;
  letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase;
}
.dash-teamboard .tc-chip {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px;
  background: var(--bg-subtle); color: var(--text-soft); white-space: nowrap;
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.04em;
}
.dash-teamboard .tc-stars { display: inline-flex; align-items: center; gap: 2px; }
.dash-teamboard .tc-star { flex: 0 0 auto; }
.dash-teamboard .tc-status {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
.dash-teamboard .tc-status--top { background: var(--brand); color: var(--ink); }
.dash-teamboard .tc-status--ok { background: var(--bg-subtle); color: var(--text-soft); }
.dash-teamboard .tc-status--attention { background: var(--warn-soft); color: var(--warn-deep); }
.dash-teamboard .tc-status--unrated { background: var(--cream-2); color: var(--text-muted); }

/* board layout + header --------------------------------------- */
.dash-teamboard .db-board { display: flex; flex-direction: column; gap: 28px; }
.dash-teamboard .db-header { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.dash-teamboard .db-header__eyebrow { display: flex; align-items: center; gap: 10px; }
.dash-teamboard .db-chip {
  padding: 3px 8px; background: var(--ink); border-radius: 4px;
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.1em;
  color: var(--brand); text-transform: uppercase;
}
.dash-teamboard .db-crumb {
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 500; font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-muted); text-transform: uppercase;
}
.dash-teamboard h1.db-title {
  font-weight: 800 !important; font-size: 40px !important; line-height: 46px !important;
  letter-spacing: -0.02em !important; color: var(--ink);
}
.dash-teamboard p.db-subtitle {
  font-weight: 400 !important; font-size: 15px !important; line-height: 24px !important;
  color: var(--text-soft); max-width: 720px;
}

/* KPIs --------------------------------------------------------- */
.dash-teamboard .db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.dash-teamboard .kpi {
  display: flex; flex-direction: column; gap: 16px; padding: 22px 24px;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
}
.dash-teamboard .kpi__label {
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 500; font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-muted); text-transform: uppercase;
}
.dash-teamboard .kpi__value {
  font-weight: 800 !important; font-size: 40px !important; line-height: 40px !important;
  letter-spacing: -0.02em !important; color: var(--ink);
}

/* filters ------------------------------------------------------ */
.dash-teamboard .db-filters {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  /* Keep the control row visually separate from both the KPI rail and cards.
     Padding is deliberate here: the legacy dashboard sheet can collapse or
     override section margins, while this inset remains stable. */
  padding: 8px 0;
}
.dash-teamboard .db-filters__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-teamboard a.db-pill, .dash-teamboard button.db-pill, .dash-teamboard .db-pill {
  display: inline-flex; align-items: center; cursor: pointer; padding: 8px 16px; border-radius: 999px;
  border: 0; appearance: none; background: var(--bg-subtle); color: var(--text-soft); text-decoration: none !important;
  font-weight: 500; font-size: 14px; line-height: 20px; transition: background .15s, color .15s;
}
.dash-teamboard a.db-pill:hover, .dash-teamboard button.db-pill:hover { color: var(--ink); }
.dash-teamboard a.db-pill.active, .dash-teamboard button.db-pill.active, .dash-teamboard .db-pill.active { background: var(--ink); color: var(--brand); }
.dash-teamboard .db-filters__count {
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 500; font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-disabled); text-transform: uppercase;
}

/* teams grid + cards ------------------------------------------ */
.dash-teamboard .teams-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.dash-teamboard .teams-grid__empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center !important; }
.dash-teamboard .teams-grid__empty p { text-align: center !important; color: var(--text-muted); }
.dash-teamboard .team-card {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
}
.dash-teamboard .team-card.is-highlighted {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(197,241,84,.7), 0 12px 30px rgba(10,10,10,.1);
}
.dash-teamboard .team-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-teamboard h5.team-card__name { font-weight: 700 !important; font-size: 18px !important; line-height: 24px !important; color: var(--ink); }
.dash-teamboard .team-card__kebab {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px;
  background: var(--bg-subtle); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dash-teamboard .team-card__rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-teamboard .team-card__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-teamboard .team-card__divider { height: 1px; background: var(--border); }
.dash-teamboard .team-card__people { display: flex; gap: 16px; }
.dash-teamboard .tc-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 0; }
.dash-teamboard .tc-label {
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 500; font-size: 10px; letter-spacing: 0.08em; color: var(--text-disabled); text-transform: uppercase;
}
.dash-teamboard .tc-name { font-weight: 600 !important; font-size: 14px; line-height: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-teamboard .tc-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dash-teamboard .tc-person .tc-name { min-width: 0; }
.dash-teamboard .tc-avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border);
  object-fit: cover; background: var(--bg-subtle);
}
.dash-teamboard .tc-avatar--initials {
  display: inline-flex; align-items: center; justify-content: center; background: var(--cream-2); color: var(--ink);
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 9px; line-height: 12px; text-transform: uppercase;
}
.dash-teamboard .tc-avatar--empty { background: var(--bg-subtle); color: var(--text-disabled); }
.dash-teamboard .team-card__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 10px 16px; border: 0; border-radius: 10px; background: var(--ink); color: var(--brand);
  font-weight: 500; font-size: 14px; line-height: 20px; cursor: pointer; text-decoration: none !important; transition: opacity .15s;
}
.dash-teamboard .team-card__cta:hover { opacity: .92; color: var(--brand); }

/* board pagination -------------------------------------------- */
.dash-teamboard .db-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-teamboard .db-pagination__text {
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 500; font-size: 11px; letter-spacing: 0.08em; color: var(--text-disabled); text-transform: uppercase;
}
.dash-teamboard .db-pager { display: flex; align-items: center; gap: 8px; }
.dash-teamboard .db-pager__pages { display: inline-flex; align-items: center; gap: 8px; }
.dash-teamboard a.db-pager__btn, .dash-teamboard .db-pager__btn,
.dash-teamboard .db-pager__pages .page-link, .dash-teamboard .db-pager__pages a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-soft); cursor: pointer;
  text-decoration: none !important; font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 13px;
}
.dash-teamboard .db-pager__btn svg { stroke: currentColor; }
.dash-teamboard .db-pager__pages .page-link.active, .dash-teamboard .db-pager__pages a.active {
  background: var(--ink); color: var(--brand); border-color: var(--ink);
}

/* empty state: guide card ------------------------------------- */
.dash-teamboard .db-guide { display: grid; grid-template-columns: 1.6fr 1fr; background: var(--ink); border-radius: 18px; overflow: hidden; }
.dash-teamboard .db-guide__left { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.dash-teamboard .db-guide__eyebrow {
  font-family: "Roboto Mono","Roboto",monospace !important;
  font-weight: 600; font-size: 11px; letter-spacing: 0.1em; color: var(--brand); text-transform: uppercase;
}
.dash-teamboard h2.db-guide__title { font-weight: 800 !important; font-size: 28px !important; line-height: 34px !important; letter-spacing: -0.01em !important; color: #fff; }
.dash-teamboard p.db-guide__body { font-weight: 400 !important; font-size: 14px !important; line-height: 22px !important; color: #9CA3AF; max-width: 440px; }
.dash-teamboard a.db-guide__cta {
  align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; padding: 12px 18px;
  border-radius: 10px; background: var(--brand); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 20px; text-decoration: none !important;
}
.dash-teamboard a.db-guide__cta:hover { color: var(--ink); opacity: .92; }
.dash-teamboard .db-guide__right { display: flex; flex-direction: column; gap: 22px; justify-content: center; padding: 32px; border-left: 1px solid rgba(255,255,255,0.08); }
.dash-teamboard .db-step { display: flex; align-items: flex-start; gap: 12px; }
.dash-teamboard .db-step__num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 11px; color: #fff;
}
.dash-teamboard .db-step__num--on { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.dash-teamboard .db-step__txt { display: flex; flex-direction: column; gap: 2px; }
.dash-teamboard .db-step__txt strong { font-weight: 600; font-size: 14px; line-height: 18px; color: #fff; }
.dash-teamboard .db-step__txt span { font-size: 13px; line-height: 18px; color: #9CA3AF; }

/* empty state: all-teams card --------------------------------- */
.dash-teamboard .db-empty { display: flex; flex-direction: column; gap: 20px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px; }
.dash-teamboard .db-empty__head { display: flex; flex-direction: column; gap: 6px; }
.dash-teamboard h3.db-empty__title2 { font-weight: 700 !important; font-size: 20px !important; line-height: 26px !important; color: var(--ink); }
.dash-teamboard .db-empty__block { display: flex; align-items: center; gap: 20px; background: #F6F1E7; border-radius: 14px; padding: 24px; flex-wrap: wrap; }
.dash-teamboard .db-empty__icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 14px; background: #fff; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.dash-teamboard .db-empty__copy { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; }
.dash-teamboard h4.db-empty__title { font-weight: 700 !important; font-size: 18px !important; line-height: 24px !important; color: var(--ink); }
.dash-teamboard p.db-empty__body { font-weight: 400 !important; font-size: 14px !important; line-height: 22px !important; color: var(--text-soft); max-width: 520px; }
.dash-teamboard .db-empty__ctas { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.dash-teamboard a.db-btn-dark { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 10px; background: var(--ink); color: var(--brand); font-weight: 500; font-size: 14px; line-height: 18px; text-decoration: none !important; white-space: nowrap; }
.dash-teamboard a.db-btn-dark:hover { color: var(--brand); opacity: .92; }
.dash-teamboard a.db-link { font-weight: 500; font-size: 13px; color: var(--text-soft); text-decoration: underline !important; }
.dash-teamboard a.db-link:hover { color: var(--ink); }

/* detail modal ------------------------------------------------ */
body.team-detail-open { overflow: hidden; }
.dash-teamboard .performance-page.modal { position: fixed; inset: 0; z-index: 1080; background: rgba(10,10,10,0.55); overflow-y: auto; padding: 40px 16px; }
.dash-teamboard .performance-page .modal-dialog { display: block; max-width: 1180px; width: 100%; margin: 0 auto; }
.dash-teamboard .db-modal {
  display: flex; flex-direction: column; gap: 24px; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 32px; box-shadow: 0 24px 60px rgba(10,10,10,0.35);
}
.dash-teamboard .db-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dash-teamboard .db-modal__heading { display: flex; flex-direction: column; gap: 6px; }
.dash-teamboard h5.db-modal__title { font-weight: 700 !important; font-size: 24px !important; line-height: 32px !important; color: var(--ink); }
.dash-teamboard .db-modal__close { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: var(--bg-subtle); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dash-teamboard .db-modal__body { display: flex; flex-direction: column; gap: 24px; }
.dash-teamboard .db-modal__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: stretch; }

/* summary band */
.dash-teamboard .db-modal__summary { display: flex; flex-direction: column; gap: 16px; }
.dash-teamboard .db-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #FAFAF7; border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px; flex-wrap: wrap; }
.dash-teamboard .db-summary__id { display: flex; align-items: center; gap: 16px; }
.dash-teamboard .db-summary__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 999px; background: var(--brand); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-transform: uppercase; font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 14px; }
.dash-teamboard .db-summary__meta { display: flex; flex-direction: column; gap: 8px; }
.dash-teamboard .db-summary__name { font-weight: 700 !important; font-size: 20px; line-height: 24px; color: var(--ink); }
.dash-teamboard .db-summary__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-teamboard .db-summary__right { display: flex; align-items: center; gap: 20px; }
.dash-teamboard .db-summary__rating { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.dash-teamboard .db-summary__rlabel { font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500; font-size: 10px; letter-spacing: 0.08em; color: var(--text-disabled); text-transform: uppercase; }
.dash-teamboard .db-summary__rval { display: flex; align-items: center; gap: 8px; font-weight: 800 !important; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; color: var(--ink); }
.dash-teamboard p.db-summary__report { font-weight: 400 !important; font-size: 14px !important; line-height: 22px !important; color: var(--text-soft); }

/* modal cards + charts */
.dash-teamboard .db-card { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.dash-teamboard .db-card__head { display: flex; flex-direction: column; gap: 6px; }
.dash-teamboard h3.db-card__title { font-weight: 700 !important; font-size: 20px !important; line-height: 26px !important; color: var(--ink); }
.dash-teamboard .db-card--chart { background: var(--ink); border-color: #2A2A29; }
.dash-teamboard .db-card--chart .db-eyebrow { color: var(--brand); }
.dash-teamboard .db-card--chart h3.db-card__title { color: #FFFFFF !important; }
.dash-teamboard .db-card--chart .db-data-empty { background: #151515; border-color: #2A2A29; color: #9CA3AF; }
.dash-teamboard .db-card--chart .db-data-empty__icon { background: #202020; border-color: #2A2A29; color: #FFFFFF; }
.dash-teamboard .db-card--chart .db-data-empty strong { color: #FFFFFF; }
.dash-teamboard .db-card--chart .db-data-empty > span:last-child { color: #9CA3AF; }
.dash-teamboard .db-chart { position: relative; width: 100%; height: 240px; }
.dash-teamboard .db-chart canvas { width: 100% !important; height: 100% !important; }
.dash-teamboard .db-chart--donut { height: 220px; }
.dash-teamboard .db-goal-legend {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.dash-teamboard .db-goal-legend[hidden] { display: none !important; }
.dash-teamboard .db-goal-legend__item {
  display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 7px;
  min-width: 0; padding: 8px 9px; border-radius: 9px; background: #FAFAF7;
}
.dash-teamboard .db-goal-legend__dot { width: 8px; height: 8px; border-radius: 999px; }
.dash-teamboard .db-goal-legend__dot--complete { background: var(--ink); }
.dash-teamboard .db-goal-legend__dot--progress {
  background: repeating-linear-gradient(135deg, #8FBF25 0 2px, rgba(197,241,84,.30) 2px 5px);
}
.dash-teamboard .db-goal-legend__dot--overdue {
  background: repeating-linear-gradient(135deg, #DC2626 0 2px, rgba(239,68,68,.14) 2px 5px);
}
.dash-teamboard .db-goal-legend__label { min-width: 0; color: var(--text-soft); font-size: 11px; line-height: 14px; white-space: nowrap; }
.dash-teamboard .db-goal-legend__item strong { color: var(--ink); font-family: "Roboto Mono","Roboto",monospace !important; font-size: 11px; line-height: 14px; font-weight: 600; }
.dash-teamboard .db-data-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 100%; min-height: 190px; padding: 24px; border: 1px dashed #D8CFB8;
  border-radius: 12px; background: var(--cream); color: var(--text-muted); text-align: center !important;
}
.dash-teamboard .db-data-empty[hidden] { display: none !important; }
.dash-teamboard .db-data-empty__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 3px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink);
}
.dash-teamboard .db-data-empty strong { color: var(--ink); font-weight: 650; font-size: 14px; line-height: 18px; }
.dash-teamboard .db-data-empty > span:last-child { max-width: 300px; color: var(--text-muted); font-weight: 400; font-size: 12px; line-height: 18px; text-align: center !important; }
.dash-teamboard .db-data-empty--compact { min-height: 240px; flex: 1 1 auto; }

/* skills bars */
.dash-teamboard .skills-container { display: flex; flex-direction: column; gap: 14px; }
.dash-teamboard .db-skill { display: flex; flex-direction: column; gap: 8px; }
.dash-teamboard .db-skill__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-teamboard .db-skill__name { font-weight: 600 !important; font-size: 14px; line-height: 20px; color: var(--ink); }
.dash-teamboard .db-skill__val { font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 13px; color: var(--text-soft); }
.dash-teamboard .db-skill__track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.dash-teamboard .db-skill__bar { height: 100%; border-radius: 999px; background: var(--ink); }

/* team comparison summary */
.dash-teamboard .db-compare-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.dash-teamboard .db-compare-summary[hidden] { display: none !important; }
.dash-teamboard .db-compare__stat {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 92px;
  padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: #FAFAF7;
}
.dash-teamboard .db-compare__stat--average { background: var(--cream); border-color: #D8CFB8; }
.dash-teamboard .db-compare__k { font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500; font-size: 9px; line-height: 13px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.dash-teamboard .db-compare__name { overflow: hidden; color: var(--ink); font-size: 13px; line-height: 17px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.dash-teamboard .db-compare__score { margin-top: auto; color: var(--ink); font-family: "Roboto Mono","Roboto",monospace !important; font-size: 13px; line-height: 17px; font-weight: 600; }
.dash-teamboard .db-compare__score--large { margin-top: 0; font-size: 20px; line-height: 24px; }
.dash-teamboard .db-compare__score small { color: var(--text-muted); font-family: inherit !important; font-size: 10px; font-weight: 500; }
.dash-teamboard .db-compare__note { margin-top: auto; color: var(--text-muted); font-size: 10px; line-height: 14px; }

/* members table */
.dash-teamboard .db-members { gap: 20px; }
.dash-teamboard .db-table-wrap { width: 100%; overflow-x: auto; }
.dash-teamboard table.db-table { width: 100% !important; border-collapse: collapse; }
.dash-teamboard .db-table th {
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500 !important; font-size: 10px !important;
  letter-spacing: 0.08em; color: var(--text-disabled); text-transform: uppercase !important; text-align: left !important;
  padding: 0 16px 12px 0 !important; border-bottom: 1px solid var(--border); white-space: nowrap; background: transparent !important;
}
.dash-teamboard .db-table th.db-table__right, .dash-teamboard .db-table td.db-table__right { text-align: right !important; }
.dash-teamboard .db-table td { padding: 14px 16px 14px 0 !important; border-bottom: 1px solid var(--border); vertical-align: middle; background: transparent !important; }
.dash-teamboard .db-table tr:last-child td { border-bottom: 0; }
.dash-teamboard .db-table-empty { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 112px; color: var(--text-muted); }
.dash-teamboard .db-table-empty > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.dash-teamboard .db-table-empty strong { color: var(--ink); font-weight: 650; font-size: 14px; line-height: 18px; }
.dash-teamboard .db-table-empty small { color: var(--text-muted); font-weight: 400; font-size: 12px; line-height: 18px; }
.dash-teamboard .db-mrow { display: flex; align-items: center; gap: 12px; }
.dash-teamboard .db-mrow__avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; background: var(--bg-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); text-transform: uppercase; font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 11px; }
.dash-teamboard .db-mrow__name { font-weight: 600 !important; font-size: 14px; color: var(--ink); }
.dash-teamboard .db-mrow__role { font-size: 14px; color: var(--text-soft); }
.dash-teamboard .db-mrow__rating { display: inline-flex; align-items: center; gap: 8px; }
.dash-teamboard .db-mrow__rval { font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 13px; color: var(--ink); }
.dash-teamboard a.db-mrow__manage { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 500; font-size: 13px; line-height: 16px; text-decoration: none !important; }
.dash-teamboard a.db-mrow__manage:hover { background: var(--bg-subtle); color: var(--ink); }
.dash-teamboard .db-table__foot { display: flex; justify-content: flex-end; padding-top: 8px; }
.dash-teamboard .db-table__foot .pagination { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; }
.dash-teamboard .db-table__foot .page-item { list-style: none !important; }
.dash-teamboard .db-table__foot .page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-soft); cursor: pointer;
  text-decoration: none !important; font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 13px;
}
.dash-teamboard .db-table__foot .page-link.active { background: var(--ink); color: var(--brand); border-color: var(--ink); }

/* Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .dash-teamboard .db-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-teamboard .teams-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-teamboard .db-modal__row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dash-teamboard .db-filters { align-items: flex-start; padding: 4px 0; }
  .dash-teamboard .db-filters__pills { width: 100%; }
  .dash-teamboard .db-kpis { grid-template-columns: 1fr 1fr; }
  .dash-teamboard .teams-grid { grid-template-columns: 1fr; }
  .dash-teamboard .db-guide { grid-template-columns: 1fr; }
  .dash-teamboard .db-guide__right { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .dash-teamboard h1.db-title { font-size: 30px !important; line-height: 36px !important; }
  .dash-teamboard .db-empty__block { flex-direction: column; align-items: flex-start; }
  .dash-teamboard .db-empty__ctas { align-items: flex-start; }
  .dash-teamboard .performance-page.modal { padding: 12px; }
  .dash-teamboard .db-modal { padding: 22px 16px; gap: 20px; }
  .dash-teamboard .db-summary { align-items: flex-start; padding: 18px; }
  .dash-teamboard .db-summary__right { width: 100%; justify-content: space-between; }
  .dash-teamboard .db-summary__rating { align-items: flex-start; }
  .dash-teamboard .db-card { padding: 20px 16px; }
  .dash-teamboard .db-compare-summary { grid-template-columns: 1fr; }
  .dash-teamboard .db-compare__stat { min-height: 82px; }
}

/* ============================================================
   .dash-departments — Manage Departments & Teams
   (businessHead-manage-departments-test / route /businessHeadManageDepartmentsTest)
   ============================================================ */
.dash-departments {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --bg-subtle: #F3F4F6;
  --inactive-dot: #D1D5DB;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-departments,
.dash-departments *,
.dash-departments *::before,
.dash-departments *::after { box-sizing: border-box; }
.dash-departments * { font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; }
.dash-departments h1, .dash-departments h2, .dash-departments h3,
.dash-departments h4, .dash-departments h5, .dash-departments h6,
.dash-departments p, .dash-departments ul, .dash-departments li {
  margin: 0 !important; padding: 0 !important; font-weight: inherit;
  letter-spacing: normal !important; text-transform: none !important;
  text-align: left !important; list-style: none !important;
}

/* board column ------------------------------------------------- */
.dash-departments .dept-board { display: flex; flex-direction: column; gap: 36px; }

/* success banner ---------------------------------------------- */
.dash-departments .dept-banner {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px;
  background: #C5F1542E; border: 1px solid #97BD288C; transition: opacity .5s ease;
}
.dash-departments .dept-banner__badge {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-departments .dept-banner__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.dash-departments .dept-banner__title { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--ink); }
.dash-departments .dept-banner__body { font-weight: 400; font-size: 13px; line-height: 18px; color: var(--text-soft); }
.dash-departments .dept-banner__close {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* page header ------------------------------------------------- */
.dash-departments .dept-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.dash-departments .dept-head__text { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.dash-departments .dept-eyebrow { display: flex; align-items: center; gap: 10px; }
.dash-departments .dept-chip {
  padding: 3px 8px; background: var(--ink); border-radius: 4px;
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600;
  font-size: 10px; line-height: 14px; letter-spacing: 0.1em; color: var(--brand); text-transform: uppercase;
}
.dash-departments .dept-crumb {
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500;
  font-size: 11px; line-height: 14px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase;
}
.dash-departments h1.dept-title {
  font-weight: 800 !important; font-size: 40px !important; line-height: 44px !important;
  letter-spacing: -0.02em !important; color: var(--ink);
}
.dash-departments p.dept-subtitle {
  font-weight: 400 !important; font-size: 15px !important; line-height: 24px !important; color: var(--text-soft); max-width: 600px;
}
.dash-departments .dept-add {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border: 0; border-radius: 10px; background: var(--ink); color: var(--brand);
  font-weight: 500; font-size: 14px; line-height: 18px; cursor: pointer; transition: background .15s;
}
.dash-departments .dept-add:hover { background: #1A1A1A; color: var(--brand); }
.dash-departments .dept-add__plus { font-size: 16px; line-height: 16px; color: var(--brand); }

/* KPI tiles --------------------------------------------------- */
.dash-departments .dept-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.dash-departments .dept-kpi {
  display: flex; flex-direction: column; gap: 18px; padding: 22px 24px;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
}
.dash-departments .dept-kpi__label {
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500;
  font-size: 11px; line-height: 14px; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase;
}
.dash-departments .dept-kpi__value {
  font-weight: 800 !important; font-size: 44px; line-height: 44px; letter-spacing: -0.02em; color: var(--ink);
}

/* section head ------------------------------------------------ */
.dash-departments .dept-section { display: flex; flex-direction: column; gap: 18px; }
.dash-departments .dept-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-departments .dept-section__heading { display: flex; align-items: baseline; gap: 10px; }
.dash-departments h2.dept-section__title { font-weight: 800 !important; font-size: 18px !important; line-height: 22px !important; letter-spacing: -0.01em !important; color: var(--ink); }
.dash-departments .dept-section__count {
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500;
  font-size: 11px; line-height: 14px; letter-spacing: 0.1em; color: var(--text-disabled); text-transform: uppercase;
}
.dash-departments .dept-search {
  display: inline-flex; align-items: center; gap: 8px; width: 280px; height: 40px; padding: 0 14px;
  border-radius: 10px; background: #fff; border: 1px solid var(--border);
}
.dash-departments .dept-search svg { flex: 0 0 auto; }
.dash-departments .dept-search input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-weight: 400; font-size: 14px; line-height: 18px; color: var(--ink);
}
.dash-departments .dept-search input::placeholder { color: var(--text-disabled); }

/* card grid + cards ------------------------------------------- */
.dash-departments .dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: start; }
.dash-departments .dept-card {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
}
.dash-departments .dept-card.show { border-color: var(--ink); box-shadow: 0 10px 30px rgba(10,10,10,0.08); }
.dash-departments .dept-card.is-highlighted {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(197,241,84,.7), 0 12px 30px rgba(10,10,10,.1);
}
.dash-departments .dept-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-departments .dept-card__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-departments .dept-card__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; background: var(--cream-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-departments h3.dept-card__name {
  font-weight: 800 !important; font-size: 18px !important; line-height: 22px !important; letter-spacing: -0.01em !important;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-departments .dept-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 10px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.dash-departments .dept-pill__dot { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; }
.dash-departments .dept-pill--active { background: var(--ink); color: var(--brand); }
.dash-departments .dept-pill--active .dept-pill__dot { background: var(--brand); }
.dash-departments .dept-pill--muted { background: #fff; border: 1px solid var(--border); color: var(--text-muted); }
.dash-departments .dept-pill--muted .dept-pill__dot { background: var(--text-disabled); }
.dash-departments .dept-card__divider { height: 1px; background: var(--cream-2); }

/* manager block ----------------------------------------------- */
.dash-departments .dept-card__manager { display: flex; flex-direction: column; gap: 8px; }
.dash-departments .dept-card__micro {
  font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.14em; color: var(--text-disabled); text-transform: uppercase;
}
.dash-departments .dept-card__person { display: flex; align-items: center; gap: 10px; }
.dash-departments .dept-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.dash-departments .dept-avatar--lime { background: var(--brand); color: var(--ink); font-weight: 600; font-size: 12px; line-height: 16px; }
.dash-departments .dept-avatar--empty { background: var(--bg-subtle); border: 1px solid var(--border); }
.dash-departments .dept-card__person-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-departments .dept-card__person-name { font-weight: 600; font-size: 14px; line-height: 18px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-departments .dept-card__person-name--muted { color: var(--text-muted); }
.dash-departments .dept-card__person-sub { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-departments .dept-card__person-sub--muted { color: var(--text-disabled); }

/* stat chip --------------------------------------------------- */
.dash-departments .dept-card__stats { display: flex; align-items: center; gap: 20px; padding: 12px 14px; border-radius: 10px; background: var(--cream); }
.dash-departments .dept-stat { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 500; font-size: 13px; line-height: 16px; color: var(--text-muted); }
.dash-departments .dept-stat b { font-weight: 700; font-size: 16px; line-height: 20px; color: var(--ink); }
.dash-departments .dept-stat__sep { width: 3px; height: 3px; border-radius: 999px; background: var(--inactive-dot); flex: 0 0 auto; }

/* CTA buttons ------------------------------------------------- */
.dash-departments .dept-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 18px; border: 0; border-radius: 10px; font-weight: 500; font-size: 14px; line-height: 18px; cursor: pointer; transition: background .15s, opacity .15s; }
.dash-departments .dept-cta--dark { background: var(--ink); color: var(--brand); }
.dash-departments .dept-cta--dark:hover { background: #1A1A1A; }
.dash-departments .dept-cta--lime { background: var(--brand); color: var(--ink); }
.dash-departments .dept-cta--lime:hover { background: #B8E83C; }
.dash-departments .dept-cta__show { display: inline-flex; align-items: center; gap: 8px; }
.dash-departments .dept-cta__hide { display: none; align-items: center; gap: 8px; }
.dash-departments .dept-cta.open .dept-cta__show { display: none; }
.dash-departments .dept-cta.open .dept-cta__hide { display: inline-flex; }

/* expandable teams -------------------------------------------- */
.dash-departments .dept-teams { display: none; flex-direction: column; gap: 10px; }
.dash-departments .dept-teams.show-teams { display: flex; }
.dash-departments .dept-team { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #FAFAF7; }
.dash-departments .dept-team__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-departments .dept-team__name { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--ink); }
.dash-departments .dept-team__edit { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dash-departments .dept-team__edit:hover { background: var(--bg-subtle); }
.dash-departments .dept-team__lead { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--text-soft); }
.dash-departments .dept-team__emps-label { font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.1em; color: var(--text-disabled); text-transform: uppercase; margin-top: 2px; }
.dash-departments .dept-team__emps { display: flex; flex-direction: column; gap: 2px; }
.dash-departments .dept-team__emps li { font-weight: 400; font-size: 13px; line-height: 18px; color: var(--text-soft); }
.dash-departments .dept-team__none { font-weight: 400; font-size: 13px; line-height: 18px; color: var(--text-muted); }

/* pagination -------------------------------------------------- */
.dash-departments .dept-pager-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-departments .dept-pager-row__info { font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; color: var(--text-disabled); text-transform: uppercase; }
.dash-departments ul.dept-pager { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; }
.dash-departments .dept-pager .page-item { list-style: none !important; }
.dash-departments .dept-pager .page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-soft); cursor: pointer;
  text-decoration: none !important; font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 13px;
}
.dash-departments .dept-pager .page-item.active .page-link { background: var(--ink); color: var(--brand); border-color: var(--ink); }
.dash-departments .dept-pager .page-item.disabled .page-link { color: var(--text-disabled); cursor: default; opacity: .6; }

/* empty state ------------------------------------------------- */
.dash-departments .dept-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center !important;
  padding: 56px 24px; border-radius: 14px; background: var(--cream); border: 1px dashed #D8CFB8;
}
.dash-departments .dept-empty__icon { width: 64px; height: 64px; border-radius: 14px; background: #fff; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.dash-departments .dept-empty__eyebrow { font-family: "Roboto Mono","Roboto",monospace !important; font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.1em; color: var(--text-disabled); text-transform: uppercase; }
.dash-departments h2.dept-empty__title { font-weight: 800 !important; font-size: 22px !important; line-height: 28px !important; letter-spacing: -0.01em !important; color: var(--ink); text-align: center !important; }
.dash-departments p.dept-empty__body { font-weight: 400 !important; font-size: 14px !important; line-height: 22px !important; color: var(--text-muted); max-width: 440px; text-align: center !important; }
.dash-departments .dept-empty .dept-add { margin-top: 8px; }

/* Add Department modal --------------------------------------- */
.dash-dept-modal .modal-content { border: 1px solid #E5E7EB; border-radius: 18px; overflow: hidden; font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; }
.dash-dept-modal .modal-header { border-bottom: 1px solid #F0EBDC; padding: 20px 24px; align-items: center; }
.dash-dept-modal .modal-title { font-weight: 800; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; color: #0A0A0A; }
.dash-dept-modal .btn-close { border: 0; background: transparent; width: 28px; height: 28px; padding: 0; line-height: 1; opacity: .7; cursor: pointer; }
.dash-dept-modal .btn-close::before { content: "\00d7"; font-size: 22px; color: #6B7280; }
.dash-dept-modal .btn-close:hover { opacity: 1; }
.dash-dept-modal .modal-body { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.dash-dept-modal__label { font-weight: 500; font-size: 13px; line-height: 16px; color: #0A0A0A; margin: 0; }
.dash-dept-modal__input { height: 48px; border-radius: 10px; border: 1px solid #E5E7EB; padding: 0 14px; font-size: 15px; color: #0A0A0A; outline: 0; width: 100%; }
.dash-dept-modal__input::placeholder { color: #9CA3AF; }
.dash-dept-modal__input:focus { border-color: #0A0A0A; }
.dash-dept-modal .modal-footer { border-top: 1px solid #F0EBDC; padding: 16px 24px; display: flex; justify-content: space-between; gap: 12px; }
.dash-dept-modal__cancel { border: 1px solid #0A0A0A; background: transparent; color: #0A0A0A; border-radius: 999px; padding: 11px 18px; font-weight: 500; font-size: 14px; line-height: 18px; cursor: pointer; }
.dash-dept-modal__cancel:hover { background: #F5F1E8; }
.dash-dept-modal__submit { border: 0; background: #0A0A0A; color: #C5F154; border-radius: 10px; padding: 11px 18px; font-weight: 500; font-size: 14px; line-height: 18px; cursor: pointer; }
.dash-dept-modal__submit:hover { background: #1A1A1A; }

/* responsive -------------------------------------------------- */
@media (max-width: 1100px) {
  .dash-departments .dept-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-departments .dept-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .dash-departments .dept-head { flex-direction: column; }
  .dash-departments .dept-kpis { grid-template-columns: 1fr 1fr; }
  .dash-departments .dept-grid { grid-template-columns: 1fr; }
  .dash-departments .dept-search { width: 100%; }
  .dash-departments h1.dept-title { font-size: 30px !important; line-height: 36px !important; }
}

/* ============================================================
   .dash-buildteam — Build a Team (profileSetup-addTeamsTest /
   route /businessHeadAddTeamTest) + .dash-bt-modal (Add Employee /
   Import CSV / Select Members modals) + reskinned success overlay
   ============================================================ */
.dash-buildteam, .dash-bt-modal {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6; --inactive-dot:#D1D5DB;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-buildteam, .dash-buildteam *, .dash-buildteam *::before, .dash-buildteam *::after,
.dash-bt-modal, .dash-bt-modal *, .dash-bt-modal *::before, .dash-bt-modal *::after { box-sizing:border-box; }
.dash-buildteam *, .dash-bt-modal * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-buildteam h1,.dash-buildteam h2,.dash-buildteam h3,.dash-buildteam h4,.dash-buildteam h5,.dash-buildteam h6,.dash-buildteam p,.dash-buildteam ul,.dash-buildteam li,
.dash-bt-modal h1,.dash-bt-modal h2,.dash-bt-modal h3,.dash-bt-modal h4,.dash-bt-modal h5,.dash-bt-modal h6,.dash-bt-modal p,.dash-bt-modal ul,.dash-bt-modal li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}

/* board + header --------------------------------------------- */
.dash-buildteam .bt-board { display:flex; flex-direction:column; align-items:center; gap:24px; padding:32px 40px 96px; }
.dash-buildteam .bt-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; width:720px; }
.dash-buildteam .bt-head__text { display:flex; flex-direction:column; gap:12px; }
.dash-buildteam .bt-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-buildteam .bt-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-buildteam .bt-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-buildteam h1.bt-title { font-weight:800 !important; font-size:36px !important; line-height:40px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-buildteam p.bt-subtitle { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); max-width:560px; }
.dash-buildteam a.bt-back { display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--border); flex-shrink:0; font-weight:500; font-size:14px; color:var(--text-soft); text-decoration:none !important; white-space:nowrap; }
.dash-buildteam a.bt-back:hover { color:var(--ink); background:var(--bg-subtle); }

/* form + cards ----------------------------------------------- */
.dash-buildteam .bt-form { display:flex; flex-direction:column; gap:24px; width:720px; }
.dash-buildteam .bt-card { display:flex; flex-direction:column; gap:18px; padding:32px 36px; border-radius:18px; background:#fff; border:1px solid var(--border); }
.dash-buildteam .bt-sec, .dash-bt-modal .bt-sec { display:flex; align-items:center; gap:18px; }
.dash-buildteam .bt-sec__num, .dash-bt-modal .bt-sec__num { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:12px; line-height:16px; letter-spacing:0.18em; color:var(--text-disabled); }
.dash-buildteam .bt-sec__line, .dash-bt-modal .bt-sec__line { height:1px; flex:1 1 0; background:var(--cream-2); }
.dash-buildteam .bt-sec__label, .dash-bt-modal .bt-sec__label { font-weight:600; font-size:14px; line-height:18px; letter-spacing:0.02em; color:var(--ink); }

/* fields (shared form + modal) ------------------------------- */
.dash-buildteam .bt-field, .dash-bt-modal .bt-field { display:flex; flex-direction:column; gap:6px; }
.dash-buildteam .bt-field__top, .dash-bt-modal .bt-field__top { display:flex; align-items:baseline; justify-content:space-between; }
.dash-buildteam .bt-field__label, .dash-bt-modal .bt-field__label { font-weight:500; font-size:13px; line-height:16px; color:var(--ink); margin:0 !important; }
.dash-buildteam .bt-field__tag, .dash-bt-modal .bt-field__tag { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-buildteam .bt-help, .dash-bt-modal .bt-help { font-weight:400; font-size:12px; line-height:16px; color:var(--text-disabled); }
.dash-buildteam .bt-input, .dash-buildteam .bt-select select, .dash-bt-modal .bt-input, .dash-bt-modal .bt-select select {
  width:100%; height:48px; border-radius:10px; border:1px solid var(--border); background:#fff; padding:0 14px;
  font-family:"Roboto",sans-serif; font-size:15px; color:var(--ink); outline:0;
}
.dash-buildteam .bt-input::placeholder, .dash-bt-modal .bt-input::placeholder { color:var(--text-disabled); }
.dash-buildteam .bt-input:focus, .dash-buildteam .bt-select select:focus, .dash-bt-modal .bt-input:focus, .dash-bt-modal .bt-select select:focus { border-color:var(--ink); }
.dash-buildteam .bt-select, .dash-bt-modal .bt-select { position:relative; }
.dash-buildteam .bt-select select, .dash-bt-modal .bt-select select { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:36px; cursor:pointer; }
.dash-buildteam .bt-select::after, .dash-bt-modal .bt-select::after { content:"\25BE"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-disabled); font-size:12px; pointer-events:none; }

/* members section -------------------------------------------- */
.dash-buildteam p.bt-help--lead { font-weight:400 !important; font-size:13px !important; line-height:20px !important; color:var(--text-muted); }
.dash-buildteam .bt-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bt-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; border:0; font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; line-height:18px; cursor:pointer; text-decoration:none !important; transition:background .15s; }
.bt-btn svg { flex-shrink:0; }
.bt-btn--dark, .bt-btn--save { background:var(--ink); color:var(--brand); }
.bt-btn--dark:hover, .bt-btn--save:hover { background:#1A1A1A; color:var(--brand); }
.bt-btn--ghost { background:#fff; border:1px solid var(--ink); border-radius:999px; color:var(--ink); }
.bt-btn--ghost:hover { background:var(--cream); color:var(--ink); }
.bt-btn__plus { font-size:16px; line-height:16px; }

.dash-buildteam .bt-selected { display:flex; flex-direction:column; gap:10px; }
.dash-buildteam .bt-selected__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-buildteam ul.bt-selected__list { display:flex; flex-direction:column; gap:6px; padding:6px !important; border-radius:10px; border:1px solid var(--border); }
.dash-buildteam ul.bt-selected__list:empty { padding:0 !important; border:0; }
.dash-buildteam ul.bt-selected__list:empty::before { content:"No members added yet \2014 add new people or pick from your workforce."; display:block; padding:16px; border-radius:10px; border:1px dashed #D8CFB8; background:var(--cream); color:var(--text-muted); font-size:13px; line-height:18px; }
.dash-buildteam ul.bt-selected__list li { display:flex; align-items:center; padding:10px 12px; border-radius:8px; background:var(--cream); font-weight:500; font-size:14px; line-height:18px; color:var(--ink); }

/* footer ----------------------------------------------------- */
.dash-buildteam .bt-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; width:720px; padding:2px 4px; }

/* modals (BS5 dialog reskinned) ------------------------------ */
.dash-bt-modal .modal-dialog { max-width:560px; }
.dash-bt-modal .modal-dialog.modal-lg { max-width:620px; }
.dash-bt-modal .modal-content { border:1px solid var(--border) !important; border-radius:18px !important; overflow:hidden; background:#fff; }
.dash-bt-modal .bt-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 28px; border-bottom:1px solid var(--cream-2); }
.dash-bt-modal .bt-modal__heading { display:flex; flex-direction:column; gap:6px; }
.dash-bt-modal .bt-modal__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-bt-modal h5.bt-modal__title { font-weight:800 !important; font-size:22px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-bt-modal .bt-modal__sub { font-weight:400; font-size:13px; line-height:20px; color:var(--text-muted); }
.dash-bt-modal .bt-modal__close { width:32px; height:32px; flex-shrink:0; border:0; border-radius:999px; background:var(--bg-subtle); color:var(--text-muted); font-size:18px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.dash-bt-modal .bt-modal__close:hover { background:#E5E7EB; }
.dash-bt-modal .bt-modal__body { padding:24px 28px; display:flex; flex-direction:column; gap:16px; }
.dash-bt-modal .bt-modal__foot { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-top:1px solid var(--cream-2); }

/* add-employee 2-col grid */
.dash-bt-modal .bt-grid { display:flex; flex-wrap:wrap; gap:16px; }
.dash-bt-modal .bt-grid .bt-field { flex:1 1 240px; min-width:0; }
.dash-bt-modal .bt-field--job { position:relative; }
.dash-bt-modal .bt-suggestions { position:absolute; top:100%; left:0; right:0; z-index:20; background:#fff; border:1px solid var(--border); border-radius:10px; margin-top:4px; max-height:220px; overflow-y:auto; box-shadow:0 12px 30px rgba(0,0,0,0.12); display:none; }
.dash-bt-modal .bt-suggestions .autocomplete-suggestion { padding:10px 14px; font-size:14px; color:var(--ink); cursor:pointer; }
.dash-bt-modal .bt-suggestions .autocomplete-suggestion:hover { background:var(--cream); }

/* import dropzone */
.dash-bt-modal .bt-dropzone { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 24px; border-radius:14px; background:var(--cream); border:1px dashed #D8CFB8; cursor:pointer; text-align:center; }
.dash-bt-modal .bt-dropzone__icon { width:48px; height:48px; border-radius:12px; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; }
.dash-bt-modal .bt-dropzone__title { font-weight:600; font-size:15px; line-height:20px; color:var(--ink); }
.dash-bt-modal .bt-dropzone__hint { font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-bt-modal .bt-dropzone__btn { display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--ink); font-weight:500; font-size:13px; color:var(--ink); margin-top:2px; }
.dash-bt-modal .bt-dropzone__input { display:none; }
.dash-bt-modal .bt-dropzone__links { display:flex; gap:16px; flex-wrap:wrap; }
.dash-bt-modal .bt-link { display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:13px; line-height:18px; color:var(--text-soft); text-decoration:none !important; }
.dash-bt-modal .bt-link:hover { color:var(--ink); }
.dash-bt-modal .bt-link svg { flex-shrink:0; }

/* select-members modal */
.dash-bt-modal .bt-search { display:flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:10px; background:#fff; border:1px solid var(--border); }
.dash-bt-modal .bt-search svg { flex-shrink:0; }
.dash-bt-modal .bt-search input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-size:14px; color:var(--ink); }
.dash-bt-modal .bt-search input::placeholder { color:var(--text-disabled); }
.dash-bt-modal .bt-people { display:flex; flex-direction:column; gap:4px; max-height:360px; overflow-y:auto; }
.dash-bt-modal .bt-people .bt-person { display:flex; align-items:center; gap:12px; padding:10px; border-radius:8px; margin:0; }
.dash-bt-modal .bt-people .bt-person:hover { background:var(--cream); }
.dash-bt-modal .bt-people .employee-checkbox { width:18px; height:18px; flex-shrink:0; accent-color:var(--brand); cursor:pointer; margin:0; }
.dash-bt-modal .bt-people .form-check-label { font-weight:500; font-size:14px; line-height:18px; color:var(--ink); margin:0 !important; cursor:pointer; }

/* success overlay (reskin) ----------------------------------- */
.team-success-overlay { position:fixed; inset:0; z-index:9999; background:rgba(10,10,10,0.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.team-success-modal { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:460px; background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:32px; box-shadow:0 24px 60px rgba(10,10,10,0.35); text-align:center; font-family:"Roboto",sans-serif; }
.team-success-modal__icon { width:52px; height:52px; border-radius:999px; background:#C5F154; display:inline-flex; align-items:center; justify-content:center; }
.team-success-modal__icon svg { width:28px; height:28px; }
.team-success-modal__icon svg path { stroke:#0A0A0A !important; }
.team-success-modal__title { font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em; color:#0A0A0A !important; }
.team-success-modal__text { font-weight:400; font-size:14px; line-height:22px; color:#6B7280; max-width:380px; }
.team-success-modal__actions { display:flex; justify-content:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.team-success-modal__actions .btn { display:inline-flex; align-items:center; padding:11px 18px; border-radius:10px; font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; line-height:18px; cursor:pointer; border:0; text-decoration:none !important; }
.team-success-modal__actions .btn-green { background:#0A0A0A; color:#C5F154; }
.team-success-modal__actions .btn-grey { background:#fff; border:1px solid #0A0A0A; color:#0A0A0A; border-radius:999px; }
body.team-success-open { overflow:hidden; }

/* responsive ------------------------------------------------- */
@media (max-width:820px){
  .dash-buildteam .bt-head, .dash-buildteam .bt-form, .dash-buildteam .bt-footer { width:100%; }
  .dash-buildteam .bt-head { flex-direction:column; }
  .dash-buildteam .bt-board { padding:24px 16px 72px; }
  .dash-bt-modal .bt-grid .bt-field { flex:1 1 100%; }
}

/* ============================================================
   .dash-verify — Verify new employees
   (businessHead-verify-employeesTest / route /verifyRegisteredEmployeesTest)
   ============================================================ */
.dash-verify {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-verify, .dash-verify *, .dash-verify *::before, .dash-verify *::after { box-sizing:border-box; }
.dash-verify * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-verify h1,.dash-verify h2,.dash-verify h3,.dash-verify h4,.dash-verify h5,.dash-verify h6,.dash-verify p,.dash-verify ul,.dash-verify li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}

/* board + header --------------------------------------------- */
.dash-verify .vf-board { display:flex; flex-direction:column; gap:32px; padding:8px 0 64px; }
.dash-verify .vf-head { display:flex; flex-direction:column; gap:10px; max-width:760px; }
.dash-verify .vf-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-verify .vf-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-verify .vf-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-verify h1.vf-title { font-weight:800 !important; font-size:40px !important; line-height:46px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-verify p.vf-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); max-width:640px; }

/* card ------------------------------------------------------- */
.dash-verify .vf-card { display:flex; flex-direction:column; gap:20px; padding:28px 28px 24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-verify .vf-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-verify .vf-card__heading { display:flex; flex-direction:column; gap:4px; }
.dash-verify .vf-card__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-verify h2.vf-card__title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-verify .vf-search { display:inline-flex; align-items:center; gap:8px; width:260px; height:40px; padding:0 14px; border-radius:10px; background:#fff; border:1px solid var(--border); }
.dash-verify .vf-search svg { flex:0 0 auto; }
.dash-verify .vf-search input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-weight:400; font-size:14px; line-height:18px; color:var(--ink); }
.dash-verify .vf-search input::placeholder { color:var(--text-disabled); }

/* table ------------------------------------------------------ */
.dash-verify .vf-table-wrap { width:100%; overflow-x:auto; }
.dash-verify table.vf-table { width:100% !important; border-collapse:collapse; }
.dash-verify .vf-table th {
  font-family:"Roboto Mono",monospace !important; font-weight:500 !important; font-size:10px !important;
  letter-spacing:0.08em; color:var(--text-disabled); text-transform:uppercase !important; text-align:left !important;
  padding:0 16px 14px 0 !important; border-bottom:1px solid var(--border); white-space:nowrap; background:transparent !important;
}
.dash-verify .vf-table th.vf-th-action, .dash-verify .vf-table td.vf-cell-action { text-align:right !important; }
.dash-verify .vf-table td { padding:16px 16px 16px 0 !important; border-bottom:1px solid var(--border); vertical-align:middle; background:transparent !important; }
.dash-verify .vf-table tbody tr:last-child td { border-bottom:0; }
.dash-verify .vf-cell-emp { display:flex; align-items:center; gap:12px; }
.dash-verify .vf-avatar { flex:0 0 auto; width:38px; height:38px; border-radius:999px; background:var(--cream-2); display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto",sans-serif; font-weight:600; font-size:12px; color:var(--ink); }
.dash-verify .vf-emp { display:flex; flex-direction:column; gap:1px; min-width:0; }
.dash-verify .vf-emp__name { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }
.dash-verify .vf-emp__email { font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-verify .vf-cell-strong { font-weight:500; font-size:14px; line-height:18px; color:var(--ink); }
.dash-verify .vf-cell { font-weight:400; font-size:14px; line-height:18px; color:var(--text-soft); }
.dash-verify .vf-role { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-verify .vf-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; }
.dash-verify .vf-pill__dot { width:6px; height:6px; border-radius:999px; flex:0 0 auto; }
.dash-verify .vf-pill--pending { background:#fff; border:1px solid var(--border); color:var(--text-muted); }
.dash-verify .vf-pill--pending .vf-pill__dot { background:var(--text-disabled); }
.dash-verify a.vf-verify { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border-radius:8px; background:var(--brand); color:var(--ink) !important; font-weight:500; font-size:13px; line-height:16px; text-decoration:none !important; white-space:nowrap; transition:background .15s; }
.dash-verify a.vf-verify:hover { background:#B8E83C; color:var(--ink) !important; }

/* pagination ------------------------------------------------- */
.dash-verify .vf-pager-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:4px; }
.dash-verify .vf-pager-row__info { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); }
.dash-verify ul.vf-pager { display:inline-flex; align-items:center; gap:8px; margin:0 !important; padding:0 !important; }
.dash-verify ul.vf-pager .page-item { list-style:none !important; }
.dash-verify ul.vf-pager .page-link {
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px;
  border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text-soft); cursor:pointer;
  text-decoration:none !important; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px;
}
.dash-verify ul.vf-pager .page-item.active .page-link { background:var(--ink); color:var(--brand); border-color:var(--ink); }
.dash-verify ul.vf-pager .page-item.disabled .page-link { color:var(--text-disabled); cursor:default; border-color:var(--border); }

/* empty state ------------------------------------------------ */
.dash-verify .vf-empty { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center !important; padding:56px 24px; border-radius:14px; background:var(--cream); border:1px dashed #D8CFB8; }
.dash-verify .vf-empty__icon { width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.dash-verify .vf-empty__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-verify h3.vf-empty__title { font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em !important; color:var(--ink); text-align:center !important; }
.dash-verify p.vf-empty__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-muted); max-width:420px; text-align:center !important; }

/* responsive ------------------------------------------------- */
@media (max-width:720px){
  .dash-verify h1.vf-title { font-size:30px !important; line-height:36px !important; }
  .dash-verify .vf-search { width:100%; }
  .dash-verify .vf-card__head { flex-direction:column; }
}

/* ============================================================
   .dash-onboard — Employee Onboarding dashboard
   (businessHead-employee-onboarding-test / route /employeeOnboardingTest)
   ============================================================ */
.dash-onboard {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6; --inactive-dot:#D1D5DB;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-onboard, .dash-onboard *, .dash-onboard *::before, .dash-onboard *::after { box-sizing:border-box; }
.dash-onboard * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-onboard h1,.dash-onboard h2,.dash-onboard h3,.dash-onboard h4,.dash-onboard h5,.dash-onboard h6,.dash-onboard p,.dash-onboard ul,.dash-onboard li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}

/* board + header --------------------------------------------- */
.dash-onboard .ob-board { display:flex; flex-direction:column; gap:28px; padding:8px 0 64px; }
.dash-onboard .ob-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dash-onboard .ob-head__text { display:flex; flex-direction:column; gap:10px; max-width:680px; }
.dash-onboard .ob-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-onboard .ob-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-onboard .ob-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-onboard h1.ob-title { font-weight:800 !important; font-size:40px !important; line-height:46px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-onboard p.ob-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); max-width:600px; }
.dash-onboard a.ob-add { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; background:var(--ink); color:var(--brand) !important; font-weight:500; font-size:14px; line-height:18px; text-decoration:none !important; white-space:nowrap; transition:background .15s; }
.dash-onboard a.ob-add:hover { background:#1A1A1A; color:var(--brand) !important; }
.dash-onboard a.ob-add .ob-add__plus { font-size:16px; line-height:16px; }

/* welcome banner --------------------------------------------- */
.dash-onboard .ob-welcome { display:flex; align-items:flex-start; gap:12px; padding:18px 20px; border-radius:14px; background:#C5F1542E; border:1px solid #97BD288C; }
.dash-onboard .ob-welcome__dot { width:10px; height:10px; border-radius:999px; background:var(--brand); flex:0 0 auto; margin-top:5px; border:1px solid #97BD28; }
.dash-onboard .ob-welcome__text { display:flex; flex-direction:column; gap:3px; }
.dash-onboard .ob-welcome__title { font-weight:700; font-size:14px; line-height:18px; color:var(--ink); }
.dash-onboard .ob-welcome__body { font-weight:400; font-size:13px; line-height:20px; color:var(--text-soft); }

/* KPI cards -------------------------------------------------- */
.dash-onboard .ob-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dash-onboard .ob-kpi { display:flex; flex-direction:column; gap:16px; padding:22px 24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-onboard .ob-kpi__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dash-onboard .ob-kpi__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-onboard .ob-kpi__meta { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); }
.dash-onboard .ob-kpi__value { font-weight:800 !important; font-size:44px; line-height:44px; letter-spacing:-0.02em; color:var(--ink); }

/* charts row ------------------------------------------------- */
.dash-onboard .ob-charts { display:grid; grid-template-columns:1.7fr 1fr; gap:16px; align-items:stretch; }
.dash-onboard .ob-card { display:flex; flex-direction:column; gap:18px; padding:24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-onboard .ob-card__head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-onboard .ob-card__heading { display:flex; flex-direction:column; gap:4px; }
.dash-onboard .ob-card__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-onboard h2.ob-card__title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }

/* segmented period control */
.dash-onboard .ob-seg-track { display:inline-flex; align-items:center; gap:3px; padding:3px; border-radius:10px; background:var(--cream); }
.dash-onboard button.ob-seg { border:0; cursor:pointer; padding:0 14px; height:32px; border-radius:7px; background:transparent; color:var(--text-muted); font-family:"Roboto",sans-serif; font-weight:500; font-size:12px; line-height:32px; }
.dash-onboard button.ob-seg.active { background:var(--ink); color:var(--brand); font-weight:600; }

/* line chart */
.dash-onboard .ob-chart { position:relative; width:100%; height:280px; }
.dash-onboard .ob-chart canvas { width:100% !important; height:100% !important; }
.dash-onboard .ob-summary { display:flex; gap:32px; padding-top:16px; border-top:1px solid var(--cream-2); }
.dash-onboard .ob-summary__item { display:flex; flex-direction:column; gap:4px; }
.dash-onboard .ob-summary__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-onboard .ob-summary__value { font-weight:800; font-size:22px; line-height:24px; letter-spacing:-0.01em; color:var(--ink); }

/* department bar list */
.dash-onboard .ob-depts { display:flex; flex-direction:column; gap:18px; }
.dash-onboard .ob-dept { display:flex; flex-direction:column; gap:8px; }
.dash-onboard .ob-dept__top { display:flex; align-items:center; gap:8px; }
.dash-onboard .ob-dept__tag { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.dash-onboard .ob-dept__tag--top { background:var(--brand); color:var(--ink); }
.dash-onboard .ob-dept__tag--none { color:var(--text-disabled); }
.dash-onboard .ob-dept__name { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-onboard .ob-dept__count { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px; color:var(--ink); }
.dash-onboard .ob-dept__track { height:8px; border-radius:999px; background:var(--cream-2); overflow:hidden; }
.dash-onboard .ob-dept__fill { height:100%; border-radius:999px; background:var(--ink); }
.dash-onboard .ob-dept__fill--top { background:var(--brand); }
.dash-onboard .ob-dept__fill--none { background:var(--inactive-dot); }

/* empty-state guide card (dark) ------------------------------ */
.dash-onboard .ob-guide { display:grid; grid-template-columns:1.6fr 1fr; background:var(--ink); border-radius:18px; overflow:hidden; }
.dash-onboard .ob-guide__left { display:flex; flex-direction:column; gap:16px; padding:32px; }
.dash-onboard .ob-guide__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-onboard h2.ob-guide__title { font-weight:800 !important; font-size:28px !important; line-height:34px !important; letter-spacing:-0.01em !important; color:#fff; }
.dash-onboard p.ob-guide__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:#9CA3AF; max-width:440px; }
.dash-onboard a.ob-guide__cta { align-self:flex-start; margin-top:4px; display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:10px; background:var(--brand); color:var(--ink) !important; font-weight:600; font-size:15px; line-height:20px; text-decoration:none !important; }
.dash-onboard a.ob-guide__cta:hover { color:var(--ink) !important; opacity:.92; }
.dash-onboard a.ob-guide__cta .ob-add__plus { font-size:17px; line-height:17px; }
.dash-onboard .ob-guide__right { display:flex; flex-direction:column; gap:22px; justify-content:center; padding:32px; border-left:1px solid rgba(255,255,255,0.08); }
.dash-onboard .ob-step { display:flex; align-items:flex-start; gap:12px; }
.dash-onboard .ob-step__num { flex:0 0 auto; width:24px; height:24px; border-radius:999px; border:1px solid rgba(255,255,255,0.25); display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; color:#fff; }
.dash-onboard .ob-step__num--on { background:var(--brand); border-color:var(--brand); color:var(--ink); }
.dash-onboard .ob-step__txt { display:flex; flex-direction:column; gap:2px; }
.dash-onboard .ob-step__txt strong { font-weight:600; font-size:14px; line-height:18px; color:#fff; }
.dash-onboard .ob-step__txt span { font-size:13px; line-height:18px; color:#9CA3AF; }

/* people list card ------------------------------------------- */
.dash-onboard .ob-people { display:flex; flex-direction:column; gap:20px; padding:28px 28px 24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-onboard .ob-people__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-onboard .ob-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-onboard .ob-tabs { display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:10px; background:var(--cream); }
.dash-onboard .ob-tab { border:0; cursor:pointer; padding:0 14px; height:34px; border-radius:8px; background:transparent; color:var(--text-muted); font-family:"Roboto",sans-serif; font-weight:500; font-size:13px; line-height:34px; white-space:nowrap; }
.dash-onboard .ob-tab.active { background:var(--ink); color:var(--brand); font-weight:600; }
.dash-onboard .ob-search { display:inline-flex; align-items:center; gap:8px; width:240px; height:40px; padding:0 14px; border-radius:10px; background:#fff; border:1px solid var(--border); }
.dash-onboard .ob-search svg { flex:0 0 auto; }
.dash-onboard .ob-search input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-size:14px; color:var(--ink); }
.dash-onboard .ob-search input::placeholder { color:var(--text-disabled); }

/* people table */
.dash-onboard .ob-table-wrap { width:100%; overflow-x:auto; }
.dash-onboard table.ob-table { width:100% !important; border-collapse:collapse; }
.dash-onboard .ob-table th { font-family:"Roboto Mono",monospace !important; font-weight:500 !important; font-size:10px !important; letter-spacing:0.08em; color:var(--text-disabled); text-transform:uppercase !important; text-align:left !important; padding:0 16px 14px 0 !important; border-bottom:1px solid var(--border); white-space:nowrap; background:transparent !important; }
.dash-onboard .ob-table th.ob-th-action, .dash-onboard .ob-table td.ob-cell-action { text-align:right !important; }
.dash-onboard .ob-table td { padding:16px 16px 16px 0 !important; border-bottom:1px solid var(--border); vertical-align:middle; background:transparent !important; }
.dash-onboard .ob-table tbody tr:last-child td { border-bottom:0; }
.dash-onboard .ob-cell-emp { display:flex; align-items:center; gap:12px; }
.dash-onboard .ob-avatar { flex:0 0 auto; width:38px; height:38px; border-radius:999px; background:var(--cream-2); display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto",sans-serif; font-weight:600; font-size:12px; color:var(--ink); }
.dash-onboard .ob-emp { display:flex; flex-direction:column; gap:1px; min-width:0; }
.dash-onboard .ob-emp__name { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }
.dash-onboard .ob-emp__email { font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-onboard .ob-cell-strong { display:block; font-weight:500; font-size:14px; line-height:18px; color:var(--ink); }
.dash-onboard .ob-cell-sub { display:block; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-disabled); }
.dash-onboard .ob-cell { font-weight:400; font-size:14px; line-height:18px; color:var(--text-soft); }
.dash-onboard .ob-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; }
.dash-onboard .ob-pill__dot { width:6px; height:6px; border-radius:999px; flex:0 0 auto; }
.dash-onboard .ob-pill--active { background:var(--ink); color:var(--brand); }
.dash-onboard .ob-pill--active .ob-pill__dot { background:var(--brand); }
.dash-onboard .ob-pill--muted { background:#fff; border:1px solid var(--border); color:var(--text-muted); }
.dash-onboard .ob-pill--muted .ob-pill__dot { background:var(--text-disabled); }
.dash-onboard a.ob-invite { display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border-radius:8px; background:var(--ink); color:var(--brand) !important; font-weight:500; font-size:13px; line-height:16px; text-decoration:none !important; white-space:nowrap; transition:background .15s; }
.dash-onboard a.ob-invite:hover { background:#1A1A1A; color:var(--brand) !important; }
.dash-onboard .ob-empty-row { text-align:center !important; color:var(--text-muted); padding:32px 0 !important; }

/* people pagination */
.dash-onboard .ob-pager-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:4px; }
.dash-onboard .ob-pager-row__info { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); }
.dash-onboard ul.ob-pager { display:inline-flex; align-items:center; gap:8px; margin:0 !important; padding:0 !important; }
.dash-onboard ul.ob-pager li { list-style:none !important; }
.dash-onboard ul.ob-pager .ob-page { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text-soft); cursor:pointer; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px; }
.dash-onboard ul.ob-pager .ob-page.active { background:var(--ink); color:var(--brand); border-color:var(--ink); }
.dash-onboard ul.ob-pager .ob-page.disabled { color:var(--text-disabled); cursor:default; }

/* people empty block (cream dashed) -------------------------- */
.dash-onboard .ob-empty { display:flex; align-items:center; gap:20px; padding:24px; border-radius:14px; background:var(--cream); border:1px dashed #D8CFB8; flex-wrap:wrap; }
.dash-onboard .ob-empty__icon { flex:0 0 auto; width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; }
.dash-onboard .ob-empty__copy { display:flex; flex-direction:column; gap:6px; flex:1 1 280px; }
.dash-onboard .ob-empty__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-onboard h3.ob-empty__title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-onboard p.ob-empty__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-muted); max-width:520px; }
.dash-onboard .ob-empty__ctas { display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.dash-onboard a.ob-empty__link { font-weight:500; font-size:13px; color:var(--text-soft); text-decoration:underline !important; }
.dash-onboard a.ob-empty__link:hover { color:var(--ink); }

/* responsive ------------------------------------------------- */
@media (max-width:1100px){
  .dash-onboard .ob-charts { grid-template-columns:1fr; }
  .dash-onboard .ob-kpis { grid-template-columns:1fr; }
}
@media (max-width:760px){
  .dash-onboard h1.ob-title { font-size:30px !important; line-height:36px !important; }
  .dash-onboard .ob-guide { grid-template-columns:1fr; }
  .dash-onboard .ob-guide__right { border-left:0; border-top:1px solid rgba(255,255,255,0.08); }
  .dash-onboard .ob-search { width:100%; }
  .dash-onboard .ob-empty { flex-direction:column; align-items:flex-start; }
  .dash-onboard .ob-empty__ctas { align-items:flex-start; }
}

/* ============================================================
   .dash-addemp — Add Employee (single record)
   (company-add-employee-recordTest / route /company_addEmployeeTest)
   ============================================================ */
.dash-addemp {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6; --danger:#DC2626;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-addemp, .dash-addemp *, .dash-addemp *::before, .dash-addemp *::after { box-sizing:border-box; }
.dash-addemp * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-addemp h1,.dash-addemp h2,.dash-addemp h3,.dash-addemp h4,.dash-addemp h5,.dash-addemp h6,.dash-addemp p,.dash-addemp ul,.dash-addemp li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}

/* board + header --------------------------------------------- */
.dash-addemp .ae-board { display:flex; flex-direction:column; align-items:center; gap:24px; padding:32px 40px 96px; }
.dash-addemp .ae-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; width:840px; max-width:100%; }
.dash-addemp .ae-head__text { display:flex; flex-direction:column; gap:10px; }
.dash-addemp .ae-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-addemp .ae-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-addemp .ae-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-addemp h1.ae-title { font-weight:800 !important; font-size:36px !important; line-height:40px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-addemp p.ae-subtitle { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); max-width:560px; }
.dash-addemp a.ae-back { display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--border); flex-shrink:0; font-weight:500; font-size:14px; color:var(--text-soft); text-decoration:none !important; white-space:nowrap; }
.dash-addemp a.ae-back:hover { color:var(--ink); background:var(--bg-subtle); }

/* form + card ------------------------------------------------ */
.dash-addemp .ae-form { display:flex; flex-direction:column; gap:24px; width:840px; max-width:100%; }
.dash-addemp .ae-card { display:flex; flex-direction:column; gap:18px; padding:32px 36px; border-radius:18px; background:#fff; border:1px solid var(--border); }
.dash-addemp .ae-sec { display:flex; align-items:center; gap:18px; }
.dash-addemp .ae-sec__num { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:12px; line-height:16px; letter-spacing:0.18em; color:var(--text-disabled); }
.dash-addemp .ae-sec__line { height:1px; flex:1 1 0; background:var(--cream-2); }
.dash-addemp .ae-sec__label { font-weight:600; font-size:14px; line-height:18px; letter-spacing:0.02em; color:var(--ink); }

/* fields ----------------------------------------------------- */
.dash-addemp .ae-grid { display:flex; flex-wrap:wrap; gap:16px 18px; }
.dash-addemp .ae-field { display:flex; flex-direction:column; gap:6px; flex:1 1 300px; min-width:0; }
.dash-addemp .ae-field__top { display:flex; align-items:baseline; justify-content:space-between; }
.dash-addemp .ae-field__label { font-weight:500; font-size:13px; line-height:16px; color:var(--ink); margin:0 !important; }
.dash-addemp .ae-field__tag { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-addemp .ae-help { font-weight:400; font-size:12px; line-height:16px; color:var(--text-disabled); }
.dash-addemp .ae-input, .dash-addemp .ae-select select {
  width:100%; height:48px; border-radius:10px; border:1px solid var(--border); background:#fff; padding:0 14px;
  font-family:"Roboto",sans-serif; font-size:15px; color:var(--ink); outline:0;
}
.dash-addemp .ae-input::placeholder { color:var(--text-disabled); }
.dash-addemp .ae-input:focus, .dash-addemp .ae-select select:focus { border-color:var(--ink); }
.dash-addemp .ae-select { position:relative; }
.dash-addemp .ae-select select { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:36px; cursor:pointer; }
.dash-addemp .ae-select::after { content:"\25BE"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-disabled); font-size:12px; pointer-events:none; }

/* autocomplete dropdown */
.dash-addemp .ae-field--job { position:relative; }
.dash-addemp .autocomplete-suggestions { position:absolute; top:72px; left:0; right:0; z-index:30; background:#fff; border:1px solid var(--border); border-radius:10px; margin-top:0; max-height:240px; overflow-y:auto; box-shadow:0 12px 30px rgba(0,0,0,0.12); display:none; }
.dash-addemp .autocomplete-suggestions .autocomplete-suggestion { padding:10px 14px; font-size:14px; color:var(--ink); cursor:pointer; }
.dash-addemp .autocomplete-suggestions .autocomplete-suggestion:hover { background:var(--cream); }

/* validation */
.dash-addemp .invalid-feedback { display:none; font-size:12px; line-height:16px; color:var(--danger); margin-top:2px; }
.dash-addemp .needs-validation.was-validated :invalid ~ .invalid-feedback { display:block; }
.dash-addemp .needs-validation.was-validated .ae-input:invalid,
.dash-addemp .needs-validation.was-validated .ae-select select:invalid { border-color:var(--danger); }
.dash-addemp .ae-error { display:inline-block; font-size:12px; line-height:16px; color:var(--danger); margin-top:2px; }

/* footer ----------------------------------------------------- */
.dash-addemp .ae-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; width:840px; max-width:100%; padding:2px 4px; }
.dash-addemp .ae-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; border:0; font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; line-height:18px; cursor:pointer; text-decoration:none !important; transition:background .15s; }
.dash-addemp .ae-btn--ghost { background:#fff; border:1px solid var(--ink); border-radius:999px; color:var(--ink); }
.dash-addemp .ae-btn--ghost:hover { background:var(--cream); color:var(--ink); }
.dash-addemp .ae-btn--save { background:var(--ink); color:var(--brand); }
.dash-addemp .ae-btn--save:hover { background:#1A1A1A; color:var(--brand); }

/* result modals (success / limit) ---------------------------- */
.ae-overlay { position:fixed; inset:0; z-index:9999; background:rgba(10,10,10,0.55); display:flex; align-items:center; justify-content:center; padding:24px; font-family:"Roboto",sans-serif; }
.ae-overlay .ae-modal { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:460px; background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:32px; box-shadow:0 24px 60px rgba(10,10,10,0.35); text-align:center; }
.ae-overlay .ae-modal__icon { width:52px; height:52px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
.ae-overlay .ae-modal__icon--lime { background:#C5F154; }
.ae-overlay .ae-modal__icon--ink { background:#0A0A0A; }
.ae-overlay .ae-modal__title { font-weight:800 !important; font-size:22px; line-height:28px; letter-spacing:-0.01em; color:#0A0A0A; margin:0 !important; }
.ae-overlay .ae-modal__text { font-weight:400; font-size:14px; line-height:22px; color:#6B7280; max-width:380px; }
.ae-overlay .ae-modal__actions { display:flex; justify-content:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.ae-overlay .ae-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; border:0; font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; line-height:18px; cursor:pointer; text-decoration:none !important; }
.ae-overlay .ae-btn--ghost { background:#fff; border:1px solid #0A0A0A; border-radius:999px; color:#0A0A0A; }
.ae-overlay .ae-btn--save { background:#0A0A0A; color:#C5F154; }

/* responsive ------------------------------------------------- */
@media (max-width:900px){
  .dash-addemp .ae-head, .dash-addemp .ae-form, .dash-addemp .ae-footer { width:100%; }
}
@media (max-width:680px){
  .dash-addemp .ae-head { flex-direction:column; }
  .dash-addemp .ae-grid .ae-field { flex:1 1 100%; }
  .dash-addemp .ae-board { padding:24px 16px 72px; }
  .dash-addemp h1.ae-title { font-size:30px !important; line-height:36px !important; }
}

/* ============================================================
   .dash-import — Bulk employee CSV import
   (company-import-employeeTest / route /importEmployeeTest)
   ============================================================ */
.dash-import {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --danger:#DC2626; --danger-soft:#FEF2F2;
  padding:0 !important;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
}
.dash-import, .dash-import *, .dash-import *::before, .dash-import *::after { box-sizing:border-box; }
.dash-import * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-import h1,.dash-import h2,.dash-import h3,.dash-import p,.dash-import ul,.dash-import li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important;
  text-transform:none !important; text-align:left !important; list-style:none !important;
}
.dash-import .di-board { display:flex; flex-direction:column; align-items:center; gap:24px; padding:32px 40px 96px; }
.dash-import .di-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; width:920px; max-width:100%; }
.dash-import .di-head__text { display:flex; flex-direction:column; gap:10px; min-width:0; }
.dash-import .di-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-import .di-chip {
  padding:3px 8px; border-radius:4px; background:var(--ink); color:var(--brand);
  font-family:"Roboto Mono","Roboto",monospace !important; font-weight:600; font-size:10px; line-height:14px;
  letter-spacing:.1em; text-transform:uppercase;
}
.dash-import .di-crumb {
  font-family:"Roboto Mono","Roboto",monospace !important; font-weight:500; font-size:11px; line-height:14px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
}
.dash-import h1.di-title {
  font-weight:800 !important; font-size:36px !important; line-height:40px !important;
  letter-spacing:-.02em !important; color:var(--ink);
}
.dash-import p.di-subtitle { max-width:620px; font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); }
.dash-import a.di-back {
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:9px 16px;
  flex:0 0 auto; border:1px solid var(--border); border-radius:999px; background:#fff;
  color:var(--text-soft); font-weight:500; font-size:14px; line-height:20px; text-decoration:none !important;
}
.dash-import a.di-back:hover { border-color:var(--ink); color:var(--ink); }
.dash-import a.di-back svg { flex:0 0 auto; }

.dash-import .di-form { display:flex; flex-direction:column; gap:20px; width:920px; max-width:100%; }
.dash-import .di-card { display:flex; flex-direction:column; gap:22px; padding:30px 34px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.dash-import .di-section-title { display:flex; align-items:center; gap:18px; }
.dash-import .di-section-title__num {
  font-family:"Roboto Mono","Roboto",monospace !important; font-weight:600; font-size:12px; line-height:16px;
  letter-spacing:.18em; color:var(--text-disabled);
}
.dash-import .di-section-title__line { height:1px; flex:1 1 0; background:var(--cream-2); }
.dash-import h2.di-section-title__label { font-weight:600 !important; font-size:14px !important; line-height:18px !important; color:var(--ink); }

.dash-import .di-prepare { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); gap:28px; align-items:start; }
.dash-import .di-prepare__copy { display:flex; flex-direction:column; gap:8px; min-width:0; }
.dash-import h3.di-card-title { font-weight:750 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-.01em !important; color:var(--ink); }
.dash-import p.di-card-copy { max-width:450px; font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-muted); }
.dash-import .di-resource-links { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.dash-import a.di-resource {
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid var(--border);
  border-radius:12px; color:var(--ink); text-decoration:none !important; transition:border-color .15s, background .15s;
}
.dash-import a.di-resource:hover { border-color:var(--ink); background:#FAFAF7; }
.dash-import .di-resource__icon {
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto;
  border-radius:10px; background:var(--cream); color:var(--ink);
}
.dash-import .di-resource > span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dash-import .di-resource strong { font-weight:600; font-size:13px; line-height:18px; color:var(--ink); }
.dash-import .di-resource small { font-weight:400; font-size:11px; line-height:16px; color:var(--text-muted); }

.dash-import .di-columns { display:flex; flex-direction:column; gap:14px; min-width:0; padding:20px; border-radius:14px; background:var(--ink); }
.dash-import .di-columns__eyebrow {
  font-family:"Roboto Mono","Roboto",monospace !important; font-weight:600; font-size:10px; line-height:14px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
}
.dash-import ul.di-columns__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.dash-import .di-columns__grid li {
  display:flex; align-items:center; gap:9px; min-width:0; padding:9px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.12); color:#fff; font-weight:500; font-size:12px; line-height:16px;
}
.dash-import .di-columns__grid li:nth-last-child(-n+2) { border-bottom:0; }
.dash-import .di-columns__grid li span {
  font-family:"Roboto Mono","Roboto",monospace !important; font-weight:500; font-size:9px; line-height:12px;
  letter-spacing:.08em; color:var(--brand);
}

.dash-import .di-dropzone {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; padding:42px 24px;
  border:1px dashed #D8CFB8; border-radius:14px; background:var(--cream); text-align:center; cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.dash-import .di-dropzone:hover,.dash-import .di-dropzone.is-dragging {
  border-color:var(--ink); background:#F0EBDC; box-shadow:inset 0 0 0 1px var(--ink);
}
.dash-import .di-dropzone.has-file { border-color:#A7C950; background:#F7FBEF; }
.dash-import .di-dropzone.is-invalid { border-color:var(--danger); background:var(--danger-soft); }
.dash-import .di-dropzone__icon {
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:2px;
  border:1px solid var(--border); border-radius:14px; background:#fff; color:var(--ink);
}
.dash-import .di-dropzone__title { font-weight:650; font-size:15px; line-height:20px; color:var(--ink); }
.dash-import .di-dropzone__hint { font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-import .di-dropzone__button {
  display:inline-flex; align-items:center; justify-content:center; margin-top:3px; padding:9px 16px;
  border:1px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink);
  font-weight:500; font-size:13px; line-height:18px;
}
.dash-import .di-dropzone__input {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.dash-import .di-dropzone:focus-within { outline:3px solid rgba(197,241,84,.7); outline-offset:3px; }
.dash-import .di-file {
  display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border);
  border-radius:12px; background:#FAFAF7;
}
.dash-import .di-file[hidden],.dash-import .di-error[hidden] { display:none !important; }
.dash-import .di-file__icon {
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto;
  border-radius:10px; background:var(--brand); color:var(--ink);
}
.dash-import .di-file__copy { display:flex; flex:1 1 auto; flex-direction:column; gap:2px; min-width:0; }
.dash-import .di-file__copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:13px; line-height:18px; color:var(--ink); }
.dash-import .di-file__copy small { font-weight:400; font-size:11px; line-height:16px; color:var(--text-muted); }
.dash-import .di-file__remove {
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto;
  padding:0; border:0; border-radius:9px; background:transparent; color:var(--text-muted); cursor:pointer;
}
.dash-import .di-file__remove:hover { background:#E5E7EB; color:var(--ink); }
.dash-import p.di-error { font-weight:500 !important; font-size:12px !important; line-height:18px !important; color:var(--danger); }

.dash-import .di-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2px 4px; }
.dash-import .di-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:11px 18px;
  border-radius:10px; font-weight:500; font-size:14px; line-height:18px; text-decoration:none !important;
  cursor:pointer; transition:background .15s, border-color .15s, opacity .15s;
}
.dash-import .di-btn--ghost { border:1px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink); }
.dash-import .di-btn--ghost:hover { background:var(--cream); color:var(--ink); }
.dash-import .di-btn--primary { border:0; background:var(--ink); color:var(--brand); }
.dash-import .di-btn--primary:hover:not(:disabled) { background:#1A1A1A; }
.dash-import .di-btn--primary:disabled { opacity:.38; cursor:not-allowed; }
.dash-import .di-btn--primary.is-loading { opacity:.7; }
.dash-import .di-btn:focus-visible,.dash-import .di-back:focus-visible,.dash-import .di-resource:focus-visible,.dash-import .di-file__remove:focus-visible {
  outline:3px solid rgba(197,241,84,.8); outline-offset:3px;
}

@media (max-width:900px) {
  .dash-import .di-head,.dash-import .di-form { width:100%; }
  .dash-import .di-prepare { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .dash-import .di-board { padding:24px 16px 72px; }
  .dash-import .di-head { flex-direction:column; }
  .dash-import h1.di-title { font-size:30px !important; line-height:36px !important; }
  .dash-import .di-card { padding:24px 20px; }
  .dash-import ul.di-columns__grid { grid-template-columns:1fr; }
  .dash-import .di-columns__grid li:nth-last-child(2) { border-bottom:1px solid rgba(255,255,255,.12); }
  .dash-import .di-actions { align-items:stretch; flex-direction:column-reverse; }
  .dash-import .di-btn { width:100%; }
  .dash-import .di-dropzone { padding:34px 18px; }
}

/* ============================================================
   .dash-period — Monthly / Quarterly / Yearly company performance
   (employer-{monthly,quarterly,yearly}-company-performance-test /
    routes /employer_{monthly,quarterly,yearly}CompanyRatingTestPage)
   ============================================================ */
.dash-period {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6; --inactive-dot:#D1D5DB;
  --warn-soft:#FEF9C3; --warn-deep:#92400E;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-period, .dash-period *, .dash-period *::before, .dash-period *::after { box-sizing:border-box; }
.dash-period * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-period h1,.dash-period h2,.dash-period h3,.dash-period h4,.dash-period h5,.dash-period h6,.dash-period p,.dash-period ul,.dash-period li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}

/* board + header --------------------------------------------- */
.dash-period .dp-board { display:flex; flex-direction:column; gap:28px; padding:8px 0 64px; }
.dash-period .dp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dash-period .dp-head__text { display:flex; flex-direction:column; gap:10px; max-width:620px; }
.dash-period .dp-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-period .dp-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-period .dp-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-period h1.dp-title { font-weight:800 !important; font-size:40px !important; line-height:46px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-period p.dp-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); }

/* period controls */
.dash-period .dp-controls { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.dash-period .dp-controls__label { width:100%; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); margin-bottom:-2px; }
.dash-period .dp-select { position:relative; }
.dash-period .dp-select select { appearance:none; -webkit-appearance:none; -moz-appearance:none; height:44px; padding:0 36px 0 14px; border-radius:10px; border:1px solid var(--border); background:#fff; font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; color:var(--ink); cursor:pointer; outline:0; }
.dash-period .dp-select select:focus { border-color:var(--ink); }
.dash-period .dp-select::after { content:"\25BE"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-disabled); font-size:12px; pointer-events:none; }
.dash-period button.dp-btn { padding:11px 18px; min-height:44px; border:0; border-radius:10px; background:var(--ink); color:var(--brand); font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; cursor:pointer; transition:background .15s; }
.dash-period button.dp-btn:hover { background:#1A1A1A; }

/* KPI cards -------------------------------------------------- */
.dash-period .dp-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dash-period .dp-kpi { display:flex; flex-direction:column; gap:16px; padding:22px 24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-period .dp-kpi__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dash-period .dp-kpi__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-period .dp-kpi__meta { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); text-align:right; }
.dash-period .dp-kpi__value, .dash-period h1.dp-kpi__value { font-weight:800 !important; font-size:44px !important; line-height:44px !important; letter-spacing:-0.02em !important; color:var(--ink); }

/* data row (breakdown + overview) ---------------------------- */
.dash-period .dp-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.dash-period .dp-card { display:flex; flex-direction:column; gap:18px; padding:24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-period .dp-card__head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-period .dp-card__heading { display:flex; flex-direction:column; gap:4px; }
.dash-period .dp-card__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-period h2.dp-card__title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-period .dp-muted { font-weight:400; font-size:14px; line-height:20px; color:var(--text-muted); }

/* breakdown metric tiles */
.dash-period .dp-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dash-period .dp-metric { display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:12px; background:var(--cream); }
.dash-period .dp-metric__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-period .dp-metric__value { font-weight:800; font-size:24px; line-height:26px; letter-spacing:-0.01em; color:var(--ink); }

/* department overview bars */
.dash-period .dp-depts { display:flex; flex-direction:column; gap:18px; }
.dash-period .dp-dept { display:flex; flex-direction:column; gap:8px; }
.dash-period .dp-dept__top { display:flex; align-items:center; gap:8px; }
.dash-period .dp-dept__tag { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.dash-period .dp-dept__tag--top { background:var(--brand); color:var(--ink); }
.dash-period .dp-dept__tag--low { color:var(--warn-deep); background:var(--warn-soft); }
.dash-period .dp-dept__name { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-period .dp-dept__score { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px; color:var(--ink); }
.dash-period .dp-dept__track { height:8px; border-radius:999px; background:var(--cream-2); overflow:hidden; }
.dash-period .dp-dept__fill { height:100%; border-radius:999px; background:var(--ink); }
.dash-period .dp-dept__fill--top { background:var(--brand); }
.dash-period .dp-dept__fill--low { background:var(--inactive-dot); }

/* table ------------------------------------------------------ */
.dash-period .dp-table-wrap { width:100%; overflow-x:auto; }
.dash-period table.dp-table { width:100% !important; border-collapse:collapse; }
.dash-period .dp-table th { font-family:"Roboto Mono",monospace !important; font-weight:500 !important; font-size:10px !important; letter-spacing:0.08em; color:var(--text-disabled); text-transform:uppercase !important; text-align:left !important; padding:0 16px 14px 0 !important; border-bottom:1px solid var(--border); white-space:nowrap; background:transparent !important; }
.dash-period .dp-table th.dp-th-right, .dash-period .dp-table td.dp-td-right { text-align:right !important; }
.dash-period .dp-table td { padding:16px 16px 16px 0 !important; border-bottom:1px solid var(--border); vertical-align:middle; background:transparent !important; }
.dash-period .dp-table tbody tr:last-child td { border-bottom:0; }
.dash-period .dp-cell-dept { display:flex; align-items:center; gap:12px; }
.dash-period .dp-avatar { flex:0 0 auto; width:38px; height:38px; border-radius:999px; background:var(--cream-2); display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto",sans-serif; font-weight:600; font-size:12px; color:var(--ink); }
.dash-period .dp-deptcell { display:flex; flex-direction:column; gap:1px; min-width:0; }
.dash-period .dp-deptcell__name { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }
.dash-period .dp-deptcell__sub { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-disabled); }
.dash-period .dp-cell { font-weight:400; font-size:14px; line-height:18px; color:var(--text-soft); }
.dash-period .dp-cell-strong { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }
.dash-period .dp-score { display:inline-flex; align-items:center; gap:8px; }
.dash-period .dp-stars { display:inline-flex; align-items:center; gap:2px; color:var(--ink); }
.dash-period .dp-stars svg { display:block; }
.dash-period .dp-score__num { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px; color:var(--ink); }
.dash-period .dp-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; }
.dash-period .dp-pill__dot { width:6px; height:6px; border-radius:999px; flex:0 0 auto; }
.dash-period .dp-pill--strong { background:var(--ink); color:var(--brand); }
.dash-period .dp-pill--strong .dp-pill__dot { background:var(--brand); }
.dash-period .dp-pill--moderate { background:#fff; border:1px solid var(--border); color:var(--text-muted); }
.dash-period .dp-pill--moderate .dp-pill__dot { background:var(--text-disabled); }
.dash-period .dp-pill--attention { background:var(--warn-soft); color:var(--warn-deep); }
.dash-period .dp-pill--attention .dp-pill__dot { background:var(--warn-deep); }
.dash-period .dp-error { font-weight:600; font-size:13px; color:#B91C1C; }

/* table empty block (cream dashed) */
.dash-period .dp-table-empty { }
.dash-period td.dp-table-empty-cell { padding:0 !important; border-bottom:0 !important; }
.dash-period .dp-empty-block { display:flex; align-items:center; gap:20px; padding:24px; border-radius:14px; background:var(--cream); border:1px dashed #D8CFB8; flex-wrap:wrap; text-align:left !important; }
.dash-period .dp-empty-block__icon { flex:0 0 auto; width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; }
.dash-period .dp-empty-block__copy { display:flex; flex-direction:column; gap:6px; flex:1 1 280px; }
.dash-period .dp-empty-block__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-period .dp-empty-block__title { font-weight:800; font-size:20px; line-height:26px; letter-spacing:-0.01em; color:var(--ink); }
.dash-period .dp-empty-block__body { font-weight:400; font-size:14px; line-height:22px; color:var(--text-muted); max-width:520px; }
.dash-period a.dp-empty-block__cta { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; background:var(--ink); color:var(--brand) !important; font-weight:600; font-size:14px; text-decoration:none !important; white-space:nowrap; }

/* dark guide card (full empty state) ------------------------- */
.dash-period .dp-guide { display:grid; grid-template-columns:1.6fr 1fr; background:var(--ink); border-radius:18px; overflow:hidden; }
.dash-period .dp-guide__left { display:flex; flex-direction:column; gap:16px; padding:32px; }
.dash-period .dp-guide__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-period h2.dp-guide__title { font-weight:800 !important; font-size:28px !important; line-height:34px !important; letter-spacing:-0.01em !important; color:#fff; }
.dash-period p.dp-guide__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:#9CA3AF; max-width:440px; }
.dash-period a.dp-guide__cta { align-self:flex-start; margin-top:4px; display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:10px; background:var(--brand); color:var(--ink) !important; font-weight:600; font-size:15px; text-decoration:none !important; }
.dash-period a.dp-guide__cta .dp-plus { font-size:17px; line-height:17px; }
.dash-period .dp-guide__right { display:flex; flex-direction:column; gap:22px; justify-content:center; padding:32px; border-left:1px solid rgba(255,255,255,0.08); }
.dash-period .dp-step { display:flex; align-items:flex-start; gap:12px; }
.dash-period .dp-step__num { flex:0 0 auto; width:24px; height:24px; border-radius:999px; border:1px solid rgba(255,255,255,0.25); display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; color:#fff; }
.dash-period .dp-step__num--on { background:var(--brand); border-color:var(--brand); color:var(--ink); }
.dash-period .dp-step__txt { display:flex; flex-direction:column; gap:2px; }
.dash-period .dp-step__txt strong { font-weight:600; font-size:14px; line-height:18px; color:#fff; }
.dash-period .dp-step__txt span { font-size:13px; line-height:18px; color:#9CA3AF; }

/* responsive ------------------------------------------------- */
@media (max-width:1100px){
  .dash-period .dp-row { grid-template-columns:1fr; }
  .dash-period .dp-kpis { grid-template-columns:1fr; }
}
@media (max-width:760px){
  .dash-period h1.dp-title { font-size:30px !important; line-height:36px !important; }
  .dash-period .dp-guide { grid-template-columns:1fr; }
  .dash-period .dp-guide__right { border-left:0; border-top:1px solid rgba(255,255,255,0.08); }
  .dash-period .dp-metrics { grid-template-columns:1fr; }
  .dash-period .dp-empty-block { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   .dash-lib — Access Library (review-form-templates-test /
   route /reviewFormTemplatesTest) + #formModal / #importPopup /
   #css-only-modals (View / Import-confirm / Success)
   ============================================================ */
.dash-lib {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-lib, .dash-lib *, .dash-lib *::before, .dash-lib *::after { box-sizing:border-box; }
.dash-lib * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-lib h1,.dash-lib h2,.dash-lib h3,.dash-lib h4,.dash-lib h5,.dash-lib h6,.dash-lib p,.dash-lib ul,.dash-lib li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}

/* board + header --------------------------------------------- */
.dash-lib .lib-board { display:flex; flex-direction:column; gap:28px; padding:8px 0 64px; align-items:center; }
.dash-lib .lib-head { display:flex; flex-direction:column; gap:10px; width:1080px; max-width:100%; }
.dash-lib .lib-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-lib .lib-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-lib .lib-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-lib h1.lib-title { font-weight:800 !important; font-size:40px !important; line-height:46px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-lib p.lib-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); max-width:640px; }

/* search */
.dash-lib .lib-search { display:flex; align-items:center; gap:10px; width:1080px; max-width:100%; height:56px; padding:0 18px; border-radius:14px; background:#fff; border:1px solid var(--border); }
.dash-lib .lib-search svg { flex:0 0 auto; }
.dash-lib .lib-search input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-weight:400; font-size:15px; color:var(--ink); }
.dash-lib .lib-search input::placeholder { color:var(--text-disabled); }

/* featured section */
.dash-lib .lib-section { display:flex; flex-direction:column; gap:18px; width:1080px; max-width:100%; }
.dash-lib .lib-section__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.dash-lib h2.lib-section__title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-lib .lib-section__count { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }

/* card grid (styles the EXISTING card markup classes) */
.dash-lib .form-templates { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:0 !important; }
.dash-lib .template-card-wrapper { min-width:0; width:auto !important; max-width:none !important; padding:0 !important; }
.dash-lib .form-card { position:relative; display:flex !important; flex-direction:column; height:100%; background:#fff !important; border:1px solid var(--border) !important; border-radius:18px !important; overflow:hidden; box-shadow:none !important; }
.dash-lib .form-card .featured-badge { position:absolute; top:14px; right:14px; z-index:2; padding:3px 10px; border-radius:999px; background:var(--brand); color:var(--ink); font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; }
.dash-lib .form-card img.img-top { width:100%; height:128px; object-fit:cover; object-position:center; background:var(--bg-subtle); border-bottom:1px solid var(--border); display:block; }

/* ── M4, 2026-07-31 ────────────────────────────────────────────────────────
   Card header. All nine cards used the SAME images/testIcons/per-riv.svg — an
   87 KB SVG wrapping a base64 stock photo, the same trick as the profile.svg
   avatar. It was decorative, identical everywhere, and dressed nine different
   industries in one stock image. There is no real per-industry artwork, so the
   honest treatment is one on-palette band on every card rather than nine
   invented ones. Supply real art and this becomes an <img> again. */
.dash-lib .lib-card__thumb {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 72px;
  padding: 0 18px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.dash-lib .lib-card__thumb-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--brand);
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.dash-lib .lib-card__thumb-label {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* Card meta row: the left-hand cell held "2,543 downloads" / "Used 2 days ago",
   all nine hardcoded with no data source behind them. With the cell gone the
   row holds only the View button, so it right-aligns instead of splitting. */
.dash-lib .form-card .d-flex.justify-content-sm-between.mt-3 { justify-content: flex-end !important; }

/* Preview-modal rating rows. 53 of them, each five raw ★ glyphs — off-palette,
   and a star is the exact widget design.md §11 replaced. These are BLANK form
   previews (nothing is selected), so they become the empty state of the
   .ink-score meter. Done in CSS: the markup is 53 identical .rating blocks, so
   no view edit is needed and every hook survives. */
.dash-lib .rating { display: inline-flex; align-items: center; gap: 4px; }
.dash-lib .rating span {
  display: inline-block;
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: #E5E7EB;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
}
.dash-lib .form-card .featured-videos-sec { display:flex; flex-direction:column; gap:14px; padding:20px; flex:1 1 auto; }
.dash-lib .form-card .onboard-temp { display:flex !important; flex-direction:column; align-items:flex-start !important; gap:8px; }
.dash-lib .form-card .onboard-temp h5 { font-weight:700 !important; font-size:16px !important; line-height:22px !important; color:var(--ink); }
.dash-lib .form-card .emp-tag { display:inline-flex; align-items:center; width:auto !important; height:auto !important; padding:3px 8px !important; border-radius:6px !important; background:var(--cream-2) !important; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted) !important; }
.dash-lib .form-card .featured-videos-sec .d-flex.mt-3 { display:flex !important; flex-direction:column; align-items:stretch !important; gap:12px; margin-top:auto !important; }
.dash-lib .form-card .text { display:inline-flex; align-items:center; gap:6px; font-weight:400; font-size:13px; line-height:18px; color:var(--text-muted); }
.dash-lib .form-card .text svg path { fill:var(--text-muted) !important; }
.dash-lib .form-card .bttn.small_btn { width:100%; margin-top:0 !important; padding:11px 18px !important; border:0 !important; border-radius:10px !important; background:var(--ink) !important; color:var(--brand) !important; font-weight:600 !important; font-size:14px !important; text-align:center; cursor:pointer; }
.dash-lib .form-card .bttn.small_btn:hover { background:#1A1A1A !important; color:var(--brand) !important; }

/* pagination */
.dash-lib .lib-pager-row { display:flex; justify-content:center; width:1080px; max-width:100%; }
.dash-lib ul.pagination { display:inline-flex; align-items:center; gap:8px; margin:0 !important; padding:0 !important; }
.dash-lib ul.pagination .page-item { list-style:none !important; }
.dash-lib ul.pagination .page-link { display:inline-flex; align-items:center; gap:4px; min-width:36px; height:36px; padding:0 14px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text-soft); cursor:pointer; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px; }
.dash-lib ul.pagination .page-item.active .page-link { background:var(--ink); color:var(--brand); border-color:var(--ink); }
.dash-lib ul.pagination .page-item.disabled .page-link { color:var(--text-disabled); cursor:default; opacity:.6; }

/* empty state */
.dash-lib .lib-empty { display:flex; flex-direction:column; align-items:center; gap:10px; width:1080px; max-width:100%; text-align:center !important; padding:64px 24px; border-radius:18px; background:var(--cream); border:1px dashed #D8CFB8; }
.dash-lib .lib-empty__icon { width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.dash-lib .lib-empty__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-lib h3.lib-empty__title { font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em !important; color:var(--ink); text-align:center !important; }
.dash-lib p.lib-empty__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-muted); max-width:440px; text-align:center !important; }
.dash-lib button.lib-empty__btn { margin-top:8px; padding:11px 18px; border:0; border-radius:10px; background:var(--ink); color:var(--brand); font-weight:600; font-size:14px; cursor:pointer; }

/* ===== View modal (#formModal — legacy injected content restyled) ===== */
#formModal { position:fixed !important; inset:0; z-index:1080; overflow-y:auto; }
#formModal .modal-dialog { max-width:620px; width:100%; margin:56px auto; padding:0 16px; }
#formModal .modal-content { background:#fff; border:1px solid #E5E7EB; border-radius:18px; box-shadow:0 24px 60px rgba(10,10,10,0.35); overflow:hidden; font-family:"Roboto",sans-serif; }
#formModal #formContainer { display:block; }
#formModal .modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 28px; border-bottom:1px solid #F0EBDC; }
#formModal .modal-header h2 { font-weight:800; font-size:22px; line-height:26px; letter-spacing:-0.01em; color:#0A0A0A; margin:0; }
#formModal .modal-header .btn-close { flex:0 0 auto; width:32px; height:32px; border-radius:999px; background-color:#F3F4F6; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; line-height:1; color:#6B7280; opacity:1; }
#formModal .modal-body { padding:24px 28px; max-height:60vh; overflow-y:auto; }
#formModal .form-section > h3 { font-family:"Roboto Mono",monospace; font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#9CA3AF; margin:0 0 14px; }
#formModal .form-inner, #formModal .form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
#formModal .form-inner > label, #formModal .form-group > label { font-weight:500; font-size:14px; line-height:20px; color:#0A0A0A; }
#formModal .modal-body input.form-control, #formModal .modal-body select.form-control, #formModal .modal-body textarea.form-control { width:100%; min-height:44px; border:1px solid #E5E7EB; border-radius:10px; padding:10px 14px; font-size:14px; color:#9CA3AF; background:#FAFAF7; }
#formModal .rating { display:inline-flex; gap:4px; font-size:22px; line-height:1; }
#formModal .rating span { color:#0A0A0A; cursor:default; }
#formModal .modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:16px 28px; border-top:1px solid #F0EBDC; }
#formModal .import-button { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:0; border-radius:10px; background:#0A0A0A; color:#C5F154; font-weight:600; font-size:14px; cursor:pointer; }

/* ===== Import confirm dialog (#importPopup) ===== */
#importPopup { position:fixed; inset:0; z-index:1090; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(10,10,10,0.45); font-family:"Roboto",sans-serif; }
#importPopup .lib-confirm { display:flex; flex-direction:column; gap:14px; width:100%; max-width:440px; background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:28px; box-shadow:0 24px 60px rgba(10,10,10,0.35); position:relative; }
#importPopup .lib-confirm__close { position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:999px; background:#F3F4F6; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#6B7280; font-size:18px; line-height:1; }
#importPopup .lib-confirm__badge { width:46px; height:46px; border-radius:999px; background:#C5F154; display:inline-flex; align-items:center; justify-content:center; }
#importPopup h3.lib-confirm__title { font-weight:800; font-size:20px; line-height:26px; letter-spacing:-0.01em; color:#0A0A0A; margin:0; }
#importPopup p.lib-confirm__body { font-weight:400; font-size:14px; line-height:22px; color:#6B7280; margin:0; }
#importPopup .lib-confirm__note { display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:10px; background:#F5F1E8; font-size:13px; color:#4B5563; }
#importPopup .lib-confirm__actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:4px; }
#importPopup .lib-btn-ghost { padding:11px 18px; border:1px solid #0A0A0A; border-radius:999px; background:#fff; color:#0A0A0A; font-weight:500; font-size:14px; cursor:pointer; }
#importPopup .lib-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:0; border-radius:10px; background:#0A0A0A; color:#C5F154; font-weight:600; font-size:14px; cursor:pointer; }

/* ===== Success modal (#css-only-modals) ===== */
#css-only-modals.lib-success { position:fixed !important; inset:0; z-index:1095; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(10,10,10,0.55); font-family:"Roboto",sans-serif; }
#css-only-modals.lib-success .css-only-modal-check, #css-only-modals.lib-success #screen-shade { display:none; }
#css-only-modals.lib-success .lib-success__card { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:440px; background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:32px; box-shadow:0 24px 60px rgba(10,10,10,0.35); text-align:center; }
#css-only-modals.lib-success .lib-success__badge { width:52px; height:52px; border-radius:999px; background:#C5F154; display:inline-flex; align-items:center; justify-content:center; }
#css-only-modals.lib-success h5 { font-weight:800; font-size:22px; line-height:28px; letter-spacing:-0.01em; color:#0A0A0A; margin:0; }
#css-only-modals.lib-success p { font-weight:400; font-size:14px; line-height:22px; color:#6B7280; margin:0; max-width:360px; }
#css-only-modals.lib-success .lib-success__actions { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
#css-only-modals.lib-success .lib-btn-ghost { padding:11px 18px; border:1px solid #0A0A0A; border-radius:999px; background:#fff; color:#0A0A0A; font-weight:500; font-size:14px; cursor:pointer; text-decoration:none !important; }
#css-only-modals.lib-success .lib-btn-primary { padding:11px 18px; border:0; border-radius:10px; background:#0A0A0A; color:#C5F154; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none !important; }

/* responsive ------------------------------------------------- */
@media (max-width:1100px){ .dash-lib .lib-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
  .dash-lib h1.lib-title { font-size:30px !important; line-height:36px !important; }
  .dash-lib .lib-grid { grid-template-columns:1fr; }
}

/* Access Library import toast (global — appended to <body>) ---- */
.lib-toast { position:fixed; top:24px; right:24px; z-index:2000; display:flex; align-items:flex-start; gap:12px; width:360px; max-width:calc(100vw - 32px); padding:14px 16px; border-radius:14px; background:#fff; border:1px solid #E5E7EB; box-shadow:0 16px 40px rgba(10,10,10,0.18); font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; transform:translateX(120%); opacity:0; transition:transform .25s ease, opacity .25s ease; }
.lib-toast.is-in { transform:translateX(0); opacity:1; }
.lib-toast__icon { flex:0 0 auto; width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; line-height:1; }
.lib-toast--success .lib-toast__icon { background:#C5F154; color:#0A0A0A; }
.lib-toast--error .lib-toast__icon { background:#DC2626; color:#FFFFFF; }
.lib-toast__text { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.lib-toast__text strong { font-weight:700; font-size:14px; line-height:18px; color:#0A0A0A; }
.lib-toast__text span { font-weight:400; font-size:13px; line-height:18px; color:#6B7280; }
.lib-toast__close { flex:0 0 auto; border:0; background:transparent; color:#9CA3AF; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.lib-toast__close:hover { color:#0A0A0A; }

/* ============================================================
   .dash-customreview — Custom Review manual BUILDER
   (custom-review-form-new-test2 / route /employer_customReviewTest)
   + segmented mode toggle, #manualForm builder, #aiGoalSelection,
   goal popup, #modal preview, success modal. Toast = global (body).
   ============================================================ */
.dash-customreview {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6; --line:#D1D5DB;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-customreview, .dash-customreview *, .dash-customreview *::before, .dash-customreview *::after { box-sizing:border-box; }
.dash-customreview * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-customreview h1,.dash-customreview h2,.dash-customreview h3,.dash-customreview h4,.dash-customreview h5,.dash-customreview h6,.dash-customreview p,.dash-customreview ul,.dash-customreview li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}
.dash-customreview button { font-family:inherit; cursor:pointer; }
.dash-customreview input, .dash-customreview select, .dash-customreview textarea { font-family:inherit; }

/* board + header --------------------------------------------- */
.dash-customreview .cr-board { display:flex; flex-direction:column; gap:24px; padding:8px 0 64px; align-items:center; }
.dash-customreview .cr-head { display:flex; flex-direction:column; gap:10px; width:100%; }
.dash-customreview .cr-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-customreview .cr-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-customreview .cr-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-customreview h1.cr-title { font-weight:800 !important; font-size:40px !important; line-height:44px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-customreview p.cr-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); max-width:560px; }

/* mode toggle (segmented) ------------------------------------ */
.dash-customreview .cr-modes-row { display:flex; justify-content:flex-start; width:100%; }
.dash-customreview .cr-modes { display:inline-flex; background:var(--cream); border-radius:10px; padding:3px; gap:3px; }
.dash-customreview .cr-mode { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border:0; background:transparent; border-radius:7px; font-size:13px; font-weight:500; line-height:18px; color:var(--text-muted); }
.dash-customreview .cr-mode svg { flex:0 0 auto; }
.dash-customreview .cr-mode--active { background:var(--ink); color:var(--brand); font-weight:600; }

/* manual builder shell --------------------------------------- */
.dash-customreview .cr-manual { display:flex; flex-direction:column; gap:20px; width:100%; }
.dash-customreview .cr-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:32px 36px; display:flex; flex-direction:column; gap:22px; }

/* section header --------------------------------------------- */
.dash-customreview .cr-section { display:flex; align-items:center; gap:18px; }
.dash-customreview .cr-section--gap { padding-top:6px; }
.dash-customreview .cr-section__num { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:12px; line-height:16px; letter-spacing:0.18em; color:var(--text-disabled); }
.dash-customreview .cr-section__line { flex:1 1 auto; height:1px; background:var(--cream-2); }
.dash-customreview .cr-section__label { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }

/* template title field --------------------------------------- */
.dash-customreview .cr-fieldrow { display:flex; flex-direction:column; gap:6px; }
.dash-customreview .cr-fieldrow__top { display:flex; align-items:center; justify-content:space-between; }
.dash-customreview .cr-label { font-weight:500; font-size:13px; line-height:16px; color:var(--ink); margin:0 !important; }
.dash-customreview .cr-required { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-customreview .cr-input { width:100%; height:48px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:15px; line-height:18px; color:var(--ink); outline:none; }
.dash-customreview .cr-input::placeholder { color:var(--text-disabled); }
.dash-customreview .cr-input:focus { border-color:var(--ink); }

/* add-a-field palette ---------------------------------------- */
.dash-customreview .cr-palette-wrap { display:flex; flex-direction:column; gap:10px; }
.dash-customreview .cr-palette__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:14px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-customreview .cr-palette { display:flex; gap:12px; }
.dash-customreview .cr-type-btn { flex:1 1 0; min-width:0; height:48px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:14px; font-weight:500; line-height:18px; color:var(--ink); }
.dash-customreview .cr-type-btn svg { flex:0 0 auto; }
.dash-customreview .cr-type-btn:hover { border-color:var(--ink); background:var(--bg-subtle); }

/* fields list + empty state ---------------------------------- */
.dash-customreview .cr-fields { display:flex; flex-direction:column; gap:16px; }
.dash-customreview .cr-empty { display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--cream); border:1px dashed #D8CFB8; border-radius:14px; padding:40px 32px; text-align:center; }
.dash-customreview .cr-empty__badge { width:44px; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); border-radius:999px; }
.dash-customreview .cr-empty__title { font-weight:700 !important; font-size:15px; line-height:20px; color:var(--ink); }
.dash-customreview .cr-empty__body { font-weight:400; font-size:13px; line-height:20px; color:var(--text-muted); max-width:380px; }

/* field block (built by addTextField/Dropdown/Checkbox/Rating) */
.dash-customreview .cr-field { background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.dash-customreview .cr-field__head { display:flex; align-items:center; justify-content:space-between; }
.dash-customreview .cr-field__chip { display:inline-flex; align-items:center; gap:6px; background:var(--cream-2); border-radius:6px; padding:4px 10px; }
.dash-customreview .cr-field__chip span { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); }
.dash-customreview .cr-field__chip svg { flex:0 0 auto; }
.dash-customreview .cr-field__remove { width:30px; height:30px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:#fff; }
.dash-customreview .cr-field__remove:hover { border-color:var(--ink); }
.dash-customreview .cr-field__remove svg { flex:0 0 auto; }
.dash-customreview .cr-field__labelrow { display:block; }
.dash-customreview .cr-field__label { width:100%; height:46px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:14px; font-weight:500; line-height:18px; color:var(--ink); outline:none; }
.dash-customreview .cr-field__label::placeholder { color:var(--text-disabled); font-weight:400; }
.dash-customreview .cr-field__label:focus { border-color:var(--ink); }
.dash-customreview .cr-field__group { display:flex; flex-direction:column; gap:8px; }
.dash-customreview .cr-field__sub-label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-customreview .cr-options { display:flex; flex-direction:column; gap:8px; }
.dash-customreview .cr-options .cr-opt, .dash-customreview .cr-options input { width:100%; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:8px; background:#fff; font-size:14px; line-height:18px; color:var(--ink); outline:none; }
.dash-customreview .cr-options input::placeholder { color:var(--text-disabled); }
.dash-customreview .cr-options input:focus { border-color:var(--ink); }
.dash-customreview .cr-add-option { display:inline-flex; align-items:center; gap:6px; width:fit-content; border:0; background:transparent; padding:4px 2px; font-size:13px; font-weight:500; line-height:16px; color:var(--ink); }
.dash-customreview .cr-add-option svg { flex:0 0 auto; }
.dash-customreview .cr-field__preview { display:flex; flex-direction:column; gap:8px; }
.dash-customreview .cr-field__preview-input { width:100%; height:44px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg-subtle); font-size:14px; line-height:18px; color:var(--text-disabled); }
.dash-customreview .cr-field__preview-select { position:relative; display:flex; align-items:center; justify-content:space-between; height:44px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg-subtle); }
.dash-customreview .cr-field__preview-select select { flex:1 1 auto; border:0; background:transparent; outline:none; -webkit-appearance:none; appearance:none; font-size:14px; line-height:18px; color:var(--text-disabled); }
.dash-customreview .cr-field__preview-select svg { flex:0 0 auto; }
.dash-customreview .cr-check-preview { display:flex; flex-direction:column; gap:10px; }
.dash-customreview .cr-check-row { display:flex; align-items:center; gap:10px; font-size:14px; line-height:18px; color:var(--text-disabled); }
.dash-customreview .cr-check-box { width:18px; height:18px; flex:0 0 auto; border:1px solid var(--line); border-radius:5px; background:#fff; }
.dash-customreview .cr-stars { display:flex; align-items:center; gap:8px; }
.dash-customreview .cr-stars svg { flex:0 0 auto; }

/* footer ----------------------------------------------------- */
.dash-customreview .cr-footer { display:flex; align-items:center; justify-content:space-between; width:100%; }
.dash-customreview .cr-btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--ink); border-radius:999px; background:transparent; font-size:14px; font-weight:500; line-height:18px; color:var(--ink); }
.dash-customreview .cr-btn-ghost:hover { background:var(--cream); }
.dash-customreview .cr-btn-ghost svg { flex:0 0 auto; }
.dash-customreview .cr-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:0; border-radius:10px; background:var(--ink); font-size:14px; font-weight:500; line-height:18px; color:var(--brand); }
.dash-customreview .cr-btn-primary:hover { background:#1A1A1A; }
.dash-customreview .cr-btn-primary svg { flex:0 0 auto; }
.dash-customreview .cr-btn-primary.is-busy { opacity:0.65; pointer-events:none; }

/* AI mode (lightly themed) ----------------------------------- */
.dash-customreview #manualForm { display:flex; }
.dash-customreview #aiGoalSelection { display:none; flex-direction:column; gap:18px; position:relative; width:100%; background:#fff; border:1px solid var(--border); border-radius:18px; padding:32px 36px; }
.dash-customreview .cr-ai__overlay { display:none; position:absolute; inset:0; z-index:5; align-items:center; justify-content:center; background:rgba(255,255,255,0.72); border-radius:18px; }
.dash-customreview .cr-spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--ink); border-radius:999px; animation:crSpin 0.8s linear infinite; }
.dash-customreview .cr-ai__head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dash-customreview .cr-ai__heading { display:flex; flex-direction:column; gap:6px; }
.dash-customreview .cr-ai__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-customreview h2.cr-ai__title { font-weight:800 !important; font-size:22px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-customreview p.cr-ai__sub { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); }
.dash-customreview .cr-goal-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.dash-customreview .goal-card { display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px 20px; cursor:pointer; transition:border-color 0.15s ease; }
.dash-customreview .goal-card:hover { border-color:var(--ink); }
.dash-customreview h4.goal-card__title { font-weight:700 !important; font-size:15px !important; line-height:20px !important; color:var(--ink); }
.dash-customreview p.goal-card__desc { font-weight:400 !important; font-size:13px !important; line-height:20px !important; color:var(--text-muted); }
.dash-customreview .goal-card__foot { display:flex; align-items:center; justify-content:space-between; }
.dash-customreview .goal-card__count { font-size:12px; font-weight:500; line-height:16px; color:var(--text-muted); }
.dash-customreview .goal-card__foot svg { flex:0 0 auto; }

/* goal detail popup ------------------------------------------ */
.dash-customreview #popupOverlay { display:none; position:fixed; inset:0; z-index:1000; background:rgba(10,10,10,0.55); }
.dash-customreview #goalPopup { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1001; width:90%; max-width:480px; max-height:84vh; overflow:auto; background:#fff; border-radius:18px; padding:28px; flex-direction:column; gap:12px; box-shadow:0 24px 60px rgba(10,10,10,0.22); }
.dash-customreview #goalPopup h3#popupTitle { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-customreview #goalPopup p#popupDescription { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); }
.dash-customreview .cr-popup__label { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-customreview .cr-popup__list ul { display:flex; flex-direction:column; gap:8px; }
.dash-customreview .cr-popup__list li { position:relative; padding-left:18px !important; font-size:13px; line-height:20px; color:var(--text-soft); }
.dash-customreview .cr-popup__list li::before { content:""; position:absolute; left:2px; top:8px; width:5px; height:5px; border-radius:999px; background:var(--brand); }
.dash-customreview .cr-popup__actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:4px; }

/* preview modal (#modal) ------------------------------------- */
.dash-customreview #modal, .dash-customreview #crSuccessModal { display:none; position:fixed; inset:0; z-index:1000; background:rgba(10,10,10,0.55); overflow:auto; padding:24px; }
.dash-customreview .cr-modal__card { margin:5vh auto; width:100%; max-width:640px; background:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(10,10,10,0.35); overflow:hidden; }
.dash-customreview .cr-modal__head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--cream-2); }
.dash-customreview .cr-modal__head h2#preview-title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-customreview .cr-modal__close { border:0; background:transparent; font-size:24px; line-height:1; color:var(--text-muted); }
.dash-customreview .cr-modal__close:hover { color:var(--ink); }
.dash-customreview .cr-modal__body { padding:8px 24px 24px; max-height:70vh; overflow:auto; }
.dash-customreview #preview-fields { display:flex; flex-direction:column; }
.dash-customreview .cr-pv-group { display:flex; align-items:baseline; gap:10px; padding:18px 0 8px; border-bottom:1px solid var(--cream-2); }
.dash-customreview .cr-pv-group:first-child { padding-top:4px; }
.dash-customreview .cr-pv-group__title { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); }
.dash-customreview .cr-pv-group__sub { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-customreview .cr-pv-note { margin:12px 0; padding:14px 16px; background:var(--cream); border:1px dashed #D8CFB8; border-radius:10px; font-size:13px; line-height:20px; color:var(--text-muted); }
.dash-customreview .cr-pv-field { display:flex; flex-direction:column; gap:10px; padding:16px 0; border-bottom:1px solid var(--cream-2); }
.dash-customreview .cr-pv-field:last-child { border-bottom:0; }
.dash-customreview .cr-pv-field__label { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }
.dash-customreview .cr-pv-input, .dash-customreview .cr-pv-textarea, .dash-customreview .cr-pv-select { width:100%; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:14px; line-height:18px; color:var(--ink); outline:none; }
.dash-customreview .cr-pv-input { height:44px; padding:0 14px; }
.dash-customreview .cr-pv-textarea { padding:12px 14px; resize:vertical; min-height:76px; }
.dash-customreview .cr-pv-input::placeholder, .dash-customreview .cr-pv-textarea::placeholder { color:var(--text-disabled); }
.dash-customreview .cr-pv-select { height:44px; padding:0 40px 0 14px; -webkit-appearance:none; appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.dash-customreview .cr-pv-checks { display:flex; flex-direction:column; gap:10px; }
.dash-customreview .cr-pv-check { display:flex; align-items:center; gap:10px; font-size:14px; line-height:18px; color:var(--text-soft); }
.dash-customreview .cr-pv-check input { width:18px; height:18px; flex:0 0 auto; accent-color:var(--ink); margin:0; }
.dash-customreview .cr-pv-muted { font-size:13px; line-height:18px; color:var(--text-disabled); }
.dash-customreview .cr-pv-stars { display:flex; align-items:center; gap:8px; }
.dash-customreview .cr-pv-stars svg { width:24px; height:24px; flex:0 0 auto; }

/* success modal ---------------------------------------------- */
.dash-customreview #crSuccessModal { align-items:center; justify-content:center; }
.dash-customreview .cr-success__card { width:100%; max-width:420px; background:#fff; border-radius:18px; padding:32px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; box-shadow:0 24px 60px rgba(10,10,10,0.35); }
.dash-customreview .cr-success__badge { width:56px; height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--brand); border-radius:999px; }
.dash-customreview h3.cr-success__title { font-weight:800 !important; font-size:22px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-customreview p.cr-success__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); }
.dash-customreview .cr-success__actions { display:flex; align-items:center; justify-content:center; gap:12px; padding-top:8px; }

/* animations ------------------------------------------------- */
.dash-customreview .slide-up { animation:crSlideUp 0.25s ease-out; }
@keyframes crSlideUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes crFadeOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-8px); } }
@keyframes crSpin { to { transform:rotate(360deg); } }

/* responsive ------------------------------------------------- */
@media (max-width:1140px) {
  .dash-customreview .cr-head, .dash-customreview .cr-manual, .dash-customreview .cr-footer, .dash-customreview #aiGoalSelection { width:100%; }
  .dash-customreview .cr-palette { flex-wrap:wrap; }
  .dash-customreview .cr-type-btn { flex:1 1 calc(50% - 6px); }
  .dash-customreview .cr-goal-list { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .dash-customreview .cr-card { padding:24px; }
  .dash-customreview h1.cr-title { font-size:30px !important; line-height:34px !important; }
}

/* global toast (mounted on <body>, outside .dash-customreview) */
.cr-toast { position:fixed; top:24px; right:24px; z-index:2000; display:flex; align-items:flex-start; gap:12px; min-width:300px; max-width:380px; padding:14px 16px; background:#fff; border:1px solid #E5E7EB; border-radius:14px; box-shadow:0 16px 40px rgba(10,10,10,0.18); transition:opacity 0.3s ease; font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.cr-toast__icon { flex:0 0 auto; width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; line-height:1; }
.cr-toast--success .cr-toast__icon { background:#C5F154; color:#0A0A0A; }
.cr-toast--error .cr-toast__icon { background:#DC2626; color:#FFFFFF; }
.cr-toast__text { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.cr-toast__text strong { font-weight:700; font-size:14px; line-height:18px; color:#0A0A0A; }
.cr-toast__text span { font-weight:400; font-size:13px; line-height:18px; color:#6B7280; }
.cr-toast__close { flex:0 0 auto; border:0; background:transparent; color:#9CA3AF; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.cr-toast__close:hover { color:#0A0A0A; }

/* ============================================================
   .dash-browsetpl — Browse Review Forms / "Review Templates"
   (browse-review-formsTest / route /browseReviewFormsTest)
   header + 4 KPI cards + 5 filter tabs + saved-form card grid
   + client pagination + empty state. openForm → /viewReviewForm.
   ============================================================ */
.dash-browsetpl {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-browsetpl, .dash-browsetpl *, .dash-browsetpl *::before, .dash-browsetpl *::after { box-sizing:border-box; }
.dash-browsetpl * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-browsetpl h1,.dash-browsetpl h2,.dash-browsetpl h3,.dash-browsetpl h4,.dash-browsetpl h5,.dash-browsetpl h6,.dash-browsetpl p,.dash-browsetpl ul,.dash-browsetpl li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}
.dash-browsetpl a { text-decoration:none; }

/* board + header --------------------------------------------- */
.dash-browsetpl .bt-board { display:flex; flex-direction:column; gap:24px; padding:8px 28px 64px; width:100%; }
.dash-browsetpl .bt-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; width:100%; }
.dash-browsetpl .bt-head__text { display:flex; flex-direction:column; gap:10px; max-width:620px; }
.dash-browsetpl .bt-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-browsetpl .bt-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-browsetpl .bt-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-browsetpl h1.bt-title { font-weight:800 !important; font-size:40px !important; line-height:44px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-browsetpl p.bt-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); max-width:560px; }
.dash-browsetpl .bt-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.dash-browsetpl .bt-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; background:var(--ink); border-radius:10px; font-size:14px; font-weight:500; line-height:18px; color:var(--brand); }
.dash-browsetpl .bt-btn-primary:hover { background:#1A1A1A; color:var(--brand); }
.dash-browsetpl .bt-btn-primary__plus { font-size:16px; line-height:18px; color:var(--brand); }
.dash-browsetpl .bt-btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; background:transparent; border:1px solid var(--ink); border-radius:999px; font-size:14px; font-weight:500; line-height:18px; color:var(--ink); }
.dash-browsetpl .bt-btn-ghost:hover { background:var(--cream); color:var(--ink); }
.dash-browsetpl .bt-btn-ghost svg { flex:0 0 auto; }

/* KPI cards -------------------------------------------------- */
.dash-browsetpl .bt-kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; width:100%; }
.dash-browsetpl .bt-kpi { display:flex; flex-direction:column; gap:16px; min-width:0; padding:22px 24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-browsetpl .bt-kpi__top { display:flex; align-items:center; justify-content:space-between; }
.dash-browsetpl .bt-kpi__label { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-browsetpl .bt-kpi__icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 auto; background:var(--cream-2); border-radius:8px; }
.dash-browsetpl .bt-kpi__value-row { display:flex; align-items:baseline; gap:10px; }
.dash-browsetpl .bt-kpi__value { font-weight:800; font-size:44px; line-height:44px; letter-spacing:-0.02em; color:var(--ink); }
.dash-browsetpl .bt-kpi__delta { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; background:var(--cream); border-radius:999px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; color:var(--text-muted); }
.dash-browsetpl .bt-kpi__delta svg { flex:0 0 auto; }

/* filter tabs ------------------------------------------------ */
.dash-browsetpl .bt-tabs { display:flex; align-items:stretch; gap:28px; width:100%; min-width:0; border-bottom:1px solid var(--border); overflow-x:auto; }
.dash-browsetpl .bt-tabs li { display:flex; }
.dash-browsetpl .bt-tab { display:flex; align-items:center; padding-bottom:12px; border-bottom:2px solid transparent; font-weight:500; font-size:14px; line-height:18px; color:var(--text-muted); white-space:nowrap; cursor:pointer; }
.dash-browsetpl .bt-tab:hover { color:var(--ink); }
.dash-browsetpl .bt-tab--active { color:var(--ink); font-weight:600; border-bottom-color:var(--brand); }

/* template grid ---------------------------------------------- */
.dash-browsetpl .bt-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:start; width:100%; }
.dash-browsetpl .bt-card { display:flex; flex-direction:column; gap:14px; min-width:0; padding:22px; background:#fff; border:1px solid var(--border); border-radius:16px; }
.dash-browsetpl .bt-card__icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto; background:var(--cream-2); border-radius:10px; }
.dash-browsetpl h3.bt-card__name { font-weight:700 !important; font-size:16px !important; line-height:22px !important; color:var(--ink); word-break:break-word; }
.dash-browsetpl .bt-card__tag { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-browsetpl .bt-card__divider { width:100%; height:1px; background:var(--cream-2); }
.dash-browsetpl .bt-card__cta { display:inline-flex; align-self:flex-start; align-items:center; gap:8px; padding:9px 16px; background:var(--ink); border-radius:8px; font-weight:600; font-size:13px; line-height:16px; color:var(--brand); }
.dash-browsetpl .bt-card__cta:hover { background:#1A1A1A; color:var(--brand); }
.dash-browsetpl .bt-card__cta svg { flex:0 0 auto; }

/* per-category empty note ------------------------------------ */
.dash-browsetpl .bt-cat-empty { flex-direction:column; align-items:center; gap:6px; width:100%; padding:48px 32px; background:var(--cream); border:1px dashed #D8CFB8; border-radius:14px; text-align:center; }
.dash-browsetpl .bt-cat-empty__title { font-weight:700; font-size:15px; line-height:20px; color:var(--ink); }
.dash-browsetpl .bt-cat-empty__body { font-weight:400; font-size:13px; line-height:20px; color:var(--text-muted); max-width:420px; }

/* pagination ------------------------------------------------- */
.dash-browsetpl .bt-pager { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding-top:4px; }
.dash-browsetpl .bt-pager__count { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.04em; color:var(--text-disabled); }
.dash-browsetpl .bt-pages { display:flex; align-items:center; gap:6px; }
.dash-browsetpl .bt-pages .page-item { display:flex; }
.dash-browsetpl .bt-pages .page-link { display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 8px; border:1px solid var(--border); border-radius:8px; background:#fff; font-weight:500; font-size:13px; line-height:16px; color:var(--text-muted); cursor:pointer; }
.dash-browsetpl .bt-pages .page-link:hover { border-color:var(--ink); color:var(--ink); }
.dash-browsetpl .bt-pages .page-item.active .page-link { background:var(--ink); border-color:var(--ink); color:var(--brand); font-weight:600; }
.dash-browsetpl .bt-pages .page-item.disabled .page-link { opacity:0.45; pointer-events:none; }

/* full empty state ------------------------------------------- */
.dash-browsetpl .bt-empty { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; padding:64px 32px; background:var(--cream); border:1px dashed #D8CFB8; border-radius:16px; text-align:center; }
.dash-browsetpl .bt-empty__badge { display:flex; align-items:center; justify-content:center; width:56px; height:56px; flex:0 0 auto; background:#fff; border:1px solid var(--border); border-radius:999px; }
.dash-browsetpl .bt-empty__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-disabled); }
.dash-browsetpl h2.bt-empty__title { font-weight:800 !important; font-size:24px !important; line-height:28px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-browsetpl p.bt-empty__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-muted); max-width:440px; }
.dash-browsetpl .bt-empty__cta { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; background:var(--ink); border-radius:10px; font-size:14px; font-weight:500; line-height:18px; color:var(--brand); margin-top:2px; }
.dash-browsetpl .bt-empty__cta:hover { background:#1A1A1A; color:var(--brand); }

/* responsive ------------------------------------------------- */
@media (max-width:1140px) {
  .dash-browsetpl .bt-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dash-browsetpl .bt-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px) {
  .dash-browsetpl .bt-head { flex-direction:column; }
  .dash-browsetpl .bt-kpis { grid-template-columns:1fr; }
  .dash-browsetpl .bt-grid { grid-template-columns:1fr; }
  .dash-browsetpl h1.bt-title { font-size:30px !important; line-height:34px !important; }
}

/* ============================================================
   .dash-job — Create a Job Advertisement
   (businessHead-create-job-adv-test / route /createJobBusinessheadTest)
   two-column: left = numbered form sections, right = sticky live
   preview + publishing card. Form wraps both columns so the footer
   spans full width and the submit stays inside #jobForm.
   ============================================================ */
.dash-job {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6; --line:#D1D5DB; --danger:#DC2626;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-job, .dash-job *, .dash-job *::before, .dash-job *::after { box-sizing:border-box; }
.dash-job * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-job h1,.dash-job h2,.dash-job h3,.dash-job h4,.dash-job h5,.dash-job h6,.dash-job p,.dash-job ul,.dash-job li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}
.dash-job button { font-family:inherit; cursor:pointer; }
.dash-job input, .dash-job select, .dash-job textarea { font-family:inherit; }

/* board (fills width with its own horizontal gutter) --------- */
.dash-job .job-board { display:flex; flex-direction:column; gap:24px; width:100%; padding:8px 28px 64px; }

/* page header ------------------------------------------------ */
.dash-job .job-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; width:100%; }
.dash-job .job-head__copy { display:flex; flex-direction:column; gap:10px; }
.dash-job .job-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-job .job-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-job .job-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-job h1.job-title { font-weight:800 !important; font-size:40px !important; line-height:44px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-job p.job-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); max-width:560px; }
.dash-job .job-back { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; height:40px; padding:0 16px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:14px; font-weight:500; line-height:18px; color:var(--text-soft); text-decoration:none; white-space:nowrap; }
.dash-job .job-back:hover { border-color:var(--ink); color:var(--ink); }
.dash-job .job-back svg { flex:0 0 auto; }
.dash-job .job-flow-notice { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text-soft); font-size:14px; line-height:20px; }
.dash-job .job-flow-notice strong { color:var(--ink); }
.dash-job .job-flow-notice a { color:var(--ink); font-weight:600; text-underline-offset:3px; }
.dash-job .job-flow-notice--success { border-color:#9BC534; background:#F7FDE8; }
.dash-job .job-flow-notice--error { border-color:#F1B4B4; background:#FFF7F7; }

/* two-column grid -------------------------------------------- */
.dash-job .job-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:24px; align-items:start; justify-items:stretch; width:100%; }
/* Legacy global CSS strips the default stretch from grid/flex items, so each
   level shrink-wraps to min-content. Force every nesting level to fill. */
.dash-job .job-board > *,
.dash-job .job-grid > *,
.dash-job .job-main > *,
.dash-job .job-side > *,
.dash-job .job-card > *,
.dash-job .job-2up > * { width:100% !important; max-width:none !important; min-width:0; }
.dash-job .job-main { display:flex; flex-direction:column; gap:24px; }
.dash-job .job-side { display:flex; flex-direction:column; gap:18px; position:sticky; top:20px; }

/* form section card ------------------------------------------ */
.dash-job .job-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:32px 36px; display:flex; flex-direction:column; gap:20px; }
.dash-job .job-sec { display:flex; align-items:center; gap:18px; }
.dash-job .job-sec__num { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:12px; line-height:16px; letter-spacing:0.18em; color:var(--text-disabled); }
.dash-job .job-sec__line { flex:1 1 auto; height:1px; background:var(--cream-2); }
.dash-job .job-sec__label { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }

/* field + label row ------------------------------------------ */
.dash-job .job-field { display:flex; flex-direction:column; gap:6px; }
.dash-job .job-field-hint { color:var(--text-muted); font-size:12px !important; line-height:18px !important; }
.dash-job .job-field-hint a { color:var(--ink); font-weight:600; text-underline-offset:3px; }
.dash-job .job-field__top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:16px; }
.dash-job .job-label { font-weight:500; font-size:13px; line-height:16px; color:var(--ink); }
.dash-job .job-req, .dash-job .job-opt { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-job .job-2up { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }

/* inputs / selects / textareas ------------------------------- */
.dash-job .job-input { width:100%; height:48px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:15px; line-height:18px; color:var(--ink); outline:none; }
.dash-job .job-input::placeholder { color:var(--text-disabled); }
.dash-job .job-input:focus { border-color:var(--ink); }
.dash-job .job-select { position:relative; display:flex; align-items:center; height:48px; border:1px solid var(--border); border-radius:10px; background:#fff; padding:0 16px; cursor:pointer; }
.dash-job .job-select:focus-within { border-color:var(--ink); }
/* 2026-08-04 — brought in line with every other select layer in this sheet
   (.bt-select 7377, .ae-select 7774, .dp-select 7854). Was missing
   `-moz-appearance:none`, so Firefox drew its own arrow next to the custom
   chevron, and missing `cursor:pointer`, so the control gave no affordance.
   Left inset raised 14px -> 16px on the wrapper and the text/chevron gap
   8px -> 12px, which is what read as cramped on the full-width
   "Level of profile" field (its three siblings sit in a 2-up grid at half
   the width, so the same insets look tighter when stretched). */
.dash-job .job-select select { flex:1 1 auto; min-width:0; height:100%; border:0; background:transparent; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-size:15px; line-height:18px; color:var(--ink); padding-right:12px; cursor:pointer; }
.dash-job .job-select select:invalid { color:var(--text-disabled); }
.dash-job .job-select svg { flex:0 0 auto; color:var(--text-disabled); pointer-events:none; }
.dash-job .job-textarea { width:100%; padding:14px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:15px; line-height:22px; color:var(--ink); outline:none; resize:vertical; }
.dash-job .job-textarea::placeholder { color:var(--text-disabled); }
.dash-job .job-textarea:focus { border-color:var(--ink); }
.dash-job .job-textarea--sm { min-height:72px; }
.dash-job .job-textarea--md { min-height:120px; }
.dash-job .job-textarea--lg { min-height:148px; }

/* tag / chips input ------------------------------------------ */
.dash-job .job-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:48px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.dash-job .job-tags:focus-within { border-color:var(--ink); }
.dash-job .job-tags input[type="text"] { flex:1 1 120px; min-width:120px; border:0; outline:none; background:transparent; height:30px; font-size:15px; line-height:18px; color:var(--ink); }
.dash-job .job-tags input[type="text"]::placeholder { color:var(--text-disabled); }
.dash-job .job-chip-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; background:var(--cream-2); border-radius:999px; font-size:13px; font-weight:500; line-height:16px; color:var(--ink); }
.dash-job .job-chip-tag span { color:var(--ink); }
.dash-job .job-chip-tag button { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-disabled); font-size:16px; line-height:1; }
.dash-job .job-chip-tag button:hover { background:#fff; color:var(--ink); }

/* toggle (salary + public posting) --------------------------- */
.dash-job .job-switch { position:relative; display:flex; align-items:center; gap:12px; cursor:pointer; }
.dash-job .job-switch input { position:absolute; opacity:0; width:0; height:0; }
.dash-job .job-switch__track { position:relative; flex:0 0 auto; width:40px; height:24px; border-radius:999px; background:var(--border); transition:background .15s ease; }
.dash-job .job-switch__knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:transform .15s ease; }
.dash-job .job-switch input:checked + .job-switch__track { background:var(--brand); }
.dash-job .job-switch input:checked + .job-switch__track .job-switch__knob { transform:translateX(16px); }
.dash-job .job-switch input:focus-visible + .job-switch__track { box-shadow:0 0 0 3px rgba(10,10,10,.12); }
.dash-job .job-switch__text { font-size:14px; font-weight:500; line-height:18px; color:var(--ink); }
.dash-job .job-switch--bare { gap:0; }

/* remote-work radio pills ------------------------------------ */
.dash-job .job-radios { display:flex; flex-wrap:wrap; gap:10px; }
.dash-job .job-radio { position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; }
.dash-job .job-radio input { position:absolute; opacity:0; width:0; height:0; }
.dash-job .job-radio__dot { flex:0 0 auto; width:8px; height:8px; border-radius:999px; background:var(--line); }
.dash-job .job-radio__text { font-size:13px; font-weight:500; line-height:16px; color:var(--text-soft); }
.dash-job .job-radio:has(input:checked) { background:var(--ink); border-color:var(--ink); }
.dash-job .job-radio:has(input:checked) .job-radio__dot { background:var(--brand); }
.dash-job .job-radio:has(input:checked) .job-radio__text { color:#fff; }
.dash-job .job-radio:has(input:focus-visible) { box-shadow:0 0 0 3px rgba(10,10,10,.12); }

/* validation (native checkValidity blocks submit; show which) - */
.dash-job .job-form.was-validated .job-input:invalid,
.dash-job .job-form.was-validated .job-textarea:invalid { border-color:var(--danger); }
.dash-job .job-form.was-validated .job-select:has(select:invalid) { border-color:var(--danger); }

/* ---- live preview card ------------------------------------- */
.dash-job .job-pv { background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:14px; }
.dash-job .job-pv__eyebrow { display:flex; align-items:center; gap:7px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); }
.dash-job .job-dot { flex:0 0 auto; width:7px; height:7px; border-radius:999px; background:var(--brand); }
.dash-job .job-pv__eyebrow-sep { color:var(--text-disabled); }
.dash-job h2.job-pv__title { font-weight:800 !important; font-size:22px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); word-break:break-word; }
.dash-job .job-pv__chips { display:flex; flex-wrap:wrap; gap:6px; }
.dash-job .job-pv__chip { display:inline-flex; align-items:center; padding:4px 8px; background:var(--cream-2); border-radius:6px; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; color:var(--ink); }
.dash-job .job-pv__metarow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding-top:4px; }
.dash-job .job-pv__meta { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dash-job .job-pv__block { display:flex; flex-direction:column; gap:6px; }
.dash-job .job-pv__mlabel { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-job .job-pv__mval { font-size:14px; font-weight:500; line-height:18px; color:var(--ink); word-break:break-word; }
.dash-job .job-pv__val { font-size:13px; font-weight:400; line-height:20px; color:var(--text-soft); word-break:break-word; }
.dash-job .job-pv__val .preview-paragraph { margin:0 0 4px !important; }
.dash-job .job-pv__val .preview-header { font-size:13px !important; font-weight:700 !important; line-height:18px !important; color:var(--ink); margin:6px 0 2px !important; }
.dash-job .job-pv__val li { list-style:disc !important; margin-left:18px !important; }
.dash-job .job-pv__tags { display:flex; flex-wrap:wrap; gap:6px; }
.dash-job .job-pv__tags li { font-size:13px; line-height:18px; color:var(--text-disabled); }
.dash-job .job-pv__tags li span.tag { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:500; line-height:16px; color:var(--ink); }
.dash-job .job-pv__preview-note { width:100%; margin-top:4px; padding:10px 14px; border:1px dashed var(--border); border-radius:10px; background:var(--cream); font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:14px; letter-spacing:.1em; text-align:center; text-transform:uppercase; color:var(--text-muted); }

/* ---- publishing card --------------------------------------- */
.dash-job .job-publish { background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:16px; }
.dash-job .job-publish__row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dash-job .job-publish__row--top { align-items:flex-start; }
.dash-job .job-publish__copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dash-job h3.job-publish__title { font-weight:600 !important; font-size:14px !important; line-height:18px !important; color:var(--ink); }
.dash-job p.job-publish__desc { font-weight:400 !important; font-size:13px !important; line-height:18px !important; color:var(--text-muted); }
.dash-job .job-publish__tag { flex:0 0 auto; padding:4px 8px; background:var(--cream-2); border-radius:6px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); }
.dash-job .job-publish__divider { width:100%; height:1px; background:var(--cream-2); }
.dash-job .job-boost { display:flex; background:var(--cream); border-radius:10px; padding:3px; gap:3px; }
.dash-job .job-boost__seg { flex:1 1 0; min-width:0; height:32px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:transparent; font-size:12px; font-weight:500; line-height:16px; color:var(--text-muted); }
.dash-job .job-boost__seg.is-active { background:var(--ink); color:var(--brand); font-weight:600; }

/* footer button bar ------------------------------------------ */
.dash-job .job-footer { display:flex; align-items:center; justify-content:flex-end; gap:16px; width:100%; margin-top:24px; }
.dash-job .job-btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--ink); border-radius:999px; background:transparent; font-size:14px; font-weight:500; line-height:18px; color:var(--ink); text-decoration:none; }
.dash-job .job-btn-ghost:hover { background:var(--cream); }
.dash-job .job-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:0; border-radius:10px; background:var(--ink); font-size:14px; font-weight:500; line-height:18px; color:var(--brand); }
.dash-job .job-btn-primary:hover { background:#1A1A1A; }

/* responsive ------------------------------------------------- */
@media (max-width:1024px) {
  .dash-job .job-grid { grid-template-columns:1fr; }
  .dash-job .job-side { position:static; }
}
@media (max-width:680px) {
  .dash-job .job-board { padding:8px 16px 56px; }
  .dash-job .job-head { flex-direction:column; }
  .dash-job .job-card { padding:24px 20px; }
  .dash-job .job-2up { grid-template-columns:1fr; }
  .dash-job h1.job-title { font-size:30px !important; line-height:34px !important; }
}

/* ============================================================
   .dash-jobs — Manage Jobs / Open Jobs listing
   (businessHead-manage-jobsTest / route /businessHeadManageJobsTest)
   Mirrors the .dash-verify table vocabulary (header + card + searchable
   table + client pagination), plus a header CTA, Open/Closed status
   pills and a View / Turn-off / Reopen action group.
   ============================================================ */
.dash-jobs {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-jobs, .dash-jobs *, .dash-jobs *::before, .dash-jobs *::after { box-sizing:border-box; }
.dash-jobs * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-jobs h1,.dash-jobs h2,.dash-jobs h3,.dash-jobs h4,.dash-jobs h5,.dash-jobs h6,.dash-jobs p,.dash-jobs ul,.dash-jobs li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}
.dash-jobs button { font-family:inherit; cursor:pointer; }

/* board + header --------------------------------------------- */
.dash-jobs .jb-board { display:flex; flex-direction:column; gap:32px; padding:8px 0 64px; }
.dash-jobs .jb-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dash-jobs .jb-head__copy { display:flex; flex-direction:column; gap:10px; max-width:760px; }
.dash-jobs .jb-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-jobs .jb-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-jobs .jb-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-jobs h1.jb-title { font-weight:800 !important; font-size:40px !important; line-height:46px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-jobs p.jb-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); max-width:640px; }
.dash-jobs .jb-cta { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; padding:11px 18px; border:0; border-radius:10px; background:var(--ink); font-size:14px; font-weight:500; line-height:18px; color:var(--brand); text-decoration:none; white-space:nowrap; }
.dash-jobs .jb-cta:hover { background:#1A1A1A; color:var(--brand); }
.dash-jobs .jb-cta svg { flex:0 0 auto; }
.dash-jobs .jb-back { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; height:40px; padding:0 16px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:14px; font-weight:500; line-height:18px; color:var(--text-soft); text-decoration:none; white-space:nowrap; }
.dash-jobs .jb-back:hover { border-color:var(--ink); color:var(--ink); }
.dash-jobs .jb-back svg { flex:0 0 auto; }

/* card ------------------------------------------------------- */
.dash-jobs .jb-card { display:flex; flex-direction:column; gap:20px; padding:28px 28px 24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-jobs .jb-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-jobs .jb-card__heading { display:flex; flex-direction:column; gap:4px; }
.dash-jobs .jb-card__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-jobs h2.jb-card__title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-jobs .jb-search { display:inline-flex; align-items:center; gap:8px; width:260px; height:40px; padding:0 14px; border-radius:10px; background:#fff; border:1px solid var(--border); }
.dash-jobs .jb-search svg { flex:0 0 auto; }
.dash-jobs .jb-search input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-weight:400; font-size:14px; line-height:18px; color:var(--ink); }
.dash-jobs .jb-search input::placeholder { color:var(--text-disabled); }

/* table ------------------------------------------------------ */
.dash-jobs .jb-table-wrap { width:100%; overflow-x:auto; }
.dash-jobs table.jb-table { width:100% !important; border-collapse:collapse; }
.dash-jobs .jb-table th {
  font-family:"Roboto Mono",monospace !important; font-weight:500 !important; font-size:10px !important;
  letter-spacing:0.08em; color:var(--text-disabled); text-transform:uppercase !important; text-align:left !important;
  padding:0 16px 14px 0 !important; border-bottom:1px solid var(--border); white-space:nowrap; background:transparent !important;
}
.dash-jobs .jb-table th.jb-th-action, .dash-jobs .jb-table td.jb-cell-action { text-align:right !important; }
.dash-jobs .jb-table td { padding:16px 16px 16px 0 !important; border-bottom:1px solid var(--border); vertical-align:middle; background:transparent !important; }
.dash-jobs .jb-table tbody tr:last-child td { border-bottom:0; }
.dash-jobs .jb-cell-job { display:flex; align-items:center; gap:12px; }
.dash-jobs .jb-avatar { flex:0 0 auto; width:38px; height:38px; border-radius:999px; background:var(--cream-2); display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto",sans-serif; font-weight:600; font-size:12px; color:var(--ink); }
.dash-jobs .jb-job { display:flex; flex-direction:column; gap:1px; min-width:0; }
.dash-jobs .jb-job__name { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); text-transform:capitalize; }
.dash-jobs a.jb-job__name { color:var(--ink) !important; text-decoration:none !important; }
.dash-jobs .jb-job__sub { font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-jobs .jb-cell-strong { display:block; font-weight:500; font-size:14px; line-height:18px; color:var(--ink); text-transform:capitalize; }
.dash-jobs .jb-cell-sub { display:block; font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); margin-top:1px; }
.dash-jobs .jb-mono { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.02em; color:var(--ink); white-space:nowrap; }
.dash-jobs .jb-mono--muted { color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-size:11px; }
.dash-jobs .jb-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; }
.dash-jobs .jb-pill__dot { width:6px; height:6px; border-radius:999px; flex:0 0 auto; }
.dash-jobs .jb-pill--open { background:var(--ink); color:var(--brand); }
.dash-jobs .jb-pill--open .jb-pill__dot { background:var(--brand); }
.dash-jobs .jb-pill--closed { background:#fff; border:1px solid var(--border); color:var(--text-muted); }
.dash-jobs .jb-pill--closed .jb-pill__dot { background:var(--text-disabled); }

/* row actions ------------------------------------------------ */
.dash-jobs .jb-actions { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; }
.dash-jobs a.jb-act { display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border-radius:8px; font-weight:500; font-size:13px; line-height:16px; text-decoration:none !important; white-space:nowrap; transition:background .15s, border-color .15s; }
.dash-jobs a.jb-act--view { background:var(--ink); color:var(--brand) !important; }
.dash-jobs a.jb-act--view:hover { background:#1A1A1A; }
.dash-jobs a.jb-act--reopen { background:var(--brand); color:var(--ink) !important; }
.dash-jobs a.jb-act--reopen:hover { background:#B8E83C; }
.dash-jobs a.jb-act--ghost { background:#fff; border:1px solid var(--border); color:var(--text-soft) !important; }
.dash-jobs a.jb-act--ghost:hover { border-color:var(--ink); color:var(--ink) !important; }

/* pagination ------------------------------------------------- */
.dash-jobs .jb-pager-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:4px; }
.dash-jobs .jb-pager-row__info { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); }
.dash-jobs ul.jb-pager { display:inline-flex; align-items:center; gap:8px; margin:0 !important; padding:0 !important; }
.dash-jobs ul.jb-pager .page-item { list-style:none !important; }
.dash-jobs ul.jb-pager .page-link {
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px;
  border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text-soft); cursor:pointer;
  text-decoration:none !important; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px;
}
.dash-jobs ul.jb-pager .page-item.active .page-link { background:var(--ink); color:var(--brand); border-color:var(--ink); }
.dash-jobs ul.jb-pager .page-item.disabled .page-link { color:var(--text-disabled); cursor:default; border-color:var(--border); }

/* empty state ------------------------------------------------ */
.dash-jobs .jb-empty { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center !important; padding:56px 24px; border-radius:14px; background:var(--cream); border:1px dashed #D8CFB8; }
.dash-jobs .jb-empty__icon { width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.dash-jobs .jb-empty__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-jobs h3.jb-empty__title { font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em !important; color:var(--ink); text-align:center !important; }
.dash-jobs p.jb-empty__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-muted); max-width:420px; text-align:center !important; }
.dash-jobs .jb-empty__cta { display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:11px 18px; border-radius:10px; background:var(--ink); font-size:14px; font-weight:500; line-height:18px; color:var(--brand); text-decoration:none; }
.dash-jobs .jb-empty__cta:hover { background:#1A1A1A; color:var(--brand); }
.dash-jobs .jb-empty__cta svg { flex:0 0 auto; }

/* responsive ------------------------------------------------- */
@media (max-width:720px){
  .dash-jobs .jb-head { flex-direction:column; }
  .dash-jobs h1.jb-title { font-size:30px !important; line-height:36px !important; }
  .dash-jobs .jb-search { width:100%; }
  .dash-jobs .jb-card__head { flex-direction:column; }
}

/* ============================================================
   .dash-viewjob — View Full Job (detail)
   (businessHead-view-job-advTest / route /businessHeadViewFullJobTest_*)
   Two-column: left job-overview card, right applicants + manage cards.
   Reuses the .dash-job / .dash-jobs token vocabulary.
   ============================================================ */
.dash-viewjob {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-viewjob, .dash-viewjob *, .dash-viewjob *::before, .dash-viewjob *::after { box-sizing:border-box; }
.dash-viewjob * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-viewjob h1,.dash-viewjob h2,.dash-viewjob h3,.dash-viewjob h4,.dash-viewjob h5,.dash-viewjob h6,.dash-viewjob p,.dash-viewjob ul,.dash-viewjob li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}

/* board + header --------------------------------------------- */
.dash-viewjob .vj-board { display:flex; flex-direction:column; gap:28px; padding:8px 0 64px; }
.dash-viewjob .vj-head { display:flex; flex-direction:column; gap:14px; width:100%; }
.dash-viewjob .vj-eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.dash-viewjob .vj-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-viewjob .vj-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-viewjob .vj-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-viewjob .vj-back { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; height:40px; padding:0 16px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:14px; font-weight:500; line-height:18px; color:var(--text-soft); text-decoration:none; white-space:nowrap; }
.dash-viewjob .vj-back:hover { border-color:var(--ink); color:var(--ink); }
.dash-viewjob .vj-back svg { flex:0 0 auto; }
.dash-viewjob .vj-titlerow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dash-viewjob h1.vj-title { font-weight:800 !important; font-size:40px !important; line-height:44px !important; letter-spacing:-0.02em !important; color:var(--ink); text-transform:capitalize; }
.dash-viewjob .vj-meta { font-size:14px; font-weight:400; line-height:20px; color:var(--text-muted); }

/* status pill (shared) --------------------------------------- */
.dash-viewjob .vj-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; }
.dash-viewjob .vj-pill__dot { width:6px; height:6px; border-radius:999px; flex:0 0 auto; }
.dash-viewjob .vj-pill--open { background:var(--ink); color:var(--brand); }
.dash-viewjob .vj-pill--open .vj-pill__dot { background:var(--brand); }
.dash-viewjob .vj-pill--closed { background:#fff; border:1px solid var(--border); color:var(--text-muted); }
.dash-viewjob .vj-pill--closed .vj-pill__dot { background:var(--text-disabled); }

/* body two-column -------------------------------------------- */
.dash-viewjob .vj-body { display:flex; align-items:flex-start; gap:24px; width:100%; }
.dash-viewjob .vj-main { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:24px; }
.dash-viewjob .vj-side { flex:0 0 360px; width:360px; display:flex; flex-direction:column; gap:18px; position:sticky; top:20px; }

/* overview card ---------------------------------------------- */
.dash-viewjob .vj-card { width:100%; background:#fff; border:1px solid var(--border); border-radius:18px; padding:32px 36px; display:flex; flex-direction:column; gap:24px; }
.dash-viewjob .vj-strip { display:flex; gap:28px; width:100%; }
.dash-viewjob .vj-stat { display:flex; flex-direction:column; gap:6px; flex:1 1 0; min-width:0; }
.dash-viewjob .vj-stat__label { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-viewjob .vj-stat__val { font-size:15px; font-weight:500; line-height:20px; color:var(--ink); text-transform:capitalize; word-break:break-word; }
.dash-viewjob .vj-divider { width:100%; height:1px; background:var(--cream-2); }
.dash-viewjob .vj-section { display:flex; flex-direction:column; gap:8px; width:100%; }
.dash-viewjob .vj-section__label { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-viewjob .vj-section__lead { font-size:15px; font-weight:500; line-height:24px; color:var(--ink); word-break:break-word; }
.dash-viewjob .vj-section__body { font-size:14px; font-weight:400; line-height:22px; color:var(--text-soft); white-space:pre-line; word-break:break-word; }
.dash-viewjob .vj-muted { font-size:14px; font-weight:400; line-height:20px; color:var(--text-disabled); }
.dash-viewjob .vj-tags { display:flex; flex-wrap:wrap; gap:8px; }
.dash-viewjob .vj-tag { display:inline-flex; align-items:center; padding:6px 12px; border:1px solid var(--border); border-radius:999px; font-size:13px; font-weight:500; line-height:16px; color:var(--ink); text-transform:capitalize; }

/* applicants card -------------------------------------------- */
.dash-viewjob .vj-acard { width:100%; background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:18px; }
.dash-viewjob .vj-acard__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-viewjob .vj-count { display:flex; align-items:baseline; gap:8px; }
.dash-viewjob .vj-count__num { font-weight:800; font-size:44px; line-height:44px; letter-spacing:-0.02em; color:var(--ink); }
.dash-viewjob .vj-count__label { font-size:14px; font-weight:500; color:var(--text-muted); }
.dash-viewjob .vj-breakdown { display:flex; flex-direction:column; gap:10px; width:100%; }
.dash-viewjob .vj-brow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-viewjob .vj-brow__k { font-size:13px; font-weight:400; color:var(--text-soft); }
.dash-viewjob .vj-brow__v { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px; color:var(--ink); }
.dash-viewjob .vj-applyform { display:flex; flex-direction:column; gap:8px; width:100%; }
.dash-viewjob .vj-viewbtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 18px; border:0; border-radius:10px; background:var(--ink); font-size:14px; font-weight:600; line-height:18px; color:var(--brand); cursor:pointer; }
.dash-viewjob .vj-viewbtn:hover { background:#1A1A1A; }
.dash-viewjob .vj-viewbtn svg { flex:0 0 auto; }
.dash-viewjob .vj-viewbtn--disabled { background:var(--border); color:var(--text-disabled); cursor:not-allowed; }
.dash-viewjob .vj-viewbtn--disabled:hover { background:var(--border); }
.dash-viewjob .vj-viewnote { font-size:12px; font-weight:400; line-height:16px; color:var(--text-disabled); text-align:center; }

/* manage card ------------------------------------------------ */
.dash-viewjob .vj-mcard { width:100%; background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:16px; }
.dash-viewjob .vj-mcard__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-viewjob .vj-statusrow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-viewjob .vj-statuscopy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dash-viewjob .vj-statuscopy__title { font-size:14px; font-weight:600; line-height:18px; color:var(--ink); }
.dash-viewjob .vj-statuscopy__sub { font-size:13px; font-weight:400; line-height:16px; color:var(--text-muted); }
.dash-viewjob .vj-togglebtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px 18px; background:#fff; border:1px solid var(--ink); border-radius:999px; font-size:14px; font-weight:500; line-height:18px; color:var(--ink); text-decoration:none; }
.dash-viewjob .vj-togglebtn:hover { background:var(--cream); }
.dash-viewjob .vj-togglebtn svg { flex:0 0 auto; }

/* responsive ------------------------------------------------- */
@media (max-width:1024px){
  .dash-viewjob .vj-body { flex-direction:column; }
  .dash-viewjob .vj-side { flex:none; width:100%; position:static; }
}
@media (max-width:680px){
  .dash-viewjob h1.vj-title { font-size:30px !important; line-height:36px !important; }
  .dash-viewjob .vj-card { padding:24px 20px; }
  .dash-viewjob .vj-strip { flex-wrap:wrap; gap:18px; }
  .dash-viewjob .vj-stat { flex:1 1 40%; }
}

/* ============================================================
   Create a Project additions — REUSES the .dash-buildteam layer
   (view projects/new-test.ejs / route /newProjectTest). Only the
   bits Build a Team didn't have: a description textarea, a 2-up
   date row, the link-to-goals checklist, and the no-goals notice.
   Tokens (--brand, --cream, --border, ...) inherit from the
   .dash-buildteam declaration above.
   ============================================================ */

/* description textarea (bt-input gives it border/radius/font) */
.dash-buildteam textarea.bt-textarea { height:auto; min-height:120px; padding:14px; line-height:22px; resize:vertical; }

/* 2-up date row */
.dash-buildteam .bt-row { display:flex; gap:18px; }
.dash-buildteam .bt-row > .bt-field { flex:1 1 0; min-width:0; }

/* footer sits inside the form on this screen */
.dash-buildteam .bt-form .bt-footer { width:100%; }

/* link-to-goals header row */
.dash-buildteam .cp-goals-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-buildteam p.cp-goals-lead { font-weight:400 !important; font-size:13px !important; line-height:18px !important; color:var(--text-muted); }
.dash-buildteam .cp-showhide { display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--border); background:#fff; font-family:"Roboto",sans-serif; font-weight:500; font-size:12px; line-height:16px; color:var(--text-soft); cursor:pointer; white-space:nowrap; }
.dash-buildteam .cp-showhide:hover { color:var(--ink); background:var(--bg-subtle); }

/* goals checklist */
.dash-buildteam .cp-goals { display:flex; flex-direction:column; gap:2px; padding:6px; border:1px solid var(--border); border-radius:10px; }
.dash-buildteam .cp-goals.cp-goals--collapsed { display:none !important; }
.dash-buildteam label.cp-goal { display:flex; align-items:center; gap:12px; padding:10px; border-radius:8px; cursor:pointer; margin:0 !important; }
.dash-buildteam label.cp-goal:hover { background:var(--cream); }
.dash-buildteam .cp-goal__input { position:absolute; opacity:0; width:0; height:0; }
.dash-buildteam .cp-goal__box { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; border-radius:5px; background:#fff; border:1px solid var(--inactive-dot); }
.dash-buildteam .cp-goal__box svg { opacity:0; }
.dash-buildteam label.cp-goal:has(.cp-goal__input:checked) { background:var(--cream); }
.dash-buildteam label.cp-goal:has(.cp-goal__input:checked) .cp-goal__box { background:var(--brand); border-color:var(--brand); }
.dash-buildteam label.cp-goal:has(.cp-goal__input:checked) .cp-goal__box svg { opacity:1; }
.dash-buildteam label.cp-goal:has(.cp-goal__input:focus-visible) .cp-goal__box { outline:2px solid var(--ink); outline-offset:2px; }
.dash-buildteam .cp-goal__txt { font-weight:500; font-size:14px; line-height:18px; color:var(--ink); }

/* no-goals notice (soft info, matches the approved empty artboard) */
.dash-buildteam .cp-empty { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:10px; background:#EFF6FF; border:1px solid #DBEAFE; }
.dash-buildteam .cp-empty__icon { display:inline-flex; flex-shrink:0; }
.dash-buildteam .cp-empty__txt { font-weight:400; font-size:13px; line-height:18px; color:#1E3A8A; }
.dash-buildteam .cp-empty__link { color:#1D4ED8; font-weight:600; text-decoration:underline; white-space:nowrap; }
.dash-buildteam .bt-btn[disabled] { opacity:0.5; cursor:not-allowed; pointer-events:none; }

@media (max-width:560px){
  .dash-buildteam .bt-row { flex-direction:column; }
}

/* ============================================================
   All Projects additions — REUSES the .dash-jobs table layer
   (view projects/listTest.ejs / route /projectsTest). Only the
   bits the jobs table didn't have: a 4-select filter bar and a
   progress cell (number + slim track bar). Tokens inherit from
   the .dash-jobs declaration above.
   ============================================================ */

/* filter bar */
.dash-jobs .jb-filters { display:flex; gap:12px; flex-wrap:wrap; }
.dash-jobs .jb-filter { position:relative; flex:1 1 0; min-width:190px; }
.dash-jobs .jb-filter select {
  width:100%; height:44px; appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:1px solid var(--border); border-radius:10px; background:#fff; padding:0 38px 0 16px;
  font-family:"Roboto",sans-serif; font-size:14px; color:var(--ink); cursor:pointer; outline:0;
}
.dash-jobs .jb-filter select:focus { border-color:var(--ink); }
.dash-jobs .jb-filter::after { content:"\25BE"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:12px; pointer-events:none; }

/* progress cell */
.dash-jobs .jb-progress { display:flex; flex-direction:column; gap:6px; min-width:0; }
.dash-jobs .jb-progress__pct { font-family:"Roboto Mono",monospace !important; font-weight:700; font-size:13px; line-height:16px; color:var(--ink); }
.dash-jobs .jb-progress__track { width:100%; max-width:140px; height:6px; border-radius:999px; background:var(--cream-2); overflow:hidden; }
.dash-jobs .jb-progress__bar { display:block; height:100%; border-radius:999px; background:var(--brand); }

@media (max-width:720px){
  .dash-jobs .jb-filter { flex:1 1 100%; }
}

/* Project tables become labelled delivery cards before their long names and
   metadata are forced into unreadable desktop columns. The rule is opt-in so
   the shared jobs-table primitive is unchanged on unrelated screens. */
@media (max-width:900px){
  .dash-project-table .jb-card { padding:24px 20px; }
  .dash-project-table .jb-table-wrap { overflow:visible; }
  .dash-project-table table.jb-table,
  .dash-project-table .jb-table tbody,
  .dash-project-table .jb-table tr,
  .dash-project-table .jb-table td { display:block; width:100% !important; }
  .dash-project-table .jb-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .dash-project-table .jb-table tbody { display:grid; gap:14px; }
  .dash-project-table .jb-table tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 20px; padding:18px; border:1px solid var(--border); border-radius:14px; background:#fff; }
  .dash-project-table .jb-table td { min-width:0; padding:0 !important; border:0 !important; text-align:left !important; }
  .dash-project-table .jb-table td::before { content:attr(data-label); display:block; margin-bottom:7px; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-disabled); }
  .dash-project-table .jb-table td:first-child { grid-column:1 / -1; padding-bottom:16px !important; border-bottom:1px solid var(--border) !important; }
  .dash-project-table .jb-table .jb-cell-job { align-items:flex-start; }
  .dash-project-table .jb-table .jb-job__name,
  .dash-project-table .jb-table .jb-job__sub,
  .dash-project-table .jb-table .jb-cell-strong { overflow-wrap:anywhere; }
  .dash-project-table .jb-table .jb-progress__track { max-width:none; }
  .dash-project-table .jb-table td.jb-cell-action { display:flex; flex-direction:column; align-items:flex-start; }
}

@media (max-width:520px){
  .dash-project-list .jb-table tr { grid-template-columns:1fr; }
  .dash-project-list .jb-table td,
  .dash-project-list .jb-table td:first-child { grid-column:1; }
  .dash-project-list .jb-table td:first-child { padding-bottom:16px !important; }
  .dash-project-list .jb-table td.jb-cell-action a { width:100%; }
}

/* ============================================================
   .dash-projdash — Project Dashboard (projects/dashboardTest /
   route /projectDashboardTest). Composite dashboard: KPIs +
   timeline line chart + project-status ranked list + task &
   milestone lists + empty guide card. The "Recent projects"
   table reuses the .dash-jobs (jb-*) layer (nested namespace).
   ============================================================ */
.dash-projdash {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-projdash, .dash-projdash *, .dash-projdash *::before, .dash-projdash *::after { box-sizing:border-box; }
.dash-projdash * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-projdash h1,.dash-projdash h2,.dash-projdash h3,.dash-projdash h4,.dash-projdash h5,.dash-projdash h6,.dash-projdash p,.dash-projdash ul,.dash-projdash ol,.dash-projdash li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}
.dash-projdash button { font-family:inherit; cursor:pointer; }
.dash-projdash .d-none { display:none !important; }

/* board + header --------------------------------------------- */
.dash-projdash .pd-board { display:flex; flex-direction:column; gap:24px; padding:8px 28px 64px; }
.dash-projdash .pd-head { display:flex; flex-direction:column; gap:10px; max-width:760px; }
.dash-projdash .pd-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-projdash .pd-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-projdash .pd-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-projdash h1.pd-title { font-weight:800 !important; font-size:40px !important; line-height:44px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-projdash p.pd-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); max-width:640px; }

/* KPI tiles -------------------------------------------------- */
.dash-projdash .pd-kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.dash-projdash .pd-kpi { display:flex; flex-direction:column; gap:16px; padding:22px 24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-projdash .pd-kpi__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-projdash .pd-kpi__val { font-weight:800 !important; font-size:44px !important; line-height:44px !important; letter-spacing:-0.02em; color:var(--ink); }

/* generic card + rows ---------------------------------------- */
.dash-projdash .pd-row { display:grid; gap:16px; }
.dash-projdash .pd-row--2-1 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.dash-projdash .pd-row--1-1 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.dash-projdash .pd-card { display:flex; flex-direction:column; gap:20px; padding:24px 28px; background:#fff; border:1px solid var(--border); border-radius:18px; min-width:0; }
.dash-projdash .pd-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-projdash .pd-card__heading { display:flex; flex-direction:column; gap:4px; }
.dash-projdash .pd-card__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-projdash h2.pd-card__title { font-weight:700 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }

/* segmented period toggle ------------------------------------ */
.dash-projdash .pd-seg { display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:var(--cream); border:1px solid var(--border); }
.dash-projdash .pd-seg__btn { border:0; background:transparent; padding:8px 16px; border-radius:999px; font-weight:500; font-size:12px; line-height:16px; color:var(--text-muted); white-space:nowrap; }
.dash-projdash .pd-seg__btn.is-active { background:var(--ink); color:var(--brand); font-weight:600; }

/* timeline chart + legend + stats ---------------------------- */
.dash-projdash .pd-chart { position:relative; width:100%; height:260px; }
.dash-projdash .pd-chart canvas { width:100% !important; height:100% !important; }
.dash-projdash .pd-legend { display:flex; gap:24px; }
.dash-projdash .pd-legend__item { display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:12px; line-height:16px; color:var(--ink); }
.dash-projdash .pd-legend__line { width:14px; height:3px; border-radius:2px; flex:0 0 auto; }
.dash-projdash .pd-legend__line--active { background:var(--ink); }
.dash-projdash .pd-legend__line--done { background:var(--brand); }
.dash-projdash .pd-stats { display:flex; gap:32px; padding-top:14px; border-top:1px solid var(--cream-2); }
.dash-projdash .pd-stat { display:flex; flex-direction:column; gap:2px; }
.dash-projdash .pd-stat__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); }
.dash-projdash .pd-stat__val { font-weight:800 !important; font-size:22px !important; line-height:26px !important; letter-spacing:-0.01em; color:var(--ink); }

/* project-status ranked bar list ----------------------------- */
.dash-projdash .pd-bars { display:flex; flex-direction:column; gap:18px; }
.dash-projdash .pd-bar { display:flex; flex-direction:column; gap:6px; }
.dash-projdash .pd-bar__row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dash-projdash .pd-bar__label { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; line-height:16px; color:var(--ink); }
.dash-projdash .pd-bar__top { padding:2px 6px; border-radius:4px; background:var(--brand); font-family:"Roboto Mono",monospace !important; font-weight:700; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }
.dash-projdash .pd-bar__note { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-projdash .pd-bar__count { font-family:"Roboto Mono",monospace !important; font-weight:700; font-size:13px; line-height:16px; color:var(--ink); }
.dash-projdash .pd-bar__track { width:100%; height:6px; border-radius:999px; background:var(--cream-2); overflow:hidden; }
.dash-projdash .pd-bar__fill { display:block; height:100%; border-radius:999px; }
.dash-projdash .pd-bar__fill--top { background:var(--brand); }
.dash-projdash .pd-bar__fill--ink { background:var(--ink); }
.dash-projdash .pd-bar__fill--muted { background:var(--text-disabled); }

/* task / milestone list -------------------------------------- */
.dash-projdash .pd-textbtn { border:0; background:transparent; padding:0; font-weight:600; font-size:13px; line-height:16px; color:var(--text-soft); }
.dash-projdash .pd-textbtn:hover { color:var(--ink); }
.dash-projdash .pd-list { display:flex; flex-direction:column; }
.dash-projdash .pd-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--cream-2); }
.dash-projdash .pd-item:last-child { border-bottom:0; }
.dash-projdash .pd-item__info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dash-projdash .pd-item__name { font-weight:600; font-size:14px; line-height:18px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-projdash .pd-item__sub { font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-projdash .pd-item__due { flex:0 0 auto; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.04em; color:var(--text-muted); white-space:nowrap; }
.dash-projdash .pd-item__pct { flex:0 0 auto; width:42px; text-align:right; font-family:"Roboto Mono",monospace !important; font-weight:700; font-size:13px; line-height:16px; color:var(--ink); }
.dash-projdash .pd-item__view { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:7px 14px; border-radius:8px; background:var(--ink); color:var(--brand) !important; font-weight:500; font-size:13px; line-height:16px; text-decoration:none !important; }
.dash-projdash .pd-item__view:hover { background:#1A1A1A; }
.dash-projdash .pd-pill { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; }
.dash-projdash .pd-pill__dot { width:6px; height:6px; border-radius:999px; flex:0 0 auto; }
.dash-projdash .pd-pill--active { background:var(--ink); color:var(--brand); }
.dash-projdash .pd-pill--active .pd-pill__dot { background:var(--brand); }
.dash-projdash .pd-pill--muted { background:#fff; border:1px solid var(--border); color:var(--text-muted); }
.dash-projdash .pd-pill--muted .pd-pill__dot { background:var(--text-disabled); }
.dash-projdash p.pd-empty-note { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-muted); padding:8px 0 !important; }

/* empty: how-it-works guide card ----------------------------- */
.dash-projdash .pd-guide { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:0; border-radius:18px; overflow:hidden; background:var(--ink); }
.dash-projdash .pd-guide__left { display:flex; flex-direction:column; gap:14px; padding:36px 40px; }
.dash-projdash .pd-guide__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-projdash h2.pd-guide__title { font-weight:800 !important; font-size:28px !important; line-height:32px !important; letter-spacing:-0.02em !important; color:#fff !important; }
.dash-projdash p.pd-guide__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:#9CA3AF; max-width:380px; }
.dash-projdash .pd-guide__cta { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:6px; padding:11px 18px; border-radius:10px; background:var(--brand); color:var(--ink) !important; font-weight:600; font-size:14px; line-height:18px; text-decoration:none !important; }
.dash-projdash .pd-guide__cta:hover { background:#B8E83C; }
.dash-projdash ol.pd-guide__steps { display:flex; flex-direction:column; gap:20px; padding:36px 40px !important; border-left:1px solid rgba(255,255,255,0.08); }
.dash-projdash ol.pd-guide__steps li { display:flex; align-items:flex-start; gap:14px; }
.dash-projdash .pd-step__n { flex:0 0 auto; width:26px; height:26px; border-radius:999px; border:1px solid rgba(255,255,255,0.25); display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto Mono",monospace !important; font-weight:700; font-size:12px; color:#9CA3AF; }
.dash-projdash .pd-step__n--on { background:var(--brand); border-color:var(--brand); color:var(--ink); }
.dash-projdash .pd-step__txt { display:flex; flex-direction:column; gap:2px; font-weight:400; font-size:13px; line-height:18px; color:#9CA3AF; }
.dash-projdash .pd-step__txt b { font-weight:600; font-size:14px; line-height:18px; color:#fff; }

/* responsive ------------------------------------------------- */
@media (max-width:1100px){
  .dash-projdash .pd-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dash-projdash .pd-row--2-1, .dash-projdash .pd-row--1-1 { grid-template-columns:1fr; }
  .dash-projdash .pd-guide { grid-template-columns:1fr; }
  .dash-projdash ol.pd-guide__steps { border-left:0; border-top:1px solid rgba(255,255,255,0.08); }
}
@media (max-width:680px){
  .dash-projdash .pd-board { padding:8px 16px 64px; }
  .dash-projdash h1.pd-title { font-size:30px !important; line-height:36px !important; }
  .dash-projdash .pd-kpis { grid-template-columns:1fr; }
  .dash-projdash .pd-item { flex-wrap:wrap; }
  .dash-projdash .pd-item__view { margin-left:auto; }
}

/* ============================================================
   .dash-videos — How-to Videos / tutorials (vimeoVideoTutorialPageTest /
   route /videoTutorialsTest). Editorial header + search + category tabs +
   Featured row + All-tutorials grid of video cards + reskinned Vimeo modal.
   ============================================================ */
.dash-videos {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
}
.dash-videos, .dash-videos *, .dash-videos *::before, .dash-videos *::after { box-sizing:border-box; }
.dash-videos * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-videos h1,.dash-videos h2,.dash-videos h3,.dash-videos h4,.dash-videos h5,.dash-videos h6,.dash-videos p,.dash-videos ul,.dash-videos li {
  margin:0 !important; padding:0 !important; font-weight:inherit; letter-spacing:normal !important; text-transform:none !important; text-align:left !important; list-style:none !important;
}
.dash-videos button { font-family:inherit; cursor:pointer; }

/* board + header --------------------------------------------- */
.dash-videos .vt-board { display:flex; flex-direction:column; gap:24px; padding:8px 28px 64px; }
.dash-videos .vt-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dash-videos .vt-head__copy { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.dash-videos .vt-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-videos .vt-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-videos .vt-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-videos h1.vt-title { font-weight:800 !important; font-size:40px !important; line-height:44px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-videos p.vt-subtitle { font-weight:400 !important; font-size:15px !important; line-height:24px !important; color:var(--text-soft); }
.dash-videos .vt-search { display:inline-flex; align-items:center; gap:8px; width:280px; max-width:100%; height:44px; padding:0 14px; border-radius:10px; background:#fff; border:1px solid var(--border); }
.dash-videos .vt-search svg { flex:0 0 auto; }
.dash-videos .vt-search input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-size:14px; color:var(--ink); }
.dash-videos .vt-search input::placeholder { color:var(--text-disabled); }

/* category tabs ---------------------------------------------- */
.dash-videos .vt-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.dash-videos .vt-tab { padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:500; font-size:13px; line-height:16px; color:var(--text-soft); white-space:nowrap; }
.dash-videos .vt-tab:hover { border-color:var(--ink); color:var(--ink); }
.dash-videos .vt-tab.is-active { background:var(--ink); border-color:var(--ink); color:var(--brand); }

/* sections + grid -------------------------------------------- */
.dash-videos .vt-section { display:flex; flex-direction:column; gap:16px; }
.dash-videos .vt-section__head { display:flex; flex-direction:column; gap:2px; }
.dash-videos .vt-section__eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-videos h2.vt-section__title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-videos .vt-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }

/* video card ------------------------------------------------- */
.dash-videos .vt-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; }
.dash-videos .vt-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,10,10,0.08); border-color:#D8D8D8; }
.dash-videos .vt-card:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.dash-videos .vt-thumb { position:relative; aspect-ratio:16/9; background:var(--cream); display:flex; align-items:center; justify-content:center; }
.dash-videos .vt-thumb__play { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:999px; background:var(--brand); color:var(--ink); transition:transform .15s; box-shadow:0 6px 16px rgba(10,10,10,0.18); }
.dash-videos .vt-thumb__play svg { margin-left:2px; }
.dash-videos .vt-card:hover .vt-thumb__play { transform:scale(1.08); }
.dash-videos .vt-dur { position:absolute; right:10px; bottom:10px; padding:3px 8px; border-radius:6px; background:rgba(10,10,10,0.78); font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:12px; letter-spacing:0.02em; color:#fff; }
.dash-videos .vt-flag { position:absolute; left:10px; top:10px; padding:3px 8px; border-radius:999px; background:var(--brand); font-family:"Roboto Mono",monospace !important; font-weight:700; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }
.dash-videos .vt-card__body { display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; }
.dash-videos h3.vt-card__title { font-weight:600 !important; font-size:16px !important; line-height:21px !important; color:var(--ink); }
.dash-videos p.vt-card__desc { font-weight:400 !important; font-size:13px !important; line-height:19px !important; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dash-videos .vt-card__meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.dash-videos .vt-cat { padding:3px 9px; border-radius:999px; background:var(--cream); font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-soft); }
.dash-videos .vt-date { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:13px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-disabled); white-space:nowrap; }

/* featured cards = dark thumb (scale/contrast against the light grid) */
.dash-videos .vt-card--featured .vt-thumb { background:var(--ink); }
.dash-videos .vt-card--featured .vt-thumb::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 0%, rgba(197,241,84,0.10), transparent 60%); pointer-events:none; }

/* empty state ------------------------------------------------ */
.dash-videos .vt-empty { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center !important; padding:56px 24px; border-radius:14px; background:var(--cream); border:1px dashed #D8CFB8; }
.dash-videos .vt-empty__icon { width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; margin-bottom:4px; }
.dash-videos h3.vt-empty__title { font-weight:800 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); text-align:center !important; }
.dash-videos p.vt-empty__body { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-muted); text-align:center !important; }
.dash-videos .vt-empty__btn { margin-top:4px; padding:9px 16px; border-radius:999px; border:1px solid var(--ink); background:#fff; font-weight:500; font-size:13px; color:var(--ink); }
.dash-videos .vt-empty__btn:hover { background:var(--cream-2); }

/* Vimeo modal ------------------------------------------------ */
.dash-videos .vt-modal { position:fixed; inset:0; z-index:9999; background:rgba(10,10,10,0.72); align-items:center; justify-content:center; padding:24px; }
.dash-videos .vt-modal__dialog { position:relative; width:100%; max-width:960px; }
.dash-videos .vt-modal__close { position:absolute; top:-44px; right:0; width:36px; height:36px; border:0; border-radius:999px; background:#fff; color:var(--ink); font-size:22px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.dash-videos .vt-modal__close:hover { background:var(--cream); }
.dash-videos .vt-modal__frame { aspect-ratio:16/9; width:100%; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,0.5); }
.dash-videos .vt-modal__frame iframe { width:100%; height:100%; border:0; display:block; }
body.vt-modal-open { overflow:hidden; }

/* responsive ------------------------------------------------- */
@media (max-width:1040px){ .dash-videos .vt-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:680px){
  .dash-videos .vt-board { padding:8px 16px 64px; }
  .dash-videos h1.vt-title { font-size:30px !important; line-height:36px !important; }
  .dash-videos .vt-head { flex-direction:column; align-items:stretch; }
  .dash-videos .vt-search { width:100%; }
  .dash-videos .vt-grid { grid-template-columns:1fr; }
}

/* ============================================================
   .dash-membership — Membership / Plans (membershipPlansTest /
   route /membershipPlansTest). PHASE 1: Individuals & small teams
   scope reskinned via mp-* classes. The Businesses & enterprises
   section + the subscribe/cancel modals keep their legacy markup,
   so this layer is scoped to mp-* only (NO broad element reset)
   to avoid disturbing them. Tokens declared here; mp- text classes
   reset their own margins.
   ============================================================ */
.dash-membership {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --bg-subtle:#F3F4F6;
}
.dash-membership [class^="mp-"], .dash-membership [class*=" mp-"] { box-sizing:border-box; font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }

/* board + header --------------------------------------------- */
.dash-membership .mp-board { display:flex; flex-direction:column; gap:36px; padding:8px 8px 64px; }
.dash-membership .mp-head { display:flex; flex-direction:column; gap:20px; }
.dash-membership .mp-eyebrow { display:flex; align-items:center; gap:10px; }
.dash-membership .mp-chip { padding:3px 8px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-membership .mp-crumb { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-membership .mp-title { margin:0 !important; font-family:"Roboto",sans-serif; font-weight:800; font-size:40px; line-height:44px; letter-spacing:-0.02em; color:var(--ink); }
.dash-membership .mp-subtitle { margin:0 !important; max-width:560px; font-family:"Roboto",sans-serif; font-weight:400; font-size:15px; line-height:24px; color:var(--text-soft); }
.dash-membership .mp-subrow { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-membership .mp-current { display:flex; align-items:center; gap:12px; }
.dash-membership .mp-current-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:var(--ink); }
.dash-membership .mp-current-pill__dot { width:6px; height:6px; border-radius:999px; background:var(--brand); }
.dash-membership .mp-current-pill__txt { font-family:"Roboto Mono",monospace; font-weight:600; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand); }
.dash-membership .mp-renew { font-family:"Roboto",sans-serif; font-weight:400; font-size:13px; color:var(--text-muted); }
.dash-membership .mp-toggle { display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:var(--cream); border:1px solid var(--border); }
.dash-membership .mp-toggle__btn { padding:9px 16px; border-radius:999px; font-family:"Roboto",sans-serif; font-weight:500; font-size:13px; color:var(--text-muted); cursor:pointer; white-space:nowrap; user-select:none; }
.dash-membership .mp-toggle__btn.active { background:var(--ink); color:var(--brand); font-weight:600; }
.dash-membership .mp-toggle__btn.btn-active { background:var(--ink) !important; color:var(--brand) !important; font-weight:600; }
.dash-membership .mp-toggle__btn.btn-inactive { background:transparent; color:var(--text-muted); }

/* plan cards ------------------------------------------------- */
.dash-membership .mp-plans { display:flex; gap:24px; align-items:stretch; flex-wrap:wrap; }
.dash-membership .mp-card { flex:1 1 360px; min-width:0; position:relative; display:flex; flex-direction:column; gap:20px; background:#fff; border:1px solid var(--border); border-radius:18px; padding:28px 28px 26px; }
.dash-membership .mp-card--current { border:1.5px solid var(--ink); }
.dash-membership .mp-badge { position:absolute; top:-11px; right:24px; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--brand); border:1.5px solid var(--ink); }
.dash-membership .mp-badge__dot { width:6px; height:6px; border-radius:999px; background:var(--ink); }
.dash-membership .mp-badge__txt { font-family:"Roboto Mono",monospace; font-weight:700; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); }
.dash-membership .mp-plan-head { display:flex; flex-direction:column; gap:4px; }
.dash-membership .mp-plan-name { margin:0 !important; font-family:"Roboto",sans-serif; font-weight:700; font-size:20px; line-height:26px; color:var(--ink); }
.dash-membership .mp-plan-sub { margin:0 !important; font-family:"Roboto",sans-serif; font-weight:400; font-size:13px; line-height:18px; color:var(--text-muted); }
.dash-membership .mp-price-block { display:flex; flex-direction:column; gap:3px; }
.dash-membership .mp-price { margin:0 !important; display:flex; align-items:baseline; gap:6px; font-family:"Roboto",sans-serif; font-weight:800; font-size:38px; line-height:42px; letter-spacing:-0.02em; color:var(--ink); }
.dash-membership .mp-price .text, .dash-membership .mp-price__unit { font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; color:var(--text-muted); }
.dash-membership .mp-price-note { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.03em; text-transform:uppercase; color:var(--text-disabled); }
.dash-membership .mp-divider { height:1px; background:var(--cream-2); }
.dash-membership ul.mp-features { display:flex; flex-direction:column; gap:11px; margin:0 !important; padding:0 !important; list-style:none !important; }
.dash-membership ul.mp-features li { display:flex; align-items:center; gap:10px; margin:0 !important; font-family:"Roboto",sans-serif; font-weight:400; font-size:14px; line-height:18px; color:var(--ink); }
.dash-membership ul.mp-features li::before { content:""; flex:0 0 auto; width:18px; height:18px; border-radius:999px; background:var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat; }
.dash-membership .mp-spacer { flex:1; min-height:6px; }
.dash-membership .mp-cta { display:flex; align-items:center; justify-content:center; height:46px; border-radius:999px; font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; cursor:pointer; text-decoration:none !important; border:0; width:100%; }
.dash-membership .mp-cta--ghost { background:#fff; border:1px solid var(--ink); color:var(--ink); }
.dash-membership .mp-cta--ghost:hover { background:var(--cream); }
.dash-membership .mp-cta--dark { background:var(--ink); color:var(--brand) !important; }
.dash-membership .mp-cta--dark:hover { background:#1A1A1A; }

/* section headers (reused across add-ons / payment / billing / etc.) */
.dash-membership .mp-sec { display:flex; flex-direction:column; gap:18px; }
.dash-membership .mp-sec__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-membership .mp-sec__heading { display:flex; flex-direction:column; gap:3px; }
.dash-membership .mp-sec__eyebrow { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-membership .mp-sec__title { margin:0 !important; font-family:"Roboto",sans-serif; font-weight:800; font-size:22px; line-height:28px; letter-spacing:-0.01em; color:var(--ink); }

/* business cards: live-price + per-unit counters/steppers */
.dash-membership .mp-note { font-family:"Roboto",sans-serif; font-weight:400; font-size:13px; line-height:18px; color:var(--text-muted); }
.dash-membership .mp-counters { display:flex; flex-direction:column; gap:10px; }
.dash-membership .mp-counter { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-membership .mp-counter__label { font-family:"Roboto",sans-serif; font-weight:500; font-size:13px; line-height:18px; color:var(--ink); }
.dash-membership .mp-stepper { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--border); border-radius:999px; padding:3px; }
.dash-membership .mp-stepper__btn { width:28px; height:28px; border:0; border-radius:999px; background:var(--cream); color:var(--ink); font-family:"Roboto",sans-serif; font-weight:600; font-size:16px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.dash-membership .mp-stepper__btn:hover { background:var(--cream-2); }
.dash-membership .mp-stepper__btn:disabled { opacity:0.4; cursor:not-allowed; }
.dash-membership .mp-stepper__val { min-width:30px; text-align:center; font-family:"Roboto Mono",monospace; font-weight:600; font-size:14px; color:var(--ink); }

/* add-on services -------------------------------------------- */
.dash-membership .mp-addon-grid { display:flex; flex-wrap:wrap; gap:20px; }
.dash-membership .mp-addon { flex:1 1 calc((100% - 40px)/3); min-width:240px; display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px 24px; }
.dash-membership .mp-addon__head { display:flex; flex-direction:column; gap:4px; }
.dash-membership .mp-addon__name { margin:0 !important; font-family:"Roboto",sans-serif; font-weight:600; font-size:15px; line-height:20px; color:var(--ink); }
.dash-membership .mp-addon__sub { font-family:"Roboto",sans-serif; font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-membership .mp-addon__price { display:flex; align-items:baseline; gap:5px; }
.dash-membership .mp-addon__price > span:first-child { font-family:"Roboto",sans-serif; font-weight:800; font-size:24px; line-height:28px; color:var(--ink); }
.dash-membership .mp-addon__unit { font-family:"Roboto",sans-serif; font-weight:500; font-size:12px; color:var(--text-muted); }
.dash-membership .mp-addon__qty { width:100%; height:40px; border:1px solid var(--border); border-radius:10px; padding:0 14px; font-family:"Roboto",sans-serif; font-size:14px; color:var(--ink); outline:0; }
.dash-membership .mp-addon__qty:focus { border-color:var(--ink); }
.dash-membership a.mp-addon__cta { height:40px; }
@media (max-width:820px){ .dash-membership .mp-addon { flex:1 1 100%; } }

/* generic panel + payment methods ---------------------------- */
.dash-membership .mp-panel { display:flex; flex-direction:column; gap:18px; background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px 28px; }
.dash-membership .mp-addcard { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border:0; border-radius:999px; background:var(--ink); font-family:"Roboto",sans-serif; font-weight:500; font-size:13px; color:var(--brand); cursor:pointer; }
.dash-membership .mp-pay { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; }
.dash-membership .mp-pay__brand { display:flex; align-items:center; justify-content:center; width:46px; height:30px; border-radius:6px; background:var(--cream); font-family:"Roboto Mono",monospace; font-weight:700; font-size:11px; color:var(--ink); flex-shrink:0; }
.dash-membership .mp-pay__info { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.dash-membership .mp-pay__name { font-family:"Roboto",sans-serif; font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }
.dash-membership .mp-pay__exp { font-family:"Roboto",sans-serif; font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-membership .mp-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--ink); font-family:"Roboto Mono",monospace; font-weight:600; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand); }
.dash-membership .mp-pill__dot { width:6px; height:6px; border-radius:999px; background:var(--brand); }
.dash-membership .mp-pay__set { font-family:"Roboto",sans-serif; font-weight:500; font-size:13px; color:var(--text-soft); cursor:pointer; text-decoration:none !important; }
.dash-membership .mp-pay__del { width:32px; height:32px; border:1px solid var(--border); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.dash-membership .mp-pay__del:hover { border-color:var(--ink); }

/* billing history -------------------------------------------- */
.dash-membership .mp-bill { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 4px; border-bottom:1px solid var(--cream-2); text-decoration:none !important; }
.dash-membership .mp-bill__name { display:flex; align-items:center; gap:10px; font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; color:var(--ink); }
.dash-membership .mp-bill__name svg { flex:0 0 auto; }
.dash-membership .mp-bill__date { font-family:"Roboto Mono",monospace; font-weight:500; font-size:12px; letter-spacing:0.04em; color:var(--text-muted); }
.dash-membership .mp-bill-empty { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:36px 20px; border-radius:12px; background:var(--cream); border:1px dashed #D8CFB8; }
.dash-membership .mp-bill-empty__t { font-family:"Roboto",sans-serif; font-weight:700; font-size:15px; color:var(--ink); }
.dash-membership .mp-bill-empty__b { font-family:"Roboto",sans-serif; font-weight:400; font-size:13px; color:var(--text-muted); }
/* legacy invoice-loop rows restyled in place (markup left untouched) */
.dash-membership .billing-history { display:flex; flex-direction:column; }
.dash-membership .billing-history > a { text-decoration:none !important; }
.dash-membership .billing-history h4 { display:none !important; }
.dash-membership .billing-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 4px; border-bottom:1px solid var(--cream-2); }
.dash-membership .billing-item .text { font-family:"Roboto",sans-serif !important; font-weight:500; font-size:14px; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.dash-membership .billing-item .text:last-child { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; color:var(--text-muted); }
.dash-membership .billing-item img { width:18px; height:18px; }

/* testimonials ----------------------------------------------- */
.dash-membership .mp-quote { display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px 26px; height:100%; }
.dash-membership .mp-quote__stars { display:flex; align-items:center; gap:8px; }
.dash-membership .mp-quote__score { font-family:"Roboto Mono",monospace; font-weight:700; font-size:13px; color:var(--ink); }
.dash-membership .mp-quote__text { font-family:"Roboto",sans-serif; font-weight:400; font-size:14px; line-height:22px; color:var(--text-soft); }
.dash-membership .mp-quote__person { display:flex; align-items:center; gap:12px; margin-top:auto; }
.dash-membership .mp-quote__avatar { width:40px; height:40px; border-radius:999px; background:var(--cream-2); display:inline-flex; align-items:center; justify-content:center; font-family:"Roboto",sans-serif; font-weight:700; font-size:13px; color:var(--ink); flex-shrink:0; }
.dash-membership .mp-quote__name { font-family:"Roboto",sans-serif; font-weight:600; font-size:14px; color:var(--ink); }
.dash-membership .mp-quote__role { font-family:"Roboto",sans-serif; font-weight:400; font-size:12px; color:var(--text-muted); }
.dash-membership .carousel-control-prev, .dash-membership .carousel-control-next { width:40px; }

/* faq -------------------------------------------------------- */
.dash-membership .mp-faq { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.dash-membership .mp-faq .accordion-item { border:0; border-bottom:1px solid var(--cream-2); background:transparent; }
.dash-membership .mp-faq .accordion-item:last-child { border-bottom:0; }
.dash-membership .mp-faq .accordion-button { font-family:"Roboto",sans-serif !important; font-weight:600; font-size:15px; color:var(--ink); background:#fff; padding:18px 22px; box-shadow:none; }
.dash-membership .mp-faq .accordion-button:not(.collapsed) { background:#fff; color:var(--ink); box-shadow:none; }
.dash-membership .mp-faq .accordion-button:focus { box-shadow:none; }
.dash-membership .mp-faq .accordion-body { font-family:"Roboto",sans-serif; font-weight:400; font-size:13px; line-height:21px; color:var(--text-muted); padding:0 22px 20px; }

/* help CTA banner -------------------------------------------- */
.dash-membership .mp-help { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; background:var(--ink); border-radius:18px; padding:46px 40px; }
.dash-membership .mp-help__eyebrow { font-family:"Roboto Mono",monospace; font-weight:600; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--brand); }
.dash-membership .mp-help__title { margin:0 !important; font-family:"Roboto",sans-serif; font-weight:800; font-size:28px; line-height:34px; letter-spacing:-0.02em; color:#fff; }
.dash-membership .mp-help__body { margin:0 !important; max-width:520px; font-family:"Roboto",sans-serif; font-weight:400; font-size:14px; line-height:22px; color:#9CA3AF; }
.dash-membership .mp-help__btns { display:flex; align-items:center; gap:12px; margin-top:6px; flex-wrap:wrap; justify-content:center; }
.dash-membership .mp-btn { display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px; border-radius:10px; border:0; font-family:"Roboto",sans-serif; font-weight:600; font-size:14px; cursor:pointer; }
.dash-membership .mp-btn--lime { background:var(--brand); color:var(--ink); }
.dash-membership .mp-btn--ghostd { background:transparent; border:1px solid #3A3A3A; color:#fff; border-radius:999px; font-weight:500; }

/* section headers from legacy .goals-nav (testimonials/FAQ) restyled */
.dash-membership .goals-nav { padding:0 !important; margin:0 !important; }
.dash-membership .goals-nav .breadcrumbs, .dash-membership .goals-nav .breadcrumbs_list { padding:0 !important; margin:0 !important; }
.dash-membership .goals-nav h2 { font-family:"Roboto",sans-serif !important; font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em; color:var(--ink) !important; margin:0 !important; }

/* testimonials carousel cards restyled in place */
.dash-membership #testimonialCarousel .carousel-item > .row { padding:0; }
.dash-membership #testimonialCarousel .profile-card { background:#fff !important; border:1px solid var(--border) !important; border-radius:18px !important; padding:24px 26px !important; box-shadow:none !important; text-align:left !important; height:100%; }
.dash-membership #testimonialCarousel .stars { justify-content:flex-start !important; gap:3px; margin-bottom:8px; }
.dash-membership #testimonialCarousel .stars img { width:16px; height:16px; }
.dash-membership #testimonialCarousel .description { font-family:"Roboto",sans-serif !important; font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft) !important; text-align:left !important; }
.dash-membership #testimonialCarousel .d-flex.align-items-center.justify-content-center { justify-content:flex-start !important; gap:10px; }
.dash-membership #testimonialCarousel h6 { font-family:"Roboto",sans-serif !important; font-weight:600 !important; font-size:14px !important; color:var(--ink) !important; }
.dash-membership #testimonialCarousel .text { font-family:"Roboto",sans-serif !important; font-weight:400; font-size:12px; color:var(--text-muted) !important; }
.dash-membership #testimonialCarousel img[alt$="photo"] { width:38px; height:38px; border-radius:999px; }

@media (max-width:980px){
  .dash-membership .mp-card { flex:1 1 100%; }
}
@media (max-width:680px){
  .dash-membership .mp-title { font-size:30px; line-height:36px; }
  .dash-membership .mp-subrow { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   .mp-modal-* — popups on the Membership Plans page.
   Two variants live here: --downgrade (the "downgrade your plan"
   confirm dialog) and --cycle (the Monthly/Annual billing-cycle
   picker used by both "Current plan" and Business "Get started").
   GLOBAL (not nested under .dash-membership) because the modal
   trees use display:flex/none to position-fix over the viewport;
   we don't want sidebar/topnav z-index to be a factor.
   PRESERVES legacy hooks: #css-only-modals + #modal1 + #close-modal-btn
   + #screen-shade (downgrade); #exampleModalCenter + #monthlySubscriptionPrice
   + #yearlySubscriptionPrice1/2 + .btn-green + radio inputs #monthly/#yearly
   (cycle). Open/close via the inline IIFE + delegated [data-toggle="modal"
   data-target="#exampleModalCenter"] handler (vanilla; jQuery removed).
   ============================================================ */
.mp-modal { position:fixed; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh; z-index:99999; display:none; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; }
.mp-modal.is-active { display:flex; }
.mp-modal__legacy-input { display:none !important; }
.mp-modal__scrim { position:absolute; inset:0; background:rgba(10,10,10,0.55); cursor:pointer; z-index:0; }
.mp-modal__panel { position:relative; z-index:1; display:flex; flex-direction:column; gap:22px; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:18px; padding:32px 36px; box-shadow:0 24px 60px rgba(10,10,10,0.35); max-height:calc(100vh - 48px); overflow-y:auto; box-sizing:border-box; animation:mpModalIn 0.18s ease-out; }
.mp-modal__panel--downgrade { max-width:480px; width:100%; }
.mp-modal__panel--cycle { max-width:540px; width:100%; padding:28px 32px 26px; }
@keyframes mpModalIn { from { opacity:0; transform:translateY(8px) scale(0.985); } to { opacity:1; transform:translateY(0) scale(1); } }

/* head + close */
.mp-modal__head { display:flex; gap:16px; align-items:flex-start; }
.mp-modal__head--center { flex-direction:column; align-items:center; text-align:center; gap:10px; }
.mp-modal__heading { display:flex; flex-direction:column; gap:8px; flex-grow:1; min-width:0; }
.mp-modal__icon { flex-shrink:0; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.mp-modal__icon--warn { background:#FEF3C7; }
.mp-modal__close { position:absolute; top:16px; right:16px; background:#F3F4F6; border:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s; padding:0; z-index:2; }
.mp-modal__close:hover { background:#E5E7EB; }
.mp-modal__eyebrow { display:inline-flex; align-items:center; gap:8px; }
.mp-modal__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.mp-modal__dot--lime { background:#C5F154; }
.mp-modal__dot--amber { background:#EAB308; }
.mp-modal__mono { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:#6B7280; }
.mp-modal__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700 !important; font-size:22px !important; line-height:28px !important; color:#0A0A0A !important; margin:0 !important; }

/* body */
.mp-modal__body { display:flex; flex-direction:column; gap:14px; }
.mp-modal__copy { font-family:"Roboto",system-ui,sans-serif !important; font-size:15px !important; line-height:24px !important; color:#4B5563 !important; margin:0 !important; }
.mp-modal__copy--center { text-align:center; color:#6B7280 !important; }
.mp-modal__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.mp-modal__list li { position:relative; padding-left:18px; font-family:"Roboto",system-ui,sans-serif !important; font-size:13px; line-height:20px; color:#6B7280; }
.mp-modal__list li::before { content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:#9CA3AF; }

/* footer + buttons */
.mp-modal__footer { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding-top:6px; flex-wrap:wrap; }
.mp-modal__cta { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; font-family:"Roboto",system-ui,sans-serif !important; font-weight:500; font-size:14px; line-height:18px; text-decoration:none; cursor:pointer; border:none; transition:filter 0.15s, background 0.15s, color 0.15s; box-sizing:border-box; }
.mp-modal__cta--dark { background:#0A0A0A; color:#C5F154 !important; }
.mp-modal__cta--dark:hover { filter:brightness(1.1); color:#C5F154 !important; text-decoration:none; }
.mp-modal__cta--ghost { background:transparent; color:#0A0A0A !important; border:1px solid #0A0A0A; padding:10px 17px; }
.mp-modal__cta--ghost:hover { background:#F5F1E8; color:#0A0A0A !important; text-decoration:none; }
.mp-modal__cta-arrow { font-size:14px; line-height:1; }

/* cycle picker — radio tiles */
.mp-cycle-options { display:flex; flex-direction:column; gap:12px; }
.mp-cycle-option { position:relative; display:flex; align-items:center; gap:16px; padding:18px 20px; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:12px; cursor:pointer; transition:border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.mp-cycle-option:hover { border-color:#9CA3AF; }
.mp-cycle-option input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
.mp-cycle-option__check { flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1.5px solid #D1D5DB; background:#FFFFFF; position:relative; transition:border-color 0.15s; }
.mp-cycle-option:has(:checked) { border-color:#0A0A0A; background:#FAFAF7; box-shadow:0 0 0 3px rgba(10,10,10,0.06); }
.mp-cycle-option:has(:checked) .mp-cycle-option__check { border-color:#0A0A0A; }
.mp-cycle-option:has(:checked) .mp-cycle-option__check::after { content:""; position:absolute; inset:3px; border-radius:50%; background:#0A0A0A; }
.mp-cycle-option__body { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-grow:1; min-width:0; }
.mp-cycle-option__head { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mp-cycle-option__name { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:16px; line-height:20px; color:#0A0A0A; }
.mp-cycle-option__sub { font-family:"Roboto",system-ui,sans-serif !important; font-size:12px; line-height:16px; color:#6B7280; }
.mp-cycle-option__price { display:inline-flex; align-items:baseline; gap:1px; flex-shrink:0; }
.mp-cycle-option__cur { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:16px; line-height:20px; color:#0A0A0A; }
.mp-cycle-option__num { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800; font-size:28px; line-height:32px; color:#0A0A0A; letter-spacing:-0.01em; }
.mp-cycle-option__per { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; color:#6B7280; padding-left:2px; }
.mp-cycle-option__tag { position:absolute; top:-9px; right:16px; background:#C5F154; color:#0A0A0A; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1.5px solid #0A0A0A; }

/* responsive */
@media (max-width:560px){
  .mp-modal { padding:16px; }
  .mp-modal__panel { padding:24px; gap:18px; }
  .mp-modal__icon { width:36px; height:36px; }
  .mp-modal__title { font-size:19px !important; line-height:24px !important; }
  .mp-modal__footer { flex-direction:column; align-items:stretch; }
  .mp-modal__cta { justify-content:center; }
  .mp-cycle-option { flex-direction:column; align-items:stretch; gap:14px; }
  .mp-cycle-option__body { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ============================================================
   .dash-invoices — Invoices / billing history (invoicesTest /
   route /invoiceTest). REUSES the .dash-jobs (jb-*) table layer
   verbatim (the wrapper carries both classes). Only the bits the
   jobs table didn't have: a Subscription/Top-up tab control, a
   search + status + date + reset toolbar, a document-icon avatar
   and a download action button. Wired to the real billingHistory
   (Stripe) + topupBillingHistory (Topup.payments); the status pill
   is 2-state (Paid/Succeeded -> open pill, anything else -> muted).
   ============================================================ */
.dash-invoices {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB;
}

/* Subscription / Top-up tab control */
.dash-invoices .inv-tabs { display:inline-flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--cream); }
.dash-invoices .inv-tab { border:0; background:transparent; padding:8px 16px; border-radius:8px; font-family:"Roboto",sans-serif; font-weight:600; font-size:13px; line-height:16px; color:var(--text-muted); white-space:nowrap; cursor:pointer; transition:background .15s, color .15s; }
.dash-invoices .inv-tab:hover { color:var(--ink); }
.dash-invoices .inv-tab.is-active { background:var(--ink); color:var(--brand); }
.dash-invoices .inv-tab.is-active:hover { color:var(--brand); }
.dash-invoices .inv-count { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); white-space:nowrap; }

/* filter toolbar */
.dash-invoices .inv-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dash-invoices .inv-filters .jb-search { flex:1 1 240px; width:auto; }
.dash-invoices .inv-filters .jb-filter { flex:0 0 auto; min-width:170px; }
.dash-invoices .inv-date { height:40px; border:1px solid var(--border); border-radius:10px; background:#fff; padding:0 14px; font-family:"Roboto",sans-serif; font-size:14px; color:var(--ink); outline:0; }
.dash-invoices .inv-date:focus { border-color:var(--ink); }
.dash-invoices .inv-reset { border:0; background:transparent; padding:0 8px; height:40px; font-family:"Roboto",sans-serif; font-weight:600; font-size:13px; line-height:16px; color:var(--text-muted); cursor:pointer; white-space:nowrap; }
.dash-invoices .inv-reset:hover { color:var(--ink); }

/* document-icon avatar + download action */
.dash-invoices .jb-avatar.inv-doc { border-radius:10px; background:var(--cream-2); }
.dash-invoices a.jb-act.inv-download { gap:8px; }
.dash-invoices a.jb-act.inv-download svg { flex:0 0 auto; }

@media (max-width:720px){
  .dash-invoices .inv-filters .jb-search,
  .dash-invoices .inv-filters .jb-filter,
  .dash-invoices .inv-date { flex:1 1 100%; min-width:0; width:auto; }
}

/* ============================================================
   .dash-cs — Credit Statements ledger (employer-credit-statement-listTest /
   route /employer_creditStatementsTest). REUSES the .dash-jobs (jb-*) table
   layer verbatim (wrapper carries both classes). Adds only a dark credit-
   balance header card, a coin-icon avatar, and an operation-name case
   override. Credit vs debit uses the 2-state jb-pill (increment -> open +N,
   else muted -N). Server-rendered real credit_statement ledger.
   ============================================================ */
.dash-cs {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB;
}
.dash-cs .cs-balance { display:flex; align-items:center; gap:14px; flex:0 0 auto; padding:16px 20px; background:var(--ink); border-radius:14px; }
.dash-cs .cs-balance__coin { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:var(--brand); flex:0 0 auto; }
.dash-cs .cs-balance__coin svg { flex:0 0 auto; }
.dash-cs .cs-balance__meta { display:flex; flex-direction:column; gap:3px; }
.dash-cs .cs-balance__label { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-cs .cs-balance__val { font-weight:800; font-size:28px; line-height:30px; letter-spacing:-0.02em; color:#fff; }
.dash-cs .jb-avatar.cs-doc { border-radius:10px; background:var(--cream-2); }
.dash-cs .jb-avatar.cs-doc svg { flex:0 0 auto; }
.dash-cs .jb-job__name { text-transform:none; }

@media (max-width:720px){
  .dash-cs .cs-balance { align-self:flex-start; }
}

/* ============================================================
   .dash-csd — Credit Statement DETAIL (employer-view-complete-credit-
   statementTest / route /employer_viewFullCreditStatementTest_*). A
   read-only record: two-column (statement details + contextual operation
   details on the left, a receipt-style amount summary on the right).
   Reuses .dash-jobs header vocabulary (jb-head/chip/crumb/title/subtitle/
   back) + jb-pill for the Credit/Debit tag; only the detail cards are new.
   ============================================================ */
.dash-csd {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB;
}
.dash-csd .csd-grid { display:flex; gap:20px; align-items:flex-start; }
.dash-csd .csd-main { display:flex; flex-direction:column; gap:20px; flex:1 1 0; min-width:0; }
.dash-csd .csd-side { display:flex; flex-direction:column; gap:20px; width:380px; flex:0 0 auto; }
.dash-csd .csd-card { display:flex; flex-direction:column; gap:18px; padding:24px 28px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-csd .csd-card__head { display:flex; flex-direction:column; gap:4px; }
.dash-csd .csd-eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-csd h2.csd-title { font-weight:700 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-csd .csd-fields { display:flex; flex-wrap:wrap; gap:20px 24px; }
.dash-csd .csd-field { display:flex; flex-direction:column; gap:5px; flex:1 1 200px; min-width:0; }
.dash-csd .csd-field--wide { flex-basis:100%; }
.dash-csd .csd-field__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); }
.dash-csd .csd-field__value { font-weight:500; font-size:15px; line-height:22px; color:var(--ink); word-break:break-word; }
.dash-csd .csd-field__value--mono { font-family:"Roboto Mono",monospace !important; font-size:13px; word-break:break-all; }
.dash-csd .csd-summary { gap:16px; }
.dash-csd .csd-amount { display:flex; align-items:baseline; gap:8px; }
.dash-csd .csd-amount__num { font-weight:800; font-size:44px; line-height:44px; letter-spacing:-0.02em; color:var(--ink); }
.dash-csd .csd-amount__unit { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-disabled); }
.dash-csd .csd-pill { align-self:flex-start; }
.dash-csd .csd-divider { height:1px; width:100%; background:var(--cream-2); }

@media (max-width:900px){
  .dash-csd .csd-grid { flex-direction:column; }
  .dash-csd .csd-side { width:100%; }
}

/* ============================================================
   .dash-set — Settings (employerChangePasswordTest /
   route /employerChangePasswordTest). Two-column themed cards:
   Security (password + 2FA), Visibility (profile/company links +
   public toggles), Notifications (reminder prefs). Reuses .dash-jobs
   header + jb-filter (selects) + jb-cta (buttons); adds switches,
   field inputs, link rows and consent checkboxes.
   ============================================================ */
.dash-set {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB;
}
.dash-set .set-grid { display:flex; gap:20px; align-items:flex-start; }
.dash-set .set-col { display:flex; flex-direction:column; gap:20px; min-width:0; }
.dash-set .set-col--main { flex:1.1 1 0; }
.dash-set .set-col--side { flex:1 1 0; }
.dash-set .set-card { display:flex; flex-direction:column; gap:18px; padding:24px 28px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-set .set-form { display:flex; flex-direction:column; gap:18px; }
.dash-set .set-card__head { display:flex; flex-direction:column; gap:4px; }
.dash-set .set-eyebrow { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-set h2.set-title { font-weight:700 !important; font-size:20px !important; line-height:26px !important; letter-spacing:-0.01em !important; color:var(--ink); }
.dash-set .set-field { display:flex; flex-direction:column; gap:6px; }
.dash-set .set-label { font-weight:500; font-size:13px; line-height:18px; color:var(--text-soft); }
.dash-set input.set-input { width:100%; height:48px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:#fff; font-family:"Roboto",sans-serif; font-size:15px; color:var(--ink); outline:0; }
.dash-set input.set-input:focus { border-color:var(--ink); }
.dash-set .set-error { font-size:13px; line-height:18px; color:#DC2626; }
.dash-set .set-footer { display:flex; justify-content:flex-end; }
.dash-set .set-divider { height:1px; width:100%; background:var(--cream-2); }
.dash-set .set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dash-set .set-row__text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dash-set .set-row__title { font-weight:600; font-size:15px; line-height:20px; color:var(--ink); }
.dash-set .set-row__desc { font-weight:400; font-size:13px; line-height:18px; color:var(--text-muted); }

/* toggle switch (wraps the real checkbox) */
.dash-set .set-switch { position:relative; display:inline-flex; width:44px; height:24px; flex:0 0 auto; }
.dash-set .set-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.dash-set .set-switch__track { width:44px; height:24px; border-radius:999px; background:var(--border); position:relative; transition:background .15s; }
.dash-set .set-switch__track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s, background .15s; }
.dash-set .set-switch input:checked + .set-switch__track { background:var(--ink); }
.dash-set .set-switch input:checked + .set-switch__track::after { left:23px; background:var(--brand); }

/* read-only link + copy */
.dash-set .set-link { display:flex; align-items:center; gap:8px; }
.dash-set input.set-link__input { flex:1 1 0; min-width:0; height:44px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:var(--cream); font-family:"Roboto Mono",monospace; font-size:13px; color:var(--text-muted); outline:0; text-overflow:ellipsis; }
.dash-set .set-copy { display:inline-flex; align-items:center; height:44px; padding:0 16px; border:1px solid var(--border); border-radius:10px; background:#fff; font-family:"Roboto",sans-serif; font-weight:600; font-size:13px; line-height:16px; color:var(--text-soft); cursor:pointer; flex:0 0 auto; white-space:nowrap; }
.dash-set .set-copy:hover { border-color:var(--ink); color:var(--ink); }

/* consent checkbox */
.dash-set .set-consent { display:flex; align-items:center; gap:10px; cursor:pointer; }
.dash-set .set-consent input { position:absolute; opacity:0; width:0; height:0; }
.dash-set .set-consent__box { position:relative; flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:1.5px solid #D1D5DB; background:#fff; box-sizing:border-box; }
.dash-set .set-consent input:checked + .set-consent__box { background:var(--ink); border-color:var(--ink); }
.dash-set .set-consent input:checked + .set-consent__box::after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--brand); border-width:0 2px 2px 0; transform:rotate(45deg); }
.dash-set .set-consent__label { font-weight:400; font-size:14px; line-height:20px; color:var(--ink); }

/* 2-up selects (reuse jb-filter for the select chrome) */
.dash-set .set-2up { display:flex; flex-wrap:wrap; gap:16px; }
.dash-set .set-2up .set-field { flex:1 1 180px; min-width:0; }
.dash-set .set-2up .jb-filter { min-width:0; }

@media (max-width:900px){
  .dash-set .set-grid { flex-direction:column; }
  .dash-set .set-col--main, .dash-set .set-col--side { width:100%; flex:1 1 100%; }
}

/* ============================================================
   queryRaiseTest (Report an Issue) — REUSES the .dash-buildteam
   (.bt-*) centered-form layer. Adds a dropzone (mirrors the
   .dash-bt-modal one), an image preview, and a success overlay
   (global .qr-success, rendered after the wrapper).
   ============================================================ */
.dash-buildteam .bt-dropzone { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 24px; border-radius:14px; background:var(--cream); border:1px dashed #D8CFB8; cursor:pointer; text-align:center; }
.dash-buildteam .bt-dropzone:hover { border-color:var(--ink); }
.dash-buildteam .bt-dropzone__icon { width:48px; height:48px; border-radius:12px; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; }
.dash-buildteam .bt-dropzone__title { font-weight:600; font-size:15px; line-height:20px; color:var(--ink); }
.dash-buildteam .bt-dropzone__hint { font-weight:400; font-size:12px; line-height:16px; color:var(--text-muted); }
.dash-buildteam .bt-dropzone__btn { display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--ink); font-weight:500; font-size:13px; color:var(--ink); margin-top:2px; }
.dash-buildteam .bt-dropzone__input { display:none; }

.dash-buildteam .qr-preview { position:relative; width:fit-content; margin-top:4px; }
.dash-buildteam .qr-preview__img { max-width:220px; border-radius:12px; display:block; object-fit:cover; }
.dash-buildteam .qr-preview__remove { position:absolute; top:8px; right:8px; width:28px; height:28px; border:0; border-radius:50%; background:rgba(10,10,10,0.72); color:#fff; font-size:18px; line-height:28px; text-align:center; cursor:pointer; z-index:2; }
.dash-buildteam .qr-preview__name { font-size:13px; line-height:18px; color:var(--text-muted); margin-top:6px; }

/* success overlay (global) */
.qr-success { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(10,10,10,0.55); padding:24px; }
.qr-success__card { width:min(92vw,460px); background:#fff; border-radius:18px; padding:36px 32px; text-align:center; box-shadow:0 24px 60px rgba(10,10,10,0.35); font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.qr-success__badge { width:56px; height:56px; border-radius:16px; background:#C5F154; display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; }
.qr-success__title { margin:0 0 8px !important; font-weight:800; font-size:24px; line-height:28px; letter-spacing:-0.01em; color:#0A0A0A; }
.qr-success__body { margin:0 0 22px !important; font-weight:400; font-size:14px; line-height:22px; color:#6B7280; }
.qr-success__btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border:0; border-radius:10px; background:#0A0A0A; color:#C5F154; font-family:"Roboto",sans-serif; font-weight:600; font-size:14px; line-height:18px; cursor:pointer; }
.qr-success__btn:hover { background:#1A1A1A; }

/* ============================================================
   Sidebar (left menu) reskin — Paper-aligned chrome. CSS-only
   override of the shared .sidebar-nav (views/partials/employer/
   employer-header-testV2.ejs); loaded after style-test.css so it
   wins. Zero markup change; applies to every employer role (shared
   markup). White rail + hairline, Roboto-Mono group labels, rounded
   items, muted icons, and a dark active pill with a lime label.
   Inactive icons are monochrome black, so they recolour cleanly.
   ============================================================ */
#sidebar-wrapper { background:#fff !important; box-shadow:none !important; border-right:1px solid #ECEAE1 !important; }
#sidebar-wrapper .navbar { padding:14px 0 6px !important; }

.sidebar-nav { margin-top:4px !important; }
.sidebar-nav li { text-indent:0 !important; line-height:normal !important; margin:0 0 2px !important; }

/* group labels (the <h6> section headers) */
.sidebar-nav h6 {
  margin:18px 24px 6px !important; text-indent:0 !important;
  font-family:"Roboto Mono",monospace !important; font-weight:600 !important;
  font-size:10px !important; letter-spacing:0.12em !important; line-height:14px !important;
  text-transform:uppercase !important; color:#9CA3AF !important;
}
.sidebar-nav h6:first-child { margin-top:6px !important; }

/* nav items */
.sidebar-nav li a {
  display:flex !important; align-items:center !important; gap:12px !important;
  margin:0 12px !important; padding:9px 12px !important; border-radius:10px !important;
  color:#4B5563 !important; font-family:"Roboto",sans-serif !important;
  font-weight:500 !important; font-size:14px !important; line-height:20px !important;
}
.sidebar-nav li a .active { display:none !important; }   /* always use the (black) inactive glyph; recolour per state */
.sidebar-nav li a .inactive { display:block !important; }
.sidebar-nav li a img { width:18px !important; height:18px !important; object-fit:contain; flex:0 0 auto; opacity:0.5; }
.sidebar-nav li a:hover { background:#F5F3EC !important; color:#0A0A0A !important; border-radius:10px !important; }
.sidebar-nav li a:hover img { opacity:0.8; }

/* active = dark pill + lime label + white glyph */
.sidebar-nav li.active a,
.sidebar-nav li.active a:hover,
.sidebar-nav li.active a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background:#0A0A0A !important; color:#C5F154 !important; border-radius:10px !important;
}
.sidebar-nav li.active a img { filter:brightness(0) invert(1) !important; opacity:1 !important; }

/* sign out (kept red, slightly muted glyph) */
.sidebar-nav li.sign-out a { color:#EF4444 !important; }
.sidebar-nav li.sign-out a:hover { background:#FEF2F2 !important; color:#DC2626 !important; }
.sidebar-nav li.sign-out a img { filter:none !important; opacity:0.9 !important; }

/* ============================================================
   .dash-goalview — Employer view of an employee's goals
   (employee-goals-tracker-employerTest / route employerViewGoalsEmployeeTest_*).
   REUSES .dash-jobs (jb-*) table + jb-progress verbatim; only adds a
   4-up KPI row (computed from real goals) + a title case override.
   ============================================================ */
.dash-goalview { --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC; --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF; --border:#E5E7EB; }
.dash-goalview .gv-kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.dash-goalview .gv-kpi { display:flex; flex-direction:column; gap:16px; padding:22px 24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-goalview .gv-kpi__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-goalview .gv-kpi__val { font-weight:800 !important; font-size:44px !important; line-height:44px !important; letter-spacing:-0.02em; color:var(--ink); }
.dash-goalview .jb-cell-strong { text-transform:none; }

@media (max-width:1080px){ .dash-goalview .gv-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .dash-goalview .gv-kpis { grid-template-columns:1fr; } }

/* ============================================================
   .dash-advancedreports — AI insights + live metrics page
   (advancedReports-test / route /advancedReportsTest).
   Hybrid: editorial AI narrative (or graceful empty card) on top,
   live data section below (KPI strip + 4 polar cards + multi-line
   timeline). Fills the content area; chart cards use min-height
   so canvases get measurable size.
   ============================================================ */
.dash-advancedreports { --brand:#C5F154; --ink:#0A0A0A; --soft-ink:#1F2937; --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF; --border:#E5E7EB; --hairline:#F3F4F6; --gray:#9CA3AF; --soft:#E5E7EB; --amber:#EAB308; --blue:#3B82F6; --bg:#FAFAF7; }
.dash-advancedreports.container-fluid { padding:0; }
.dash-advancedreports .ar-board { display:flex; flex-direction:column; gap:40px; padding:48px 56px 80px; box-sizing:border-box; background:var(--bg); width:100%; min-width:0; }
.dash-advancedreports > * { width:100% !important; max-width:none !important; }

/* shared atoms */
.dash-advancedreports .ar-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.dash-advancedreports .ar-dot--lime { background:var(--brand); }
.dash-advancedreports .ar-dot--amber { background:var(--amber); }
.dash-advancedreports .ar-dot--blue { background:var(--blue); }
.dash-advancedreports .ar-dot--ink { background:var(--ink); }
.dash-advancedreports .ar-mono { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-advancedreports .ar-mono--lime { color:var(--brand) !important; font-size:12px; line-height:16px; }
.dash-advancedreports .ar-bullet { width:5px; height:5px; border-radius:50%; flex-shrink:0; display:inline-block; margin-top:8px; }
.dash-advancedreports .ar-bullet--lime { background:var(--brand); }
.dash-advancedreports .ar-bullet--amber { background:var(--amber); }
.dash-advancedreports .ar-bullet--blue { background:var(--blue); }
.dash-advancedreports .ar-bullet--ink { background:var(--ink); }
.dash-advancedreports .ar-swatch { width:10px; height:10px; border-radius:2px; flex-shrink:0; display:inline-block; }
.dash-advancedreports .ar-swatch--ink { background:var(--ink); }
.dash-advancedreports .ar-swatch--lime { background:var(--brand); }
.dash-advancedreports .ar-swatch--gray { background:var(--gray); }
.dash-advancedreports .ar-swatch--dark { background:var(--text-soft); }
.dash-advancedreports .ar-swatch--soft { background:var(--soft); }

/* page header */
.dash-advancedreports .ar-head { display:flex; flex-direction:column; gap:14px; max-width:980px; }
.dash-advancedreports .ar-head__chip-row { display:flex; align-items:center; gap:12px; }
.dash-advancedreports .ar-head__chip { background:var(--ink); color:var(--brand); font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.08em; padding:6px 9px; border-radius:6px; text-transform:uppercase; }
.dash-advancedreports .ar-head__crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-advancedreports .ar-head__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:44px !important; line-height:52px !important; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.dash-advancedreports .ar-head__sub { font-family:"Roboto",system-ui,sans-serif !important; font-size:16px !important; line-height:25px !important; color:var(--text-muted); margin:0; max-width:680px; }

/* dark exec summary card (AI populated) */
.dash-advancedreports .ar-exec, .dash-advancedreports .ar-ai-empty { background:var(--ink); border-radius:18px; padding:32px 36px; display:flex; flex-direction:column; gap:18px; color:#FFFFFF; box-sizing:border-box; }
.dash-advancedreports .ar-exec__eyebrow { display:flex; align-items:center; gap:10px; }
.dash-advancedreports .ar-exec__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:26px !important; line-height:33px !important; color:#FFFFFF; margin:0; max-width:780px; }
.dash-advancedreports .ar-exec__body { font-family:"Roboto",system-ui,sans-serif !important; font-size:15px !important; line-height:24px !important; color:#9CA3AF; margin:0; max-width:840px; }
.dash-advancedreports .ar-exec__kpis { display:flex; gap:48px; padding-top:6px; flex-wrap:wrap; }
.dash-advancedreports .ar-exec__kpi { display:flex; flex-direction:column; gap:4px; }
.dash-advancedreports .ar-exec__kpi-label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-advancedreports .ar-exec__kpi-val { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:28px !important; line-height:34px !important; color:#FFFFFF; }
.dash-advancedreports .ar-exec__kpi-val--accent { color:var(--brand) !important; }

/* AI empty card extras */
.dash-advancedreports .ar-ai-empty__actions { display:flex; align-items:center; gap:14px; padding-top:8px; flex-wrap:wrap; }
.dash-advancedreports .ar-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; font-family:"Roboto",system-ui,sans-serif; font-weight:500; font-size:14px; line-height:18px; text-decoration:none; transition:filter 0.15s; }
.dash-advancedreports .ar-cta--lime { background:var(--brand); color:var(--ink) !important; }
.dash-advancedreports .ar-cta--lime:hover { filter:brightness(0.95); }
.dash-advancedreports .ar-cta__plus { font-weight:700; line-height:1; }
.dash-advancedreports .ar-ai-empty__hint { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }

/* findings header */
.dash-advancedreports .ar-findings-head { display:flex; align-items:center; justify-content:space-between; }
.dash-advancedreports .ar-findings-head__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700 !important; font-size:18px !important; line-height:22px !important; color:var(--ink); margin:0; }
.dash-advancedreports .ar-findings-head__tag { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.04em; color:var(--text-disabled); }

/* findings 2x2 */
.dash-advancedreports .ar-findings { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.dash-advancedreports .ar-finding { background:#FFFFFF; border:1px solid var(--border); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:14px; box-sizing:border-box; }
.dash-advancedreports .ar-finding__eyebrow { display:flex; align-items:center; gap:8px; }
.dash-advancedreports .ar-finding__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700 !important; font-size:18px !important; line-height:22px !important; color:var(--ink); margin:0; }
.dash-advancedreports .ar-finding__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.dash-advancedreports .ar-finding__item { display:flex; gap:10px; align-items:flex-start; }
.dash-advancedreports .ar-finding__text { font-family:"Roboto",system-ui,sans-serif !important; font-size:14px !important; line-height:21px !important; color:var(--text-soft); }
.dash-advancedreports .ar-finding__empty { font-family:"Roboto",system-ui,sans-serif !important; font-size:13px !important; line-height:20px !important; color:var(--text-disabled); margin:0; font-style:italic; }

/* "By the numbers" section heading */
.dash-advancedreports .ar-section-head { display:flex; align-items:center; justify-content:space-between; }
.dash-advancedreports .ar-section-head__left { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.dash-advancedreports .ar-section-head__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700 !important; font-size:18px !important; line-height:22px !important; color:var(--ink); margin:0; }
.dash-advancedreports .ar-section-head__sub { font-family:"Roboto",system-ui,sans-serif !important; font-size:14px !important; line-height:20px !important; color:var(--text-disabled); }
.dash-advancedreports .ar-section-head__stamp { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-disabled); }

/* KPI strip */
.dash-advancedreports .ar-kpi-strip { background:#FFFFFF; border:1px solid var(--border); border-radius:16px; padding:24px 28px; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); box-sizing:border-box; }
.dash-advancedreports .ar-kpi-cell { display:flex; flex-direction:column; gap:6px; padding:0 20px; border-right:1px solid var(--hairline); }
.dash-advancedreports .ar-kpi-cell:first-child { padding-left:0; }
.dash-advancedreports .ar-kpi-cell--last, .dash-advancedreports .ar-kpi-cell:last-child { border-right:none; padding-right:0; }
.dash-advancedreports .ar-kpi-cell__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-advancedreports .ar-kpi-cell__val { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:30px !important; line-height:34px !important; color:var(--ink); }

/* 2x2 chart cards */
.dash-advancedreports .ar-charts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.dash-advancedreports .ar-chart-card { background:#FFFFFF; border:1px solid var(--border); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:18px; box-sizing:border-box; }
.dash-advancedreports .ar-chart-card__eyebrow { display:flex; align-items:center; gap:8px; }
.dash-advancedreports .ar-chart-card__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700 !important; font-size:18px !important; line-height:22px !important; color:var(--ink); margin:0; }
.dash-advancedreports .ar-chart-card__body { display:flex; align-items:center; gap:28px; padding:8px 0; }
.dash-advancedreports .ar-canvas-wrap { position:relative; flex-shrink:0; }
.dash-advancedreports .ar-canvas-wrap--polar { width:180px; height:180px; }
.dash-advancedreports .ar-canvas-wrap--timeline { width:100%; height:260px; padding-top:8px; }
.dash-advancedreports .ar-canvas-wrap canvas { width:100% !important; height:100% !important; }

/* legend list inside chart cards */
.dash-advancedreports .ar-legend { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.dash-advancedreports .ar-legend__row { display:flex; align-items:center; gap:10px; }
.dash-advancedreports .ar-legend__label { font-family:"Roboto",system-ui,sans-serif !important; font-size:13px !important; line-height:18px !important; color:var(--text-soft); flex-grow:1; }
.dash-advancedreports .ar-legend__val { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px; line-height:18px; color:var(--ink); }
.dash-advancedreports .ar-legend__rule { height:1px; background:var(--hairline); margin:4px 0; }
.dash-advancedreports .ar-legend__stat { display:flex; flex-direction:column; gap:2px; }
.dash-advancedreports .ar-legend__stat-label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-advancedreports .ar-legend__stat-val { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:22px !important; line-height:26px !important; color:var(--ink); }

/* timeline card */
.dash-advancedreports .ar-timeline { background:#FFFFFF; border:1px solid var(--border); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:18px; box-sizing:border-box; }
.dash-advancedreports .ar-timeline__head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dash-advancedreports .ar-timeline__heading { display:flex; flex-direction:column; gap:8px; }
.dash-advancedreports .ar-timeline__legend { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.dash-advancedreports .ar-timeline__legend-item { display:inline-flex; align-items:center; gap:8px; font-family:"Roboto",system-ui,sans-serif !important; font-size:13px !important; line-height:18px !important; color:var(--text-soft); }
.dash-advancedreports .ar-line-swatch { width:18px; height:3px; border-radius:2px; flex-shrink:0; display:inline-block; }
.dash-advancedreports .ar-line-swatch--ink { background:var(--ink); }
.dash-advancedreports .ar-line-swatch--lime { background:var(--brand); }
.dash-advancedreports .ar-line-swatch--gray { background:var(--gray); }

/* responsive */
@media (max-width:1140px){
  .dash-advancedreports .ar-findings { grid-template-columns:1fr; }
  .dash-advancedreports .ar-charts { grid-template-columns:1fr; }
  .dash-advancedreports .ar-kpi-strip { grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:18px; }
  .dash-advancedreports .ar-kpi-cell:nth-child(3n) { border-right:none; padding-right:0; }
  .dash-advancedreports .ar-kpi-cell:nth-child(3n+1) { padding-left:0; }
}
@media (max-width:720px){
  .dash-advancedreports .ar-board { padding:32px 24px 56px; gap:32px; }
  .dash-advancedreports .ar-head__title { font-size:32px !important; line-height:38px !important; }
  .dash-advancedreports .ar-kpi-strip { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dash-advancedreports .ar-kpi-cell { border-right:none !important; padding:0 0 4px !important; }
  .dash-advancedreports .ar-chart-card__body { flex-direction:column; align-items:stretch; gap:18px; }
  .dash-advancedreports .ar-canvas-wrap--polar { width:160px; height:160px; align-self:center; }
  .dash-advancedreports .ar-exec__kpis { gap:28px; }
}

/* ============================================================
   .dash-topup — Buy add-on checkout (topupPayment / /buy-topup)
   Two-panel: card form left + order summary right. Stripe Elements
   mount inside .tp-stripe-input slots (#card-element /
   #expiration-element / #cvv-element). #subscription-form, #email,
   #card-errors and the AJAX hooks /create-payment-intent +
   /confirm-topup-payment are PRESERVED. Loading overlay #loading-modal
   ADDED (legacy code referenced it but DOM was missing).
   ============================================================ */
.dash-topup { --brand:#C5F154; --ink:#0A0A0A; --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF; --border:#E5E7EB; --hairline:#F3F4F6; --cream:#F5F1E8; --cream-2:#F0EBDC; --error:#DC2626; --bg:#FAFAF7; }
.dash-topup.container-fluid { padding:0; }
.dash-topup .tp-board { display:flex; flex-direction:column; gap:32px; padding:48px 56px 80px; box-sizing:border-box; background:var(--bg); width:100%; min-width:0; }
.dash-topup > * { width:100% !important; max-width:none !important; }

/* atoms */
.dash-topup .tp-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.dash-topup .tp-dot--lime { background:var(--brand); }
.dash-topup .tp-mono { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-topup .tp-mono--muted { color:var(--text-disabled); }

/* header */
.dash-topup .tp-head { display:flex; flex-direction:column; gap:14px; max-width:980px; }
.dash-topup .tp-head__chip-row { display:flex; align-items:center; gap:12px; }
.dash-topup .tp-head__chip { background:var(--ink); color:var(--brand); font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.08em; padding:6px 9px; border-radius:6px; text-transform:uppercase; }
.dash-topup .tp-head__crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.dash-topup .tp-head__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800 !important; font-size:44px !important; line-height:52px !important; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.dash-topup .tp-head__sub { font-family:"Roboto",system-ui,sans-serif !important; font-size:16px !important; line-height:25px !important; color:var(--text-muted); margin:0; max-width:680px; }
.dash-topup .tp-head__sub strong { color:var(--ink); font-weight:600; }
.dash-topup .tp-head__back { display:inline-flex; align-items:center; gap:6px; font-family:"Roboto",system-ui,sans-serif; font-size:14px; line-height:18px; color:var(--text-muted); text-decoration:none; padding-top:4px; width:fit-content; transition:color 0.15s; }
.dash-topup .tp-head__back:hover { color:var(--ink); text-decoration:none; }
.dash-topup .tp-head__back-arrow { font-size:16px; line-height:1; }

/* grid */
.dash-topup .tp-grid { display:flex; gap:32px; align-items:flex-start; }

/* form card */
.dash-topup .tp-form-card { background:#FFFFFF; border:1px solid var(--border); border-radius:18px; padding:32px 36px; display:flex; flex-direction:column; gap:24px; flex-grow:1; flex-basis:0; min-width:0; box-sizing:border-box; }
.dash-topup .tp-section-head { display:flex; align-items:center; gap:12px; }
.dash-topup .tp-section-head__num { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:11px; line-height:14px; letter-spacing:0.08em; color:var(--text-disabled); }
.dash-topup .tp-section-head__line { display:block; width:24px; height:1px; background:var(--border); }
.dash-topup .tp-section-head__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; color:var(--text-muted); text-transform:uppercase; }
.dash-topup .tp-form-card__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700 !important; font-size:22px !important; line-height:28px !important; color:var(--ink); margin:0; }

.dash-topup .tp-form { display:flex; flex-direction:column; gap:18px; }

/* fields */
.dash-topup .tp-field { display:flex; flex-direction:column; gap:8px; }
.dash-topup .tp-field__top { display:flex; align-items:baseline; justify-content:space-between; }
.dash-topup .tp-field__label { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; line-height:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin:0; }
.dash-topup .tp-field__tag { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-disabled); }
.dash-topup .tp-field__tag--soft { font-family:"Roboto",system-ui,sans-serif !important; font-size:11px; line-height:14px; letter-spacing:0; text-transform:none; color:var(--text-disabled); }
.dash-topup .tp-row { display:flex; gap:16px; }
.dash-topup .tp-row > .tp-field { flex:1; min-width:0; }

/* receipt-to chip */
.dash-topup .tp-receipt { display:flex; align-items:center; gap:10px; background:var(--cream); border:1px solid var(--cream-2); border-radius:10px; padding:12px 14px; }
.dash-topup .tp-receipt__icon { flex-shrink:0; }
.dash-topup .tp-receipt__email { font-family:"Roboto",system-ui,sans-serif !important; font-size:14px; line-height:18px; color:var(--ink); flex-grow:1; word-break:break-all; }

/* stripe elements slots */
.dash-topup .tp-stripe-input { background:#FFFFFF; border:1px solid var(--border); border-radius:10px; padding:14px 16px; height:48px; box-sizing:border-box; transition:border-color 0.15s, box-shadow 0.15s; }
.dash-topup .tp-stripe-input.StripeElement--focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(10,10,10,0.06); }
.dash-topup .tp-stripe-input.StripeElement--invalid { border-color:var(--error); box-shadow:0 0 0 3px rgba(220,38,38,0.08); }
.dash-topup .tp-stripe-row { display:flex; align-items:center; gap:12px; background:#FFFFFF; border:1px solid var(--border); border-radius:10px; padding:0 16px; height:48px; box-sizing:border-box; transition:border-color 0.15s, box-shadow 0.15s; }
.dash-topup .tp-stripe-row:focus-within { border-color:var(--ink); box-shadow:0 0 0 3px rgba(10,10,10,0.06); }
.dash-topup .tp-stripe-row .tp-stripe-input { border:none; padding:0; height:auto; flex-grow:1; box-shadow:none; }
.dash-topup .tp-stripe-row .tp-stripe-input.StripeElement--focus { box-shadow:none; }
.dash-topup .tp-stripe-row__hint { flex-shrink:0; }

/* card brand badges */
.dash-topup .tp-brands { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.dash-topup .tp-brand { display:flex; align-items:center; justify-content:center; width:28px; height:18px; border-radius:3px; font-family:"Roboto",system-ui,sans-serif !important; font-weight:800; font-size:9px; color:#FFFFFF; letter-spacing:0.05em; }
.dash-topup .tp-brand--visa { background:#1A1F71; }
.dash-topup .tp-brand--amex { background:#016FD0; font-weight:700; font-size:7px; letter-spacing:0.04em; }
.dash-topup .tp-brand--mc { background:#FFFFFF; border:1px solid var(--border); position:relative; }
.dash-topup .tp-brand__mc-red { position:absolute; left:5px; top:3px; width:11px; height:11px; border-radius:50%; background:#EB001B; }
.dash-topup .tp-brand__mc-yellow { position:absolute; right:5px; top:3px; width:11px; height:11px; border-radius:50%; background:#F79E1B; opacity:0.85; }

/* error slot — empty by default; populated by Stripe / fetch errors */
.dash-topup .tp-error { font-family:"Roboto",system-ui,sans-serif !important; font-size:13px; line-height:18px; color:var(--error); min-height:18px; }
.dash-topup .tp-error:empty { min-height:0; }

/* footer */
.dash-topup .tp-footer { display:flex; flex-direction:column; gap:18px; padding-top:8px; }
.dash-topup .tp-pay { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--brand) !important; font-family:"Roboto",system-ui,sans-serif !important; font-weight:500; font-size:15px; line-height:20px; border-radius:10px; padding:14px 22px; border:none; align-self:flex-start; cursor:pointer; transition:filter 0.15s; }
.dash-topup .tp-pay:hover { filter:brightness(1.05); }
.dash-topup .tp-pay:disabled, .dash-topup .tp-pay.is-loading { opacity:0.65; cursor:not-allowed; }
.dash-topup .tp-pay__icon { flex-shrink:0; }
.dash-topup .tp-trust { display:flex; align-items:center; gap:12px; font-family:"Roboto",system-ui,sans-serif !important; font-size:13px; line-height:18px; color:var(--text-muted); }

/* summary card */
.dash-topup .tp-summary-card { background:#FFFFFF; border:1px solid var(--border); border-radius:18px; padding:28px 32px; display:flex; flex-direction:column; gap:20px; width:440px; flex-shrink:0; box-sizing:border-box; }
.dash-topup .tp-summary-card__eyebrow { display:flex; align-items:center; gap:8px; }
.dash-topup .tp-plan { display:flex; align-items:flex-start; gap:14px; }
.dash-topup .tp-plan__icon { flex-shrink:0; width:44px; height:44px; background:var(--cream); border:1px solid var(--cream-2); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.dash-topup .tp-plan__text { display:flex; flex-direction:column; gap:4px; flex-grow:1; min-width:0; }
.dash-topup .tp-plan__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:18px; line-height:22px; color:var(--ink); text-transform:capitalize; }
.dash-topup .tp-plan__desc { font-family:"Roboto",system-ui,sans-serif !important; font-size:13px; line-height:19px; color:var(--text-muted); }

/* price ladder */
.dash-topup .tp-ladder { display:flex; flex-direction:column; gap:14px; }
.dash-topup .tp-ladder__rule { height:1px; background:var(--hairline); }
.dash-topup .tp-ladder__row { display:flex; align-items:center; justify-content:space-between; }
.dash-topup .tp-ladder__label { font-family:"Roboto",system-ui,sans-serif !important; font-size:14px; line-height:18px; color:var(--text-muted); }
.dash-topup .tp-ladder__val { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:14px; line-height:18px; color:var(--ink); }
.dash-topup .tp-ladder__total { display:flex; align-items:flex-end; justify-content:space-between; }
.dash-topup .tp-ladder__total-amt { display:flex; align-items:baseline; gap:6px; }
.dash-topup .tp-ladder__cur { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:14px; line-height:18px; color:var(--text-disabled); }
.dash-topup .tp-ladder__big { font-family:"Roboto",system-ui,sans-serif !important; font-weight:800; font-size:32px; line-height:36px; color:var(--ink); letter-spacing:-0.01em; }

/* after-payment banner */
.dash-topup .tp-after { background:var(--ink); border-radius:12px; padding:16px 18px; display:flex; align-items:center; gap:14px; }
.dash-topup .tp-after__check { flex-shrink:0; width:36px; height:36px; background:var(--brand); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dash-topup .tp-after__text { display:flex; flex-direction:column; gap:2px; flex-grow:1; }
.dash-topup .tp-after__line { font-family:"Roboto",system-ui,sans-serif !important; font-weight:500; font-size:14px; line-height:20px; color:#FFFFFF; }

/* loading overlay */
.tp-loading { position:fixed; inset:0; background:rgba(10,10,10,0.55); display:none; align-items:center; justify-content:center; z-index:9999; padding:24px; }
.tp-loading.is-active { display:flex; }
.tp-loading__card { background:#FFFFFF; border-radius:16px; padding:28px 32px; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:380px; box-shadow:0 24px 60px rgba(10,10,10,0.35); }
.tp-loading__spinner { width:36px; height:36px; border-radius:50%; border:3px solid #F3F4F6; border-top-color:#0A0A0A; animation:tp-spin 0.85s linear infinite; }
@keyframes tp-spin { to { transform:rotate(360deg); } }
.tp-loading__title { font-family:"Roboto",system-ui,sans-serif !important; font-weight:700; font-size:16px; line-height:22px; color:#0A0A0A; text-align:center; }
.tp-loading__sub { font-family:"Roboto",system-ui,sans-serif !important; font-size:13px; line-height:18px; color:#6B7280; text-align:center; }

/* responsive */
@media (max-width:1080px){
  .dash-topup .tp-grid { flex-direction:column; }
  .dash-topup .tp-summary-card { width:100%; }
}
@media (max-width:720px){
  .dash-topup .tp-board { padding:32px 24px 56px; gap:24px; }
  .dash-topup .tp-head__title { font-size:32px !important; line-height:38px !important; }
  .dash-topup .tp-form-card { padding:24px; }
  .dash-topup .tp-summary-card { padding:24px; }
  .dash-topup .tp-row { flex-direction:column; gap:18px; }
}

/* ============================================================================
   .dash-onb — EMPLOYEE onboarding chrome (standalone pages, own topbar)
   Shared by .dash-createprofile (achievement.ejs / Create your profile) and
   .dash-buzz (achievement-companyUnregistered.ejs / Achievement Buzz, the
   show_menu=false signup state). Self-contained token block; these views render
   under the legacy default employer-layout, so we reset hard + win with specificity.
   ============================================================================ */
.dash-onb {
  --brand:#C5F154; --ink:#0A0A0A; --ink-hover:#1A1A1A; --brand-hover:#B8E83C;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --cream:#F5F1E8; --cream-2:#F0EBDC; --bg:#FAFAF7; --danger:#DC2626;
  background:var(--bg) !important; min-height:100vh; width:100%;
  color:var(--ink); padding:0 !important; margin:0 !important;
}
.dash-onb, .dash-onb *, .dash-onb *::before, .dash-onb *::after { box-sizing:border-box; }
.dash-onb *:not(i):not(.fa):not(.fas):not(.far) { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-onb h1,.dash-onb h2,.dash-onb h3,.dash-onb h4,.dash-onb h5,.dash-onb h6,.dash-onb p { margin:0; padding:0; }

/* topbar */
.dash-onb .onb-topbar { display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 40px; background:#fff; border-bottom:1px solid var(--border); }
.dash-onb .onb-brand { display:inline-flex; align-items:center; }
.dash-onb .onb-brand img { height:30px; width:auto; display:block; }
.dash-onb .onb-topnav { display:flex; align-items:center; gap:10px; }
.dash-onb .onb-topnav__dot { width:7px; height:7px; border-radius:999px; background:var(--brand); flex-shrink:0; }
.dash-onb .onb-topnav__link { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); text-decoration:none !important; cursor:pointer; }
.dash-onb .onb-topnav__link.is-active { color:var(--ink); }
.dash-onb .onb-topnav__sep { color:var(--text-disabled); font-size:12px; }

/* board / page header */
.dash-onb .onb-board { width:640px; max-width:calc(100% - 48px); margin:0 auto; padding:56px 0 96px; display:flex; flex-direction:column; gap:36px; }
.dash-onb .onb-head { display:flex; flex-direction:column; gap:12px; }
.dash-onb h1.onb-title { font-weight:800 !important; font-size:40px !important; line-height:46px !important; letter-spacing:-0.02em !important; color:var(--ink); }
.dash-onb p.onb-subtitle { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); max-width:480px; }

/* form + cards */
.dash-onb .onb-form { display:flex; flex-direction:column; gap:28px; }
.dash-onb .onb-card { display:flex; flex-direction:column; gap:22px; padding:32px 36px; border-radius:18px; background:#fff; border:1px solid var(--border); }
.dash-onb .onb-sec { display:flex; align-items:center; gap:18px; }
.dash-onb .onb-sec__num { font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:12px; line-height:16px; letter-spacing:0.18em; color:var(--text-disabled); }
.dash-onb .onb-sec__line { height:1px; flex:1 1 0; background:var(--cream-2); }
.dash-onb .onb-sec__label { font-weight:600; font-size:14px; line-height:18px; letter-spacing:0.02em; color:var(--ink); }

/* field grid */
.dash-onb .onb-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dash-onb .onb-field { display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; }
.dash-onb .onb-field--full { grid-column:1 / -1; }
.dash-onb .onb-field > label { font-weight:500 !important; font-size:13px !important; line-height:16px !important; color:var(--ink); margin:0 !important; }
.dash-onb .onb-field__top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.dash-onb .onb-field__top label { font-weight:500 !important; font-size:13px !important; line-height:16px !important; color:var(--ink); margin:0 !important; }
.dash-onb .onb-tag { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; line-height:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-disabled); }
.dash-onb .onb-help { font-weight:400 !important; font-size:12px !important; line-height:16px !important; color:var(--text-disabled); margin:0 !important; }
.dash-onb .onb-field > label span { color:var(--danger); }

/* controls — override legacy .form-control inside cards/modals */
.dash-onb .onb-card .form-control,
.dash-onb .onb-modal .form-control {
  height:48px; border-radius:10px; border:1px solid var(--border) !important; background:#fff !important;
  padding:0 14px; font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif !important; font-weight:400 !important;
  font-size:15px !important; letter-spacing:normal !important; color:var(--ink) !important;
  box-shadow:none !important; width:100%; transition:border-color .15s ease; outline:none;
}
.dash-onb .onb-card .form-control::placeholder,
.dash-onb .onb-modal .form-control::placeholder { color:var(--text-disabled) !important; font-weight:400 !important; }
/* keep filled fields visually consistent (kill browser autofill tint + heavier weight) */
.dash-onb .onb-card .form-control:-webkit-autofill,
.dash-onb .onb-card .form-control:-webkit-autofill:hover,
.dash-onb .onb-card .form-control:-webkit-autofill:focus,
.dash-onb .onb-modal .form-control:-webkit-autofill {
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:var(--ink) !important; font-weight:400 !important;
}
.dash-onb .onb-card .form-control:focus,
.dash-onb .onb-modal .form-control:focus { border-color:var(--ink) !important; }
.dash-onb .onb-card textarea.form-control { height:auto; min-height:120px; padding:14px; line-height:22px; resize:vertical; }
.dash-onb .onb-card select.form-control {
  appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 14px center !important;
}

/* intl-tel-input phone field */
.dash-onb .onb-field .iti { width:100%; display:block; }
.dash-onb .onb-field .iti .form-control { padding-left:52px; }
.dash-onb .onb-field .iti__flag-container { border-right:1px solid var(--border); }
.dash-onb .onb-field .iti__selected-flag { padding:0 8px 0 12px; border-radius:10px 0 0 10px; }

/* bootstrap-tagsinput skin (tag-box spec §11.4) — must beat legacy .tag{display:flex;bg#F3F4F6} */
.dash-onb .bootstrap-tagsinput {
  display:flex !important; flex-wrap:wrap !important; align-items:center; align-content:flex-start; gap:8px !important;
  width:100%; min-height:48px; height:auto !important; padding:8px 12px !important; border-radius:10px; border:1px solid var(--border) !important;
  background:#fff !important; box-shadow:none !important; overflow:visible !important; line-height:normal !important;
}
.dash-onb .bootstrap-tagsinput .tag {
  display:inline-flex !important; align-items:center; gap:6px; margin:0 !important; padding:5px 10px !important; border-radius:999px !important;
  background:var(--cream-2) !important; border:0 !important; color:var(--ink) !important; vertical-align:middle;
  font-family:"Roboto",sans-serif !important; font-weight:500 !important; font-size:13px !important; line-height:16px !important; white-space:nowrap;
}
.dash-onb .bootstrap-tagsinput .tag [data-role="remove"] { position:relative; cursor:pointer; color:var(--text-disabled); margin:0 !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; width:auto !important; }
.dash-onb .bootstrap-tagsinput .tag [data-role="remove"]::after { content:"\00d7"; padding:0; font-size:14px; line-height:1; }
.dash-onb .bootstrap-tagsinput input { border:0 !important; outline:none; flex:1 1 80px; min-width:80px; padding:0 !important; height:auto !important; font-family:"Roboto",sans-serif !important; font-size:15px !important; font-weight:400 !important; letter-spacing:normal !important; color:var(--ink) !important; background:transparent !important; }
.dash-onb .bootstrap-tagsinput input::placeholder { color:var(--text-disabled) !important; }

/* autocomplete dropdown (job title) — drop below input; hide the empty box (no stray line) */
.dash-onb .autocomplete-suggestions { position:absolute; top:calc(100% + 4px); left:0; width:100%; max-height:200px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; background:#fff; z-index:1000; box-shadow:0 12px 30px rgba(10,10,10,0.10); }
.dash-onb .autocomplete-suggestions:empty { display:none !important; }
.dash-onb .autocomplete-suggestion { padding:10px 14px; cursor:pointer; font-size:14px; color:var(--ink); }
.dash-onb .autocomplete-suggestion:hover { background:var(--cream); }

/* actions / primary button (overrides legacy .bttn{display:block;width:100%;font:32px Bebas} + form button.bttn{width:100%}) */
.dash-onb .onb-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; }
.dash-onb .bttn {
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px; width:auto !important; max-width:none !important;
  background:var(--ink) !important; color:var(--brand) !important; font-family:"Roboto",sans-serif !important;
  border:none !important; border-radius:10px !important; padding:13px 22px !important; font-weight:500 !important;
  font-size:14px !important; line-height:18px !important; letter-spacing:0 !important; text-align:center; white-space:nowrap;
  cursor:pointer; box-shadow:none !important; transition:background .15s ease;
}
.dash-onb .bttn:hover { background:var(--ink-hover) !important; }
.dash-onb .bttn--ghost { background:transparent !important; color:var(--ink) !important; border:1px solid var(--ink) !important; border-radius:999px !important; }
.dash-onb .bttn--ghost:hover { background:var(--cream) !important; }
.dash-onb .bttn--lime { background:var(--brand) !important; color:var(--ink) !important; }
.dash-onb .bttn--lime:hover { background:var(--brand-hover) !important; }

/* ----- modal (css-only checkbox mechanism, reskinned to §11.4 modal card) ----- */
.dash-onb .css-only-modal-check { display:none; }
.dash-onb #screen-shade { position:fixed; inset:0; width:100%; height:100%; background:rgba(10,10,10,0.55); display:none; z-index:1040; }
.dash-onb .css-only-modal-check:checked ~ #screen-shade { display:block; }
.dash-onb .css-only-modal {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:460px; max-width:calc(100% - 40px); min-height:0 !important; background:#fff; border-radius:18px; padding:32px;
  box-shadow:0 24px 60px rgba(10,10,10,0.35); z-index:1050; margin:0 !important; text-align:left !important;
}
.dash-onb .css-only-modal h5, .dash-onb .css-only-modal p, .dash-onb .css-only-modal .onb-modal__note,
.dash-onb .css-only-modal label, .dash-onb .css-only-modal .onb-field { text-align:left !important; }
.dash-onb .css-only-modal-check:checked + .css-only-modal { display:block; }
.dash-onb .css-only-modal .css-only-modal-close { display:none; }
.dash-onb .onb-modal__badge { width:44px; height:44px; border-radius:999px; background:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.dash-onb .onb-modal__badge svg { width:20px; height:20px; }
.dash-onb .onb-modal h5 { font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em; color:var(--ink); margin:0 0 10px !important; }
.dash-onb .onb-modal p { font-weight:400 !important; font-size:14px !important; line-height:21px !important; color:var(--text-soft); margin:0 !important; }
.dash-onb .onb-modal__note { margin-top:18px; padding:12px 14px; background:var(--cream); border-radius:10px; font-family:"Roboto Mono",monospace !important; font-size:12px; line-height:18px; color:var(--text-soft); }
.dash-onb .onb-modal__fields { display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.dash-onb .onb-modal__actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
.dash-onb .onb-modal #inviteCompanyMemberForm { display:none; }

/* footer (legacy partial sits below; tone it onto the cream ground) */
.dash-onb .footer_sec { margin-top:0; }

/* responsive */
@media (max-width:720px){
  .dash-onb .onb-topbar { padding:0 20px; }
  .dash-onb .onb-board { padding:36px 0 64px; gap:28px; }
  .dash-onb h1.onb-title { font-size:30px !important; line-height:36px !important; }
  .dash-onb .onb-card { padding:24px; }
  .dash-onb .onb-grid { grid-template-columns:1fr; }
}

/* ============================================================================
   .dash-createprofile — content specifics for achievement.ejs
   ============================================================================ */
.dash-createprofile .onb-card .form-control[name="mission_statement"],
.dash-createprofile .onb-card .form-control[name="profile_summary"] { min-height:120px; }

/* ============================================================================
   .dash-buzz — Achievement Buzz (achievement-companyUnregistered.ejs)
   Renders under user-layout (no dashboard css there) → in-view <link> pulls it.
   show_menu=false signup state == the mock; legacy off-canvas slide-nav hidden.
   ============================================================================ */
.dash-buzz .super-container { display:none !important; }      /* legacy slide-nav → use clean .onb-topbar */
.dash-buzz .footer_sec { display:none !important; }           /* legacy footer not in mock; page ends at Continue */
.dash-buzz .main_section { background:transparent !important; padding:0 !important; }
.dash-buzz .dashbord-mainsec, .dash-buzz .inner_pages.form_sec { background:transparent !important; }

/* images dropzone — §11 cream dashed empty block */
.dash-onb .onb-dropzone { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:32px 24px; background:var(--cream); border:1.5px dashed #D8CFB8; border-radius:14px; }
.dash-onb .onb-dropzone__icon { width:44px; height:44px; border-radius:999px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.dash-onb .onb-dropzone__icon svg { width:20px; height:20px; }
.dash-onb .onb-dropzone__title { font-weight:600 !important; font-size:14px !important; line-height:18px !important; color:var(--ink); }
.dash-onb .onb-dropzone__sub { font-weight:400 !important; font-size:12px !important; line-height:18px !important; color:var(--text-muted); }
.dash-onb .onb-dropzone .custom-file { position:relative; display:inline-block; width:auto; height:auto; margin:6px 0 0; }
.dash-onb .onb-dropzone .custom-file-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; margin:0; }
.dash-onb .onb-dropzone .custom-file-label { position:relative; z-index:1; display:inline-flex; align-items:center; height:auto; padding:11px 18px; background:transparent; border:1px solid var(--ink); border-radius:999px; font-weight:500; font-size:14px; color:var(--ink); cursor:pointer; box-shadow:none; }
.dash-onb .onb-dropzone .custom-file-label::after { display:none !important; content:none !important; }
.dash-onb #preview_file_div { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; }
.dash-onb #preview_file_div img { width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }

/* performance scale — numbered 1–5 scale (replaces Krajee stars); cumulative fill = the rating */
.dash-onb .ratings { display:flex; flex-direction:column; }
.dash-onb .onb-rate__legend, .ink-rate__legend{ display:flex; justify-content:flex-end; padding-bottom:10px; }
.dash-onb .onb-rate__legend > span, .ink-rate__legend > span{ display:flex; justify-content:space-between; width:252px; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-disabled); }
.dash-onb .onb-rate, .ink-rate{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--cream-2); position:relative; flex-wrap:wrap; }
.dash-onb .onb-rate__label, .ink-rate__label{ font-family:"Roboto",sans-serif !important; font-weight:500 !important; font-size:14px !important; letter-spacing:normal !important; color:var(--ink); }
.dash-onb .onb-rate__scale, .ink-rate__scale{ display:flex; gap:8px; }
.dash-onb .onb-rate__btn, .ink-rate__btn{
  display:flex; align-items:center; justify-content:center; width:44px; height:40px; border-radius:8px;
  background:#fff !important; border:1px solid var(--border) !important; cursor:pointer; padding:0 !important;
  font-family:"Roboto Mono",monospace !important; font-weight:500 !important; font-size:14px !important; letter-spacing:normal !important;
  color:var(--text-disabled) !important; box-shadow:none !important; transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.dash-onb .onb-rate__btn:hover, .ink-rate__btn:hover{ border-color:var(--ink) !important; }
.dash-onb .onb-rate__btn.is-on, .ink-rate__btn.is-on{ background:var(--ink) !important; border-color:var(--ink) !important; color:var(--brand) !important; font-weight:600 !important; }
.dash-onb .onb-rate__input, .ink-rate__input{ position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0 0 0 0); border:0; opacity:0; }

/* validation messaging within scope (no accent strip — plain danger text) */
.dash-onb #errorMessage { color:var(--danger) !important; font-weight:500; font-size:13px; margin-top:6px; }
.dash-onb .invalid-feedback { font-size:12px; color:var(--danger); }

/* ---------------------------------------------------------------------------
   Added 2026-08-04 for createAspirantProfile.ejs. All three are NEW class names
   (or a state no .dash-onb view uses yet), so nothing already shipped changes.
   --------------------------------------------------------------------------- */

/* disabled field — value carried over from sign-up, shown but not editable.
   -webkit-text-fill-color is required: WebKit greys disabled text regardless of
   `color`. opacity:1 undoes the same UA fade. */
.dash-onb .onb-card .form-control[disabled],
.dash-onb .onb-card .form-control:disabled {
  background:var(--cream) !important; color:var(--text-muted) !important;
  -webkit-text-fill-color:var(--text-muted) !important; opacity:1 !important;
  border-color:var(--border) !important; cursor:not-allowed;
}


/* compact dropzone — one row instead of the full cream block. For secondary /
   optional attachments, so an optional field does not carry the same visual
   weight as the primary one. */
.dash-onb .onb-dropzone--row { flex-direction:row; align-items:center; text-align:left; gap:14px; padding:16px 18px; }
.dash-onb .onb-dropzone--row .onb-dropzone__icon { width:40px; height:40px; flex-shrink:0; }
.dash-onb .onb-dropzone--row .onb-dropzone__icon svg { width:18px; height:18px; }
.dash-onb .onb-dropzone__body { display:flex; flex-direction:column; gap:2px; flex:1 1 0; min-width:0; }
.dash-onb .onb-dropzone--row .custom-file { margin:0 !important; flex-shrink:0; }
.dash-onb .onb-dropzone--row .custom-file-label { padding:9px 16px; font-size:13px; }
.dash-onb .onb-dropzone--row #fileUpl2 { font-weight:500 !important; font-size:12px !important; line-height:16px !important; color:var(--ink) !important; margin:2px 0 0 !important; }

/* Tag-cap notices — aspirant career goal (added 2026-08-04).
   script.js sets an INLINE color:green on these when the 3-tag cap is hit
   (script.js:247, 283, 313, 340), so !important is the only way to bring them
   on-palette; jQuery .css() writes inline without !important, so this wins.
   These are a cap notice, not an error — muted ink, never danger red. */
.dash-onb #jobRolesCount,
.dash-onb #skillsToDevelopCount,
.dash-onb #professionalStrengthCount,
.dash-onb #workEnvironmentCount {
  font-weight:500 !important; font-size:12px !important; line-height:16px !important;
  color:var(--text-muted) !important; margin:2px 0 0 !important;
}

/* ============================================================================
   .dash-successprofile — Success Insights profile (unregistered-company-user-profile.ejs)
   Standalone full-doc with inline sidebar; renders under employer-layout
   (dashboard-welcome.css present). Reuses the §11 editorial system.
   ============================================================================ */
.dash-successprofile {
  --brand:#C5F154; --ink:#0A0A0A; --ink-hover:#1A1A1A; --text-soft:#4B5563; --text-muted:#6B7280;
  --text-disabled:#9CA3AF; --border:#E5E7EB; --cream:#F5F1E8; --cream-2:#F0EBDC; --bg:#FAFAF7; --danger:#DC2626;
  background:var(--bg);
}
.dash-successprofile, .dash-successprofile *, .dash-successprofile *::before, .dash-successprofile *::after { box-sizing:border-box; }
.dash-successprofile *:not(i):not(.fa):not(.fas):not(.far) { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-successprofile h1,.dash-successprofile h2,.dash-successprofile h3,.dash-successprofile h4,.dash-successprofile h5,.dash-successprofile h6,.dash-successprofile p,.dash-successprofile ul,.dash-successprofile li { margin:0; padding:0; }

/* CHROME — the sidebar (#sidebar-wrapper / .sidebar-nav) + header (.topnav / .logout-btn /
   .noti-btn) reuse the GLOBAL reskin dashboard chrome (style-test.css base + the chrome layer
   higher up in this file), 1:1 with the employer/employee screens. So NO chrome overrides are
   scoped here — only the content shell. #page-content-wrapper fills the width (calc(100% - 280px)). */
.dash-successprofile #page-content-wrapper { background:var(--bg); min-height:100vh; }
.dash-successprofile .sp-main { padding:24px 40px 64px; display:flex; flex-direction:column; gap:28px; }
.dash-successprofile .sp-main .goback-btn { display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:14px; color:var(--text-soft); text-decoration:none !important; }
.dash-successprofile .sp-main .goback-btn:hover { color:var(--ink); }

/* eyebrow row */
.dash-successprofile .sp-eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dash-successprofile .sp-eyebrow { display:flex; align-items:center; gap:12px; }
.dash-successprofile .sp-chip { padding:4px 9px; background:var(--ink); border-radius:4px; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand); }
.dash-successprofile .sp-crumb { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-successprofile .sp-edit { display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--brand) !important; border-radius:10px; padding:11px 18px; font-weight:500; font-size:14px; text-decoration:none !important; }
.dash-successprofile .sp-edit:hover { background:var(--ink-hover); }

/* identity card */
.dash-successprofile .sp-identity { display:flex; align-items:flex-start; gap:24px; padding:32px 36px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-successprofile .sp-avatar { position:relative; width:96px; height:96px; flex-shrink:0; }
.dash-successprofile .sp-avatar img { width:96px; height:96px; border-radius:999px; object-fit:cover; }
.dash-successprofile .sp-avatar__initials { width:96px; height:96px; border-radius:999px; background:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:32px; color:var(--ink); }
.dash-successprofile .sp-avatar__cam { position:absolute; right:0; bottom:2px; width:30px; height:30px; border-radius:999px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.dash-successprofile .sp-avatar__cam img { width:14px; height:14px; border-radius:0; }
.dash-successprofile .sp-identity__body { display:flex; flex-direction:column; gap:8px; min-width:0; }
.dash-successprofile .sp-identity__top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dash-successprofile .sp-name { font-weight:800 !important; font-size:34px !important; line-height:40px !important; letter-spacing:-0.01em; color:var(--ink); }
.dash-successprofile .sp-rating { height:22px; width:auto; }
.dash-successprofile .sp-role { font-weight:600 !important; font-size:15px !important; color:var(--text-soft); }
.dash-successprofile .sp-mission { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); max-width:760px; }

/* status pill (2-state) */
.dash-successprofile .sp-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--ink); font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brand); }
.dash-successprofile .sp-pill__dot { width:6px; height:6px; border-radius:999px; background:var(--brand); }
.dash-successprofile .sp-pill--muted { background:transparent; border:1px solid var(--border); color:var(--text-muted); }
.dash-successprofile .sp-pill--muted .sp-pill__dot { background:var(--text-disabled); }

/* on-surface sections */
.dash-successprofile .sp-section { display:flex; flex-direction:column; gap:16px; }
.dash-successprofile .sp-section__head { display:flex; align-items:center; gap:18px; }
.dash-successprofile .sp-section__head h2 { font-weight:700 !important; font-size:21px !important; line-height:26px !important; color:var(--ink); border:0 !important; }
.dash-successprofile .sp-section__line { height:1px; flex:1 1 0; background:var(--cream-2); }
.dash-successprofile .sp-count { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-disabled); }
.dash-successprofile .sp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.dash-successprofile .sp-chips .sp-chipd { display:inline-flex; align-items:center; padding:7px 14px; background:var(--cream); border-radius:999px; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; color:var(--ink); }
.dash-successprofile .sp-empty { font-size:13px; color:var(--text-muted); }
.dash-successprofile .sp-body { font-weight:400 !important; font-size:14px !important; line-height:24px !important; color:var(--text-soft); max-width:900px; }

/* achievement cards */
.dash-successprofile .sp-ach-list { display:flex; flex-direction:column; gap:14px; }
.dash-successprofile .sp-ach { display:flex; gap:18px; padding:24px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.dash-successprofile .sp-ach__num { flex-shrink:0; width:40px; height:40px; border-radius:10px; background:var(--ink); color:var(--brand); display:flex; align-items:center; justify-content:center; font-family:"Roboto Mono",monospace !important; font-weight:600; font-size:13px; }
.dash-successprofile .sp-ach__body { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:12px; }
.dash-successprofile .sp-ach__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dash-successprofile .sp-ach__title { font-weight:700 !important; font-size:17px !important; line-height:22px !important; color:var(--ink); }
.dash-successprofile .sp-ach__role { font-weight:400 !important; font-size:13px !important; color:var(--text-muted); }
.dash-successprofile .sp-ach__date { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-disabled); white-space:nowrap; }
.dash-successprofile .sp-ach__desc { font-weight:400 !important; font-size:14px !important; line-height:22px !important; color:var(--text-soft); }
.dash-successprofile .sp-ach__foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-successprofile .sp-view { display:inline-flex; align-items:center; background:var(--ink) !important; color:var(--brand) !important; border:none; border-radius:8px; padding:8px 16px; font-family:"Roboto",sans-serif !important; font-weight:500 !important; font-size:13px !important; text-decoration:none !important; cursor:pointer; }
.dash-successprofile .sp-view:hover { background:var(--ink-hover) !important; color:var(--brand) !important; }
.dash-successprofile .sp-ach__meta { display:flex; align-items:center; gap:12px; }
.dash-successprofile .sp-hash { font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:12px; color:var(--text-muted); }
.dash-successprofile .sp-rating-sm { height:18px; width:auto; }
.dash-successprofile .sp-ach-list a { text-decoration:none !important; }
.dash-successprofile .sp-loadmore { align-self:flex-start; margin-top:4px; background:transparent; border:1px solid var(--ink); color:var(--ink); border-radius:999px; padding:11px 18px; font-weight:500; font-size:14px; cursor:pointer; }
.dash-successprofile .sp-loadmore:hover { background:var(--cream); }

/* reviews table */
.dash-successprofile .sp-table-wrap { overflow-x:auto; }
.dash-successprofile table.sp-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.dash-successprofile table.sp-table th { text-align:left; padding:14px 20px; font-family:"Roboto Mono",monospace !important; font-weight:500; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border); }
.dash-successprofile table.sp-table td { padding:16px 20px; font-size:14px; color:var(--ink); border-bottom:1px solid var(--border); }
.dash-successprofile table.sp-table tr:last-child td { border-bottom:0; }
.dash-successprofile .sp-tview { color:var(--ink); text-decoration:none !important; font-weight:500; font-size:13px; }

/* welcome modal (css-only checkbox mechanism → §11 modal card) */
.dash-successprofile .css-only-modal-check { display:none; }
.dash-successprofile #screen-shade { position:fixed; inset:0; background:rgba(10,10,10,0.55); display:none; z-index:1040; }
.dash-successprofile .css-only-modal-check:checked ~ #screen-shade { display:block; }
.dash-successprofile .css-only-modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:460px; max-width:calc(100% - 40px); background:#fff; border-radius:18px; padding:32px; box-shadow:0 24px 60px rgba(10,10,10,0.35); z-index:1050; text-align:left !important; }
.dash-successprofile .css-only-modal-check:checked + .css-only-modal { display:block; }
.dash-successprofile .css-only-modal h5, .dash-successprofile .css-only-modal p, .dash-successprofile .css-only-modal .sp-modal__note, .dash-successprofile .css-only-modal .sp-modal__actions { text-align:left !important; }
.dash-successprofile .sp-modal__badge { width:44px; height:44px; border-radius:999px; background:var(--brand); display:flex; align-items:center; justify-content:center; margin:0 0 18px !important; }
.dash-successprofile .sp-modal__badge svg { width:20px; height:20px; display:block; }
.dash-successprofile .css-only-modal h5 { font-family:"Roboto",sans-serif !important; font-weight:800 !important; font-size:22px !important; line-height:28px !important; letter-spacing:-0.01em !important; color:var(--ink); margin:0 0 10px !important; }
.dash-successprofile .css-only-modal p { font-family:"Roboto",sans-serif !important; font-weight:400 !important; font-size:14px !important; line-height:21px !important; letter-spacing:normal !important; color:var(--text-soft); margin:0 !important; }
.dash-successprofile .css-only-modal .sp-modal__note { margin-top:16px; padding:12px 14px; background:var(--cream); border-radius:10px; font-family:"Roboto Mono",monospace !important; font-size:12px; line-height:18px; color:var(--text-soft); }
.dash-successprofile .css-only-modal .sp-modal__actions { display:flex; margin-top:22px; }
.dash-successprofile .css-only-modal .bttn { display:inline-flex !important; align-items:center; justify-content:center; gap:8px; width:auto !important; max-width:none !important; background:var(--ink) !important; color:var(--brand) !important; border:none !important; border-radius:10px !important; padding:13px 22px !important; font-family:"Roboto",sans-serif !important; font-weight:500 !important; font-size:14px !important; letter-spacing:0 !important; cursor:pointer; box-shadow:none !important; }
.dash-successprofile .css-only-modal .bttn:hover { background:var(--ink-hover) !important; }

@media (max-width:900px){
  .dash-successprofile .sp-main { padding:20px 20px 48px; }
}

/* ============================================================================
   Bootstrap tooltip — global reskin (BS appends .tooltip to <body>, so it can't
   be .dash-* scoped). Legacy renders Bebas Neue + an oversized <h3>; this makes
   it an ink surface w/ Roboto, lime-highlighted key terms (<b>), §11 radius/arrow.
   ============================================================================ */
.tooltip { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif !important; }
.tooltip .tooltip-inner {
  max-width:264px; padding:10px 13px; text-align:left;
  background:#0A0A0A; color:#ffffff;
  font-family:"Roboto",-apple-system,sans-serif !important; font-weight:400; font-size:13px; line-height:18px; letter-spacing:normal;
  border-radius:10px; box-shadow:0 12px 30px rgba(10,10,10,0.22);
}
.tooltip .tooltip-inner h1, .tooltip .tooltip-inner h2, .tooltip .tooltip-inner h3,
.tooltip .tooltip-inner h4, .tooltip .tooltip-inner h5, .tooltip .tooltip-inner h6, .tooltip .tooltip-inner p {
  font-family:"Roboto",-apple-system,sans-serif !important; font-weight:400 !important; font-size:13px !important;
  line-height:18px !important; letter-spacing:normal !important; color:#ffffff !important; margin:0 !important;
}
.tooltip .tooltip-inner b, .tooltip .tooltip-inner strong { font-weight:600 !important; color:#C5F154 !important; }
/* arrow follows the ink surface for every placement */
.tooltip.bs-tooltip-top .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color:#0A0A0A !important; }
.tooltip.bs-tooltip-bottom .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color:#0A0A0A !important; }
.tooltip.bs-tooltip-left .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color:#0A0A0A !important; }
.tooltip.bs-tooltip-right .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color:#0A0A0A !important; }

/* ============================================================================
   No footer inside the dashboard. The legacy footer partials render a visible
   `.footer_sec` (logo + social + copyright); on any page that carries the
   dashboard chrome (#wrapper) we hide it — matches the employer dashboard, which
   has no visible footer. Scoped to #wrapper so public/auth pages keep their footer.
   ============================================================================ */
#wrapper ~ .footer_sec, #wrapper .footer_sec { display:none !important; }

/* ============================================================================
   ACHIEVEMENT TRACKER — unregistered-company employee (.dash-achtrack)
   Body-only reskin of views/unregistered-company-employee-achievement-tracker.ejs.
   Chrome (#wrapper / #sidebar-wrapper / .topnav) comes from the shared partial
   views/partials/user/unregisteredCompany-chrome.ejs. Layout = user-layout.
   Same data + routes as before: credits, profile.achievements[] (project_title,
   achievement_reviewed, _id), View -> /unregisteredCompanyUserViewAchievement_<id>.
   The table keeps id="filters_table" so the global DataTables init in
   public/js/script.js (paging:false, info:false, searchPlaceholder "Search here")
   still wires SEARCH + COLUMN SORT — we only restyle its generated DOM here.
   Twin: Credit Statements (.dash-cs / Q2T-0). Mocks: Paper TH3-0 / TJO-0.
   ============================================================================ */
.dash-achtrack #page-content-wrapper { background:#FAFAF7; min-height:100vh; }
.dash-achtrack .at-main { padding:24px 40px 64px; display:flex; flex-direction:column; gap:28px; }

/* --- Editorial header + credits stat card row --- */
.dash-achtrack .at-head { display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; gap:32px; }
.dash-achtrack .at-headline { display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-top:4px; }
.dash-achtrack .at-eyebrow-row { display:flex; flex-direction:row; align-items:center; gap:10px; }
.dash-achtrack .at-chip { display:inline-flex; align-items:center; background:#0A0A0A; border-radius:4px; padding:3px 8px;
  font-family:"Roboto Mono",monospace; font-weight:600; font-size:10px; letter-spacing:0.1em; line-height:1; color:#C5F154; text-transform:uppercase; }
.dash-achtrack .at-crumb { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.06em; color:#6B7280; text-transform:uppercase; }
.dash-achtrack .at-title { font-family:"Roboto",sans-serif; font-weight:800; font-size:40px; line-height:46px; letter-spacing:-0.02em; color:#0A0A0A; margin:0; }
.dash-achtrack .at-subtitle { font-family:"Roboto",sans-serif; font-weight:400; font-size:14px; line-height:22px; color:#4B5563; margin:0; max-width:520px; }

.dash-achtrack .at-credits { display:flex; flex-direction:row; align-items:center; gap:16px; background:#0A0A0A; border-radius:18px; padding:20px 24px; flex-shrink:0; }
.dash-achtrack .at-credits__tile { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; background:#C5F154; border-radius:12px; flex-shrink:0; }
.dash-achtrack .at-credits__text { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.dash-achtrack .at-credits__label { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.08em; color:#9CA3AF; text-transform:uppercase; }
.dash-achtrack .at-credits__value { font-family:"Roboto",sans-serif; font-weight:800; font-size:30px; line-height:32px; letter-spacing:-0.01em; color:#FFFFFF; }

/* --- Table / content card --- */
.dash-achtrack .at-card { background:#FFFFFF; border:1px solid #E5E7EB; border-radius:18px; padding:32px 36px; box-shadow:none; }
.dash-achtrack .at-card__head { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:24px; }
.dash-achtrack .at-card__titles { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.dash-achtrack .at-card__eyebrow { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.08em; color:#6B7280; text-transform:uppercase; }
.dash-achtrack .at-card__title { font-family:"Roboto",sans-serif; font-weight:800; font-size:22px; line-height:26px; letter-spacing:-0.01em; color:#0A0A0A; margin:0; }

/* search input (own markup — no DataTables dependency) */
.dash-achtrack .at-search { position:relative; display:flex; align-items:center; width:300px; flex-shrink:0; }
.dash-achtrack .at-search__icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; }
.dash-achtrack .at-search__input { width:100%; height:48px; border:1px solid #E5E7EB !important; border-radius:10px; background:#FFFFFF !important;
  padding:0 14px 0 40px !important; font-family:"Roboto",sans-serif !important; font-weight:400 !important; font-size:15px !important; letter-spacing:normal !important; color:#0A0A0A; box-shadow:none !important; outline:none; }
.dash-achtrack .at-search__input::placeholder { color:#9CA3AF; }
.dash-achtrack .at-search__input:focus { border-color:#0A0A0A !important; }

/* --- The table itself (kills bootstrap/.table + DataTables defaults) --- */
.dash-achtrack .at-table { width:100% !important; margin:24px 0 0 0 !important; border-collapse:collapse; background:transparent; box-shadow:none !important; }
.dash-achtrack .at-table th[data-sort] { cursor:pointer; }
.dash-achtrack .at-table thead th,
.dash-achtrack .at-table tbody td { border:0; background:transparent; vertical-align:middle; }
.dash-achtrack .at-table thead th { border-bottom:1px solid #E5E7EB !important; padding:0 16px 14px 0 !important;
  font-family:"Roboto Mono",monospace; font-weight:500; font-size:10px; letter-spacing:0.08em; color:#6B7280; text-transform:uppercase; text-align:left; }
.dash-achtrack .at-table .at-thc { display:inline-flex; align-items:center; gap:6px; }
.dash-achtrack .at-table .at-sort { flex-shrink:0; }
.dash-achtrack .at-table th.at-th--status { width:220px; }
.dash-achtrack .at-table th.at-th--manage { width:120px; text-align:right; }
.dash-achtrack .at-table th.at-th--manage .at-thc { justify-content:flex-end; }
/* column widths beat DataTables autoWidth inline styles */
.dash-achtrack .at-table tbody td:nth-child(2) { width:220px; }
.dash-achtrack .at-table tbody td:nth-child(3) { width:120px; }
.dash-achtrack .at-table tbody td { padding:16px 16px 16px 0 !important; border-bottom:1px solid #E5E7EB !important; }
.dash-achtrack .at-table tbody tr:last-child td { border-bottom:0 !important; }
.dash-achtrack .at-table td.at-td-manage { text-align:right; }

.dash-achtrack .at-title-cell { display:flex; flex-direction:row; align-items:center; gap:14px; }
.dash-achtrack .at-ach-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:#F0EBDC; border-radius:10px; flex-shrink:0; }
.dash-achtrack .at-ach-name { font-family:"Roboto",sans-serif; font-weight:600; font-size:14px; line-height:18px; color:#0A0A0A; }

/* status pills (2-state monochrome) */
.dash-achtrack .at-pill { display:inline-flex; flex-direction:row; align-items:center; gap:6px; border-radius:999px; padding:4px 10px;
  font-family:"Roboto Mono",monospace; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; }
.dash-achtrack .at-pill .at-dot { width:6px; height:6px; border-radius:999px; flex-shrink:0; }
.dash-achtrack .at-pill--off { border:1px solid #E5E7EB; color:#6B7280; }
.dash-achtrack .at-pill--off .at-dot { background:#9CA3AF; }
.dash-achtrack .at-pill--on { background:#0A0A0A; border:1px solid #0A0A0A; color:#C5F154; }
.dash-achtrack .at-pill--on .at-dot { background:#C5F154; }

/* View row-action button */
.dash-achtrack .at-view { display:inline-flex; align-items:center; justify-content:center; background:#0A0A0A; border-radius:8px; padding:8px 16px;
  font-family:"Roboto",sans-serif; font-weight:500; font-size:13px; line-height:1; color:#C5F154 !important; text-decoration:none !important; transition:background .15s ease; }
.dash-achtrack .at-view:hover { background:#1A1A1A; color:#C5F154 !important; }

/* --- Empty state (cream dashed block) --- */
.dash-achtrack .at-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  margin-top:18px; background:#F5F1E8; border:1px dashed #D8CFB8; border-radius:14px; padding:64px 32px; }
.dash-achtrack .at-empty__icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:999px; }
.dash-achtrack .at-empty__title { font-family:"Roboto",sans-serif; font-weight:700; font-size:19px; line-height:24px; color:#0A0A0A; margin:0; }
.dash-achtrack .at-empty__copy { font-family:"Roboto",sans-serif; font-weight:400; font-size:14px; line-height:22px; color:#6B7280; text-align:center; max-width:440px; margin:0; }
.dash-achtrack .at-empty__cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:4px; background:#0A0A0A; border-radius:10px; padding:11px 18px;
  font-family:"Roboto",sans-serif; font-weight:600; font-size:14px; line-height:1; color:#C5F154 !important; text-decoration:none !important; transition:background .15s ease; }
.dash-achtrack .at-empty__cta:hover { background:#1A1A1A; color:#C5F154 !important; }

/* --- narrow viewport: stack the header, full-width credits + search --- */
@media (max-width:860px) {
  .dash-achtrack .at-main { padding:20px 20px 48px; }
  .dash-achtrack .at-head { flex-direction:column; gap:18px; }
  .dash-achtrack .at-title { font-size:32px; line-height:38px; }
  .dash-achtrack .at-card__head { flex-direction:column; align-items:flex-start; gap:16px; }
  .dash-achtrack .at-search { width:100%; }
}

/* ============================================================================
   VIEW ACHIEVEMENT — unregistered-company employee detail (.dash-achview)
   Body-only reskin of views/unregistered-company-user-achievement-view.ejs.
   Read-only detail page; full <html> doc wrapped by the default employer-layout
   (which loads style-test.css + dashboard-welcome.css). Chrome = shared partial
   unregisteredCompany-chrome.ejs (active:'review'). Same data + routes: doc.*
   (name, job_title, project_title, rating, skill_tags, description, explaination,
   additional_comments, employer_remarks, 6 criteria), Back = history.back().
   Off-palette images/<value>.png rating PNGs -> on-palette ranked-bar meters.
   Accordion flattened to always-visible sections. Mocks: Paper TMP-0 / TPR-0.
   ============================================================================ */
.dash-achview #page-content-wrapper { background:#FAFAF7; min-height:100vh; }
.dash-achview .av-main { padding:24px 40px 64px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; }

/* back link */
.dash-achview .av-back { display:inline-flex; flex-direction:row; align-items:center; gap:8px; height:40px; padding:0 16px; border:1px solid #E5E7EB; border-radius:10px; background:#FFFFFF;
  font-family:"Roboto",sans-serif; font-weight:500; font-size:14px; color:#4B5563 !important; text-decoration:none !important; }
.dash-achview .av-back svg { stroke:#4B5563; }
.dash-achview .av-back:hover { border-color:#0A0A0A; color:#0A0A0A !important; }
.dash-achview .av-back:hover svg { stroke:#0A0A0A; }

/* header band */
.dash-achview .av-head { display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; gap:32px; width:100%; }
.dash-achview .av-headline { display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-top:2px; }
.dash-achview .av-eyebrow { display:flex; flex-direction:row; align-items:center; gap:10px; }
.dash-achview .av-chip { display:inline-flex; align-items:center; background:#0A0A0A; border-radius:4px; padding:3px 8px;
  font-family:"Roboto Mono",monospace; font-weight:600; font-size:10px; letter-spacing:0.1em; line-height:1; color:#C5F154; text-transform:uppercase; }
.dash-achview .av-crumb { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.06em; color:#6B7280; text-transform:uppercase; }
.dash-achview .av-title { font-family:"Roboto",sans-serif; font-weight:800; font-size:38px; line-height:44px; letter-spacing:-0.02em; color:#0A0A0A; margin:0; }
.dash-achview .av-byline { display:flex; flex-direction:row; align-items:center; gap:12px; }
.dash-achview .av-name { font-family:"Roboto",sans-serif; font-weight:600; font-size:15px; color:#0A0A0A; }
.dash-achview .av-role { font-family:"Roboto",sans-serif; font-weight:400; font-size:15px; color:#6B7280; }
.dash-achview .av-dot { width:4px; height:4px; border-radius:999px; background:#D1D5DB; flex-shrink:0; }
.dash-achview .av-pill { display:inline-flex; flex-direction:row; align-items:center; gap:6px; border-radius:999px; padding:4px 10px; margin-top:2px;
  font-family:"Roboto Mono",monospace; font-weight:600; font-size:10px; line-height:12px; letter-spacing:0.08em; text-transform:uppercase; }
.dash-achview .av-pill .av-pdot { width:6px; height:6px; border-radius:999px; flex-shrink:0; }
.dash-achview .av-pill--on { background:#0A0A0A; border:1px solid #0A0A0A; color:#C5F154; }
.dash-achview .av-pill--on .av-pdot { background:#C5F154; }
.dash-achview .av-pill--off { background:transparent; border:1px solid #E5E7EB; color:#6B7280; }
.dash-achview .av-pill--off .av-pdot { background:#9CA3AF; }

/* overall rating dark card */
.dash-achview .av-overall { display:flex; flex-direction:row; align-items:center; gap:16px; background:#0A0A0A; border-radius:18px; padding:20px 24px; flex-shrink:0; }
.dash-achview .av-overall__tile { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; background:#C5F154; border-radius:12px; flex-shrink:0; }
.dash-achview .av-overall__text { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.dash-achview .av-overall__label { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.08em; color:#9CA3AF; text-transform:uppercase; }
.dash-achview .av-overall__val { font-family:"Roboto",sans-serif; font-weight:800; font-size:30px; line-height:32px; letter-spacing:-0.01em; color:#FFFFFF; }
.dash-achview .av-overall__max { font-family:"Roboto Mono",monospace; font-weight:500; font-size:13px; color:#C5F154; margin-left:4px; }

/* skills */
.dash-achview .av-skills { display:flex; flex-direction:column; align-items:flex-start; gap:12px; width:100%; padding-top:4px; }
.dash-achview .av-skills__label { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.08em; color:#6B7280; text-transform:uppercase; }
.dash-achview .av-chips { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; }
.dash-achview .av-chip2 { display:inline-flex; align-items:center; background:#F0EBDC; border-radius:999px; padding:6px 14px; font-family:"Roboto",sans-serif; font-weight:500; font-size:13px; color:#0A0A0A; }

/* cards */
.dash-achview .av-card { display:flex; flex-direction:column; gap:24px; width:100%; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:18px; padding:32px 36px; box-shadow:none; }
.dash-achview .av-card__head { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.dash-achview .av-card__eyebrow { font-family:"Roboto Mono",monospace; font-weight:500; font-size:11px; letter-spacing:0.08em; color:#6B7280; text-transform:uppercase; }
.dash-achview .av-card__title { font-family:"Roboto",sans-serif; font-weight:800; font-size:22px; line-height:26px; letter-spacing:-0.01em; color:#0A0A0A; }

/* narrative sections */
.dash-achview .av-sec { display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; }
.dash-achview .av-sec + .av-sec { border-top:1px solid #F0EBDC; padding-top:22px; }
.dash-achview .av-sec__label { font-family:"Roboto Mono",monospace; font-weight:600; font-size:11px; letter-spacing:0.08em; color:#9CA3AF; text-transform:uppercase; }
.dash-achview .av-sec__body { font-family:"Roboto",sans-serif; font-weight:400; font-size:14px; line-height:22px; color:#4B5563; margin:0; max-width:760px; }

/* performance ranked bars */
.dash-achview .av-rates { display:flex; flex-direction:column; width:100%; }
.dash-achview .av-rate { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:32px; width:100%; padding:18px 0 0 0; border-top:1px solid #F0EBDC; }
.dash-achview .av-rate:first-child { border-top:0; padding-top:4px; }
.dash-achview .av-rate__label { display:flex; flex-direction:column; align-items:flex-start; gap:3px; flex:1 1 auto; }
.dash-achview .av-rate__name { font-family:"Roboto",sans-serif; font-weight:600; font-size:14px; line-height:18px; color:#0A0A0A; }
.dash-achview .av-rate__desc { font-family:"Roboto",sans-serif; font-weight:400; font-size:12px; line-height:16px; color:#6B7280; }
.dash-achview .av-rate__meter { display:flex; flex-direction:row; align-items:center; gap:14px; width:280px; flex-shrink:0; }
.dash-achview .av-rate__track { width:220px; height:6px; background:#F3F4F6; border-radius:999px; overflow:hidden; }
.dash-achview .av-rate__fill { height:6px; background:#C5F154; border-radius:999px; }
.dash-achview .av-rate__val { width:32px; flex-shrink:0; text-align:right; font-family:"Roboto Mono",monospace; font-weight:600; font-size:13px; color:#0A0A0A; }

/* awaiting-review note */
.dash-achview .av-await { display:flex; flex-direction:row; align-items:center; gap:14px; width:100%; margin-top:8px; padding:20px 22px; background:#F5F1E8; border:1px dashed #D8CFB8; border-radius:14px; }
.dash-achview .av-await__icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:999px; flex-shrink:0; }
.dash-achview .av-await__text { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.dash-achview .av-await__title { font-family:"Roboto",sans-serif; font-weight:700; font-size:15px; line-height:20px; color:#0A0A0A; }
.dash-achview .av-await__copy { font-family:"Roboto",sans-serif; font-weight:400; font-size:13px; line-height:18px; color:#6B7280; }

@media (max-width:860px) {
  .dash-achview .av-main { padding:20px 20px 48px; }
  .dash-achview .av-head { flex-direction:column; gap:18px; }
  .dash-achview .av-title { font-size:30px; line-height:36px; }
  .dash-achview .av-rate { flex-direction:column; align-items:flex-start; gap:10px; }
  .dash-achview .av-rate__meter { width:100%; }
  .dash-achview .av-rate__track { flex:1 1 auto; width:auto; }
}

/* ==========================================================================
   .dash-perfreview — Performance Review (Business Head)
   Route: GET /startEmployeePerformanceReviewTest_<employeeId>
   View:  views/startEmployeePerformanceReviewTest.ejs  (body-only, employer-layout-test)
   Paper: "Performance Review — Desktop (Business Head)"
   Spec:  design.md §11 — radio pills, chips, jb-dialect table, 2-state status pill.
   ========================================================================== */

.dash-perfreview {
  --ink: #0A0A0A; --lime: #C5F154; --cream: #F5F1E8; --cream-2: #F0EBDC;
  --line: #E5E7EB; --soft: #4B5563; --muted: #6B7280; --disabled: #9CA3AF;
  --danger: #DC2626;
  padding: 8px 28px 64px !important;
  background: #FAFAF7;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-perfreview, .dash-perfreview *, .dash-perfreview *::before, .dash-perfreview *::after { box-sizing: border-box; }
.dash-perfreview * { font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; }
.dash-perfreview h1, .dash-perfreview h2, .dash-perfreview h3, .dash-perfreview p, .dash-perfreview span { margin: 0; letter-spacing: normal; }

/* ---- page header ---- */
.dash-perfreview .pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 0 28px; }
.dash-perfreview .pr-head__main { display: flex; flex-direction: column; gap: 12px; }
.dash-perfreview .pr-eyebrow { display: flex; align-items: center; gap: 10px; }
.dash-perfreview .pr-eyebrow__chip { display: inline-flex; background: var(--ink); color: var(--lime); border-radius: 4px; padding: 3px 8px; font-family: "Roboto Mono", monospace !important; font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; }
.dash-perfreview .pr-eyebrow__crumb { font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.06em; color: var(--muted); }
.dash-perfreview .pr-title { font-weight: 800 !important; font-size: 40px !important; line-height: 46px; letter-spacing: -0.02em !important; color: var(--ink); }
.dash-perfreview .pr-sub { font-weight: 400; font-size: 14px; line-height: 22px; color: var(--soft); max-width: 560px; }
.dash-perfreview .pr-back { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 500; font-size: 14px; line-height: 18px; color: var(--soft); text-decoration: none !important; flex-shrink: 0; }
.dash-perfreview .pr-back:hover { border-color: var(--ink); color: var(--ink); }

/* ---- layout ---- */
.dash-perfreview .pr-grid { display: flex; align-items: flex-start; gap: 18px; }
.dash-perfreview .pr-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px; }
.dash-perfreview .pr-setup { width: 452px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; }
.dash-perfreview .pr-goal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ---- numbered section header ---- */
.dash-perfreview .pr-sec { display: flex; align-items: center; gap: 18px; }
.dash-perfreview .pr-sec--gap { padding-top: 6px; }
.dash-perfreview .pr-sec__num { font-family: "Roboto Mono", monospace !important; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.18em; color: var(--disabled); }
.dash-perfreview .pr-sec__line { height: 1px; flex: 1 1 0; background: var(--cream-2); }
.dash-perfreview .pr-sec__label { font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: 0.02em; color: var(--ink); }

/* ---- radio pills ---- */
.dash-perfreview .pr-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-perfreview .pr-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; margin: 0 !important; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; width: auto !important; }
.dash-perfreview .pr-pill input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.dash-perfreview .pr-pill__dot { width: 8px; height: 8px; border-radius: 999px; background: #D1D5DB; flex-shrink: 0; }
.dash-perfreview .pr-pill__text { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--soft); }
.dash-perfreview .pr-pill:hover { border-color: var(--ink); }
.dash-perfreview .pr-pill.is-on { background: var(--ink); border-color: var(--ink); }
.dash-perfreview .pr-pill.is-on .pr-pill__dot { background: var(--lime); }
.dash-perfreview .pr-pill.is-on .pr-pill__text { color: #fff; }

/* ---- form chips ---- */
.dash-perfreview .pr-forms { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.dash-perfreview .pr-forms__label { font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--disabled); }
.dash-perfreview .pr-forms__none { font-size: 13px; line-height: 18px; color: var(--disabled); }
.dash-perfreview .pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-perfreview .pr-chip { display: inline-flex !important; align-items: center; width: auto !important; max-width: none !important; padding: 8px 14px !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 999px !important; font-family: "Roboto", sans-serif !important; font-weight: 500 !important; font-size: 13px !important; line-height: 16px !important; letter-spacing: 0 !important; color: var(--ink) !important; cursor: pointer; text-transform: none !important; height: auto !important; }
.dash-perfreview .pr-chip:hover { border-color: var(--ink) !important; }
.dash-perfreview .pr-chip.selected { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--lime) !important; }

/* ---- card footer: pager + primary ---- */
.dash-perfreview .pr-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--cream-2); }
.dash-perfreview .pr-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-perfreview .pr-pager__link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; font-weight: 500; font-size: 13px; line-height: 16px; color: var(--soft); cursor: pointer; }
.dash-perfreview .pr-pager__link:hover { border-color: var(--ink); color: var(--ink); }
.dash-perfreview .pr-pager__link.active { background: var(--ink); border-color: var(--ink); color: var(--lime); }

/* ---- buttons ---- */
.dash-perfreview .pr-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; max-width: none !important; height: auto !important; padding: 11px 18px !important; border: 0; border-radius: 10px !important; font-family: "Roboto", sans-serif !important; font-weight: 500 !important; font-size: 14px !important; line-height: 18px !important; letter-spacing: 0 !important; cursor: pointer; text-transform: none !important; text-decoration: none !important; }
.dash-perfreview .pr-btn--primary { background: var(--ink) !important; color: var(--lime) !important; }
.dash-perfreview .pr-btn--primary:hover { background: #1A1A1A !important; }

/* ---- goal panel ---- */
.dash-perfreview .pr-goal__head { display: flex; flex-direction: column; gap: 10px; }
.dash-perfreview .pr-goal__eyebrowrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dash-perfreview .pr-goal__eyebrow { font-family: "Roboto Mono", monospace !important; font-weight: 600; font-size: 10px; line-height: 12px; letter-spacing: 0.1em; color: var(--muted); }
.dash-perfreview .pr-metachip { display: inline-flex; background: var(--cream-2); border-radius: 6px; padding: 4px 8px; font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 11px; line-height: 14px; color: var(--ink); }
.dash-perfreview .pr-goal__title { font-weight: 800 !important; font-size: 22px !important; line-height: 26px; letter-spacing: -0.01em !important; color: var(--ink); }
.dash-perfreview .pr-goal__desc { font-weight: 400; font-size: 13px; line-height: 20px; color: var(--soft); }

/* ---- meta row ---- */
.dash-perfreview .pr-metarow { display: flex; align-items: stretch; padding: 16px 0; border-top: 1px solid var(--cream-2); border-bottom: 1px solid var(--cream-2); }
.dash-perfreview .pr-metarow__div { width: 1px; background: var(--cream-2); flex-shrink: 0; }
.dash-perfreview .pr-metacol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dash-perfreview .pr-metacol + .pr-metarow__div + .pr-metacol { padding-left: 24px; }
.dash-perfreview .pr-metacol__label { font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.08em; color: var(--muted); }
.dash-perfreview .pr-metacol__value { font-weight: 600; font-size: 14px; line-height: 18px; color: var(--ink); }
.dash-perfreview .pr-metacol__sub { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--muted); }

/* ---- milestones table (jb dialect) ---- */
.dash-perfreview .pr-milestones { display: flex; flex-direction: column; gap: 12px; }
.dash-perfreview .pr-table { display: flex; flex-direction: column; }
.dash-perfreview .pr-thead { display: flex; align-items: flex-end; gap: 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.dash-perfreview .pr-thead span { font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dash-perfreview .pr-trow { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dash-perfreview .pr-trow__name { width: 220px; flex-shrink: 0; font-weight: 600; font-size: 14px; line-height: 18px; color: var(--ink); }
.dash-perfreview .pr-trow__date { width: 120px; flex-shrink: 0; font-weight: 400; font-size: 12px; line-height: 18px; color: var(--muted); }
.dash-perfreview .pr-trow__desc { flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: 12px; line-height: 18px; color: var(--soft); }
.dash-perfreview .pr-trow--empty span { font-weight: 400; font-size: 13px; line-height: 18px; color: var(--disabled); }

/* ---- goal footer tiles ---- */
.dash-perfreview .pr-goalfoot { display: flex; align-items: stretch; gap: 18px; }
.dash-perfreview .pr-metatile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--cream); border-radius: 10px; padding: 18px 20px; }
.dash-perfreview .pr-metatile__label { font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.08em; color: var(--muted); }
.dash-perfreview .pr-metatile__value { font-weight: 400; font-size: 13px; line-height: 18px; color: var(--soft); }
.dash-perfreview .pr-attach { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--ink); text-decoration: underline !important; }

/* ---- status pill (2-state monochrome) ---- */
.dash-perfreview .pr-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-family: "Roboto Mono", monospace !important; font-weight: 600; font-size: 10px; line-height: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.dash-perfreview .pr-status__dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.dash-perfreview .pr-status--active { background: var(--ink); color: var(--lime); }
.dash-perfreview .pr-status--active .pr-status__dot { background: var(--lime); }
.dash-perfreview .pr-status--muted { border: 1px solid var(--line); color: var(--muted); }
.dash-perfreview .pr-status--muted .pr-status__dot { background: var(--disabled); }

/* ---- empty state ---- */
.dash-perfreview .pr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; background: var(--cream); border: 1px dashed #D8CFB8; border-radius: 14px; padding: 40px 32px; }
.dash-perfreview .pr-empty__badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.dash-perfreview .pr-empty__title { font-weight: 800 !important; font-size: 22px !important; line-height: 26px; letter-spacing: -0.01em !important; color: var(--ink); }
.dash-perfreview .pr-empty__text { font-weight: 400; font-size: 13px; line-height: 20px; color: var(--soft); max-width: 380px; }

/* ---- dialogs (Type A confirm — design.md §11.4) ---- */
.dash-perfreview ~ .pr-scrim, .pr-scrim { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(10,10,10,0.55); align-items: center; justify-content: center; padding: 24px; font-family: "Roboto", sans-serif; }
.pr-scrim .pr-modal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; width: 100%; max-width: 460px; background: #fff; border: 1px solid #E5E7EB; border-radius: 18px; padding: 32px; box-shadow: 0 24px 60px rgba(10,10,10,0.35); }
.pr-scrim .pr-modal, .pr-scrim .pr-modal * { box-sizing: border-box; font-family: "Roboto", sans-serif; }
.pr-scrim .pr-modal__badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; flex-shrink: 0; }
.pr-scrim .pr-modal__badge--lime { background: #C5F154; }
.pr-scrim .pr-modal__badge--ink { background: #0A0A0A; }
.pr-scrim .pr-modal__badge--danger { background: #DC2626; }
.pr-scrim .pr-modal__title { margin: 0; font-weight: 800 !important; font-size: 22px !important; line-height: 26px; letter-spacing: -0.01em !important; color: #0A0A0A; }
.pr-scrim .pr-modal__text { margin: 0; font-weight: 400; font-size: 14px; line-height: 22px; color: #6B7280; max-width: 380px; }
.pr-scrim .pr-modal__actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.pr-scrim .pr-btn { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; max-width: none !important; height: auto !important; padding: 11px 18px !important; border: 0; border-radius: 10px !important; font-weight: 500 !important; font-size: 14px !important; line-height: 18px !important; letter-spacing: 0 !important; cursor: pointer; text-transform: none !important; }
.pr-scrim .pr-btn--primary { background: #0A0A0A !important; color: #C5F154 !important; }
.pr-scrim .pr-btn--primary:hover { background: #1A1A1A !important; }

@media (max-width: 1200px) {
  .dash-perfreview .pr-grid { flex-direction: column; }
  .dash-perfreview .pr-setup { width: 100%; }
  .dash-perfreview .pr-goal { width: 100%; }
}

/* ==========================================================================
   .dash-stepper — SHARED multi-step progress bar (design.md §11.4)
   Paper: "Design System — Inkqe" → 06 · Stepper
   Markup: views/partials/shared/review-stepper.ejs
   NOT screen-scoped on purpose — one stepper for every flow. Fixed 150px label
   slots so the nodes land at identical x-positions on every step of a flow.
   Supersedes the per-screen .pf-step / .ob-step / .dp-step / .db-step /
   .pd-step / .mp-stepper families — fold those in as each screen is touched.
   ========================================================================== */
.dash-stepper { display: flex; align-items: flex-start; width: 100%; font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; }
.dash-stepper, .dash-stepper *, .dash-stepper *::before, .dash-stepper *::after { box-sizing: border-box; }
.dash-stepper__step { width: 150px; flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dash-stepper__line { flex: 1 1 auto; height: 2px; background: #E5E7EB; margin-top: 13px; min-width: 24px; }
.dash-stepper__line.is-done { background: #0A0A0A; }
.dash-stepper__node {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; border: 1px solid #E5E7EB;
  font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 12px; line-height: 14px;
  color: #9CA3AF;
}
.dash-stepper__label { font-weight: 500; font-size: 13px; line-height: 18px; text-align: center; color: #9CA3AF; }
.dash-stepper__step.is-done .dash-stepper__node { background: #0A0A0A; border-color: #0A0A0A; color: #C5F154; }
.dash-stepper__step.is-done .dash-stepper__label { color: #6B7280; }
.dash-stepper__step.is-current .dash-stepper__node { background: #0A0A0A; border-color: #0A0A0A; color: #C5F154; font-weight: 600; }
.dash-stepper__step.is-current .dash-stepper__label { color: #0A0A0A; font-weight: 600; }

@media (max-width: 900px) {
  .dash-stepper { flex-wrap: wrap; gap: 12px 0; }
  .dash-stepper__line { display: none; }
  .dash-stepper__step { flex: 1 1 50%; width: auto; }
}

/* Self-contained tokens for the shared .ink-rate alias (design.md §11.4 rating
   scale). The .onb-rate rules read these from the .dash-onb scope; outside
   onboarding there is no such ancestor, so declare them on the rating elements
   themselves and .ink-rate works in any layer. */
.ink-rate, .ink-rate__legend {
  --brand: #C5F154; --ink: #0A0A0A; --cream-2: #F0EBDC;
  --border: #E5E7EB; --text-disabled: #9CA3AF; --text-muted: #6B7280;
}

/* ==========================================================================
   .dash-prform — Performance Review flow, steps 1–3
   Views: form1-add_PerformanceReview.ejs · form2-test.ejs · form3.ejs
   Routes: GET /add_PerformanceReviewTest_<id> → POST /form1Submit
           → POST /form2Submit → POST /form3Submit
   Stepper comes from partials/shared/review-stepper.ejs (.dash-stepper).
   Step 3's rating rows use the shared .ink-rate alias.
   ========================================================================== */
.dash-prform {
  --ink: #0A0A0A; --lime: #C5F154; --cream: #F5F1E8; --cream-2: #F0EBDC;
  --line: #E5E7EB; --soft: #4B5563; --muted: #6B7280; --disabled: #9CA3AF;
  --danger: #DC2626;
  padding: 8px 28px 64px !important;
  background: #FAFAF7;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-prform, .dash-prform *, .dash-prform *::before, .dash-prform *::after { box-sizing: border-box; }
.dash-prform * { font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; }
.dash-prform h1, .dash-prform p, .dash-prform span, .dash-prform label { margin: 0; letter-spacing: normal; }
.dash-prform .dash-stepper { padding: 28px 0 4px; }

/* header */
.dash-prform .prf-head { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 28px; }
.dash-prform .prf-eyebrow { display: flex; align-items: center; gap: 10px; }
.dash-prform .prf-eyebrow__chip { display: inline-flex; background: var(--ink); color: var(--lime); border-radius: 4px; padding: 3px 8px; font-family: "Roboto Mono", monospace !important; font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.dash-prform .prf-eyebrow__crumb { font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dash-prform .prf-title { font-weight: 800 !important; font-size: 40px !important; line-height: 46px; letter-spacing: -0.02em !important; color: var(--ink); }
.dash-prform .prf-sub { font-weight: 400; font-size: 14px; line-height: 22px; color: var(--soft); max-width: 640px; }

/* card */
.dash-prform .prf-card { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px 36px; }

/* section header */
.dash-prform .prf-sec { display: flex; align-items: center; gap: 18px; }
.dash-prform .prf-sec--gap { padding-top: 6px; }
.dash-prform .prf-sec__num { font-family: "Roboto Mono", monospace !important; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.18em; color: var(--disabled); }
.dash-prform .prf-sec__line { height: 1px; flex: 1 1 0; background: var(--cream-2); }
.dash-prform .prf-sec__label { font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: 0.02em; color: var(--ink); }

/* fields */
.dash-prform .prf-row { display: flex; gap: 18px; }
.dash-prform .prf-row > .prf-field { flex: 1 1 0; min-width: 0; }
.dash-prform .prf-field { display: flex; flex-direction: column; gap: 6px; }
.dash-prform .prf-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-prform .prf-field__label { font-weight: 500 !important; font-size: 13px !important; line-height: 16px; color: var(--ink); margin: 0 !important; }
.dash-prform .prf-field__tag { font-family: "Roboto Mono", monospace !important; font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--disabled); }
.dash-prform .prf-help { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--disabled); }
.dash-prform .prf-input {
  width: 100% !important; max-width: none !important; height: 48px !important;
  padding: 0 14px !important; background: #fff !important;
  border: 1px solid var(--line) !important; border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important; font-weight: 400 !important;
  font-size: 15px !important; line-height: 18px !important; letter-spacing: normal !important;
  color: var(--ink) !important; text-transform: none !important; box-shadow: none !important;
}
.dash-prform .prf-input::placeholder { color: var(--disabled) !important; opacity: 1; }
.dash-prform .prf-input:focus { border-color: var(--ink) !important; outline: none !important; }
.dash-prform .prf-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; }
.dash-prform .prf-textarea { height: auto !important; min-height: 120px !important; padding: 14px !important; line-height: 22px !important; resize: vertical; }
.dash-prform .prf-select { position: relative; }
.dash-prform .prf-select select { appearance: none; -webkit-appearance: none; }
.dash-prform .prf-select::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--disabled); pointer-events: none; }

/* tagsinput chips (legacy .tag is block + grey — see design.md §11.6) */
.dash-prform #tags_input .bootstrap-tagsinput { width: 100% !important; min-height: 48px !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: none !important; }
.dash-prform #tags_input .bootstrap-tagsinput input { font-family: "Roboto", sans-serif !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: normal !important; background: #fff !important; height: auto !important; padding: 0 !important; border: 0 !important; }
.dash-prform .tag, .dash-prform span.tag { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; background: var(--cream-2) !important; color: var(--ink) !important; border-radius: 999px !important; padding: 5px 10px !important; font-family: "Roboto", sans-serif !important; font-weight: 500 !important; font-size: 13px !important; line-height: 16px !important; letter-spacing: normal !important; }
.dash-prform .tag [data-role="remove"] { color: var(--disabled) !important; cursor: pointer; }

/* radio pills (step 2 notice period) */
.dash-prform .prf-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-prform .prf-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; margin: 0 !important; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; width: auto !important; }
.dash-prform .prf-pill input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.dash-prform .prf-pill__dot { width: 8px; height: 8px; border-radius: 999px; background: #D1D5DB; flex-shrink: 0; }
.dash-prform .prf-pill__text { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--soft); }
.dash-prform .prf-pill:hover { border-color: var(--ink); }
.dash-prform .prf-pill.is-on { background: var(--ink); border-color: var(--ink); }
.dash-prform .prf-pill.is-on .prf-pill__dot { background: var(--lime); }
.dash-prform .prf-pill.is-on .prf-pill__text { color: #fff; }

/* rating rows inherit .ink-rate; only the first row's top border is dropped */
.dash-prform .ink-rate__legend { padding-bottom: 10px; }
.dash-prform .ink-rate + .ink-rate { border-top: 1px solid var(--cream-2); }

/* messages */
.dash-prform .prf-error { display: none; font-weight: 400; font-size: 13px; line-height: 18px; color: var(--danger); }
.dash-prform .was-validated .prf-input:invalid ~ .invalid-feedback,
.dash-prform .prf-input:invalid ~ .invalid-feedback { font-size: 12px; line-height: 16px; color: var(--danger); }
.dash-prform .prf-note { background: var(--cream); border-radius: 10px; padding: 16px 18px; font-weight: 400; font-size: 13px; line-height: 20px; color: var(--soft); }

/* footer */
.dash-prform .prf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--cream-2); }
.dash-prform .prf-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; max-width: none !important; height: auto !important; padding: 11px 18px !important; border: 0; border-radius: 10px !important; font-family: "Roboto", sans-serif !important; font-weight: 500 !important; font-size: 14px !important; line-height: 18px !important; letter-spacing: 0 !important; cursor: pointer; text-transform: none !important; text-decoration: none !important; }
.dash-prform .prf-btn--primary { background: var(--ink) !important; color: var(--lime) !important; }
.dash-prform .prf-btn--primary:hover { background: #1A1A1A !important; }
.dash-prform .prf-btn--ghost { background: transparent !important; border: 1px solid var(--ink) !important; border-radius: 999px !important; color: var(--ink) !important; }
.dash-prform .prf-btn--ghost:hover { background: var(--cream) !important; color: var(--ink) !important; }

/* the autocomplete box renders as a stray grey line when empty (design.md §11.6) */
.dash-prform #suggestions:empty, .dash-prform .autocomplete-suggestions:empty { display: none; }

@media (max-width: 900px) {
  .dash-prform .prf-row { flex-direction: column; }
}

/* Step 4 success screen renders the scrim open (no JS toggle involved). */
.pr-scrim--open { display: flex !important; }

/* ==========================================================================
   .ink-score — SHARED read-only score meter (design.md §11.4)
   Paper: "Design System — Inkqe" → 07 · Score meter
   The compact, read-only sibling of .ink-rate: five segments echoing the five
   rating buttons, plus the numeric value. Use in table cells and KPI tiles.
   NOT screen-scoped. Supersedes .dash-perf__stars / .cr-stars / .cr-pv-stars /
   .dp-stars — fold those in as each screen is touched.
   ========================================================================== */
.ink-score { display: inline-flex; align-items: center; gap: 10px; }
.ink-score, .ink-score * { box-sizing: border-box; }
.ink-score__meter { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.ink-score__seg { width: 18px; height: 6px; border-radius: 999px; background: #E5E7EB; flex-shrink: 0; }
.ink-score__seg.is-on { background: #0A0A0A; }
.ink-score__value {
  font-family: "Roboto Mono", monospace !important; font-weight: 600 !important;
  font-size: 13px !important; line-height: 16px !important; letter-spacing: normal !important;
  color: #0A0A0A;
}
/* no data — never render 0.0, that reads as a bad score rather than no score */
.ink-score--empty .ink-score__value { font-weight: 500 !important; color: #9CA3AF; }

/* KPI variant: sits under the 44px value, carries no inline number */
.ink-score--kpi { gap: 0; }
.ink-score--kpi .ink-score__meter { gap: 4px; }
.ink-score--kpi .ink-score__seg { width: 34px; height: 8px; }

/* Custom-review-form builder: preview of the 1-5 rating control (design.md §11.4).
   Inert display only — the live control is .ink-rate on the review form itself. */
/* Rating scale preview — design.md §11.9, the "Perf Scale v2 — A · Segmented
   1-5" component. Was 34x30 / gap 6 / 13px, i.e. close to the spec but not it;
   now the exact board values (44x40, r8, gap 8, Roboto Mono 14/18) so this
   builder and the goal-review builder show the same control. Also SCOPED — the
   selectors were global, and `.cr-scale` is generic enough to collide.
   2026-07-31. */
.dash-customreview .cr-scale { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; }
.dash-customreview .cr-scale__legend {
  display: flex; justify-content: space-between; width: 252px; padding-bottom: 10px;
}
.dash-customreview .cr-scale__legend span {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500; font-size: 10px; line-height: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9CA3AF;
}
.dash-customreview .cr-scale__row { display: flex; align-items: center; gap: 8px; }
.dash-customreview .cr-scale__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: #FFFFFF; border: 1px solid #E5E7EB;
  font-family: "Roboto Mono", "Roboto", monospace !important; font-weight: 500;
  font-size: 14px; line-height: 18px; color: #9CA3AF;
}
/* Filled state, for wherever this preview is rendered with a value. */
.dash-customreview .cr-scale__btn.is-on {
  background: #0A0A0A; border-color: #0A0A0A; font-weight: 600; color: #C5F154;
}
@media (max-width: 767px) {
  .dash-customreview .cr-scale__row { flex-wrap: wrap; }
  .dash-customreview .cr-scale__legend { width: auto; gap: 24px; }
}


/* ============================================================
   .achievement-view — Achievement detail (user-achievement-view)
   MIGRATED 2026-07-30 (M5) out of a 372-line inline <style> block at the top of
   views/user-achievement-view.ejs. Reskin CSS has exactly one home. The
   selectors were already BEM-namespaced (.achievement-view__*), so they are
   moved verbatim apart from the two corrections noted inline below.
   ============================================================ */
    .achievement-view {
        --brand: #C5F154;
        --ink: #0A0A0A;
        --text-soft: #4B5563;
        --text-muted: #6B7280;
        --text-disabled: #9CA3AF;
        --border: #E5E7EB;

        max-width: 1180px;
        margin: 0 auto;
        padding: 28px 28px 56px;
        display: flex;
        flex-direction: column;
        gap: 22px;
        font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
        color: var(--ink);
    }

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

    .achievement-view section { margin: 0; }

    .achievement-view__hero {
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #FFFFFF;
        padding: 22px;
        margin: 0;
    }

    .achievement-view__eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
    }

    .achievement-view__pill {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        min-height: 24px;
        margin-bottom: 18px;
        padding: 4px 10px;
        background: var(--ink);
        border-radius: 4px;
        color: var(--brand);
        font-family: "Roboto Mono", "Roboto", monospace;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.1em;
        line-height: 1;
        text-transform: uppercase;
    }

    .achievement-view__eyebrow .achievement-view__pill {
        margin-bottom: 0;
    }

    .achievement-view__muted-label {
        color: var(--text-disabled);
        font-family: "Roboto Mono", "Roboto", monospace;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.12em;
        line-height: 1;
        text-transform: uppercase;
    }

    .achievement-view__title {
        color: var(--ink);
        font-family: "Roboto", sans-serif;
        font-size: 40px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 46px;
        margin: 0 0 14px;
    }

    .achievement-view__subtitle {
        color: var(--text-soft);
        font-size: 16px;
        line-height: 24px;
        margin: 0;
        max-width: 780px;
    }

    .achievement-view__summary-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.55fr);
        gap: 22px;
        margin: 0;
    }

    .achievement-view__card {
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #FFFFFF;
        padding: 22px;
    }

    .achievement-view__person {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }

    .achievement-view__avatar {
        width: 72px;
        height: 72px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #F8F9FB;
        color: var(--ink);
        font-family: "Roboto Mono", "Roboto", monospace;
        font-size: 20px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 72px;
    }

    .achievement-view__name {
        color: var(--ink);
        font-size: 22px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -0.03em;
        margin: 0 0 8px;
    }

    .achievement-view__meta {
        color: var(--ink);
        font-size: 15px;
        line-height: 20px;
        margin: 0;
    }

    .achievement-view__project {
        color: var(--ink);
        font-weight: 700;
    }

    .achievement-view__status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        padding: 8px 12px;
        border-radius: 4px;
        background: var(--ink);
        color: var(--brand);
        font-family: "Roboto Mono", "Roboto", monospace;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-top: 14px;
    }

    .achievement-view__status-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--brand);
    }

    .achievement-view__status-dot--reviewed {
        background: var(--brand);
    }

    .achievement-view__side-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .achievement-view__side-label {
        color: var(--ink);
        font-size: 15px;
        line-height: 20px;
        font-weight: 800;
        margin: 0 0 18px;
    }

    .achievement-view__side-value {
        color: var(--ink);
        font-size: 34px;
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1;
        margin: 0;
    }
    /* R12 (M5, 2026-07-30): `rating` is only written by the reviewer-approval
       controllers, so an unreviewed achievement genuinely has no overall score.
       A bare em dash was honest but looked like a rendering fault; it is now
       muted and captioned. */
    .achievement-view__side-max {
        font-family: "Roboto Mono", "Roboto", monospace !important;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--text-disabled);
    }
    .achievement-view__side-value--none { color: #D1D5DB; }
    .achievement-view__side-note {
        margin: 6px 0 0;
        font-family: "Roboto Mono", "Roboto", monospace !important;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-disabled);
    }

    .achievement-view__section {
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #FFFFFF;
        padding: 22px;
        margin: 0;
    }

    .achievement-view__section-header {
        margin-bottom: 22px;
    }

    .achievement-view__section-title {
        margin: 0 0 8px !important;
        padding: 0 !important;
        font-family: "Roboto", sans-serif !important;
        font-size: 22px !important;
        line-height: 28px !important;
        font-weight: 900 !important;
        letter-spacing: -0.03em !important;
        color: var(--ink) !important;
    }

    .achievement-view__section-copy {
        margin: 0;
        max-width: 620px;
        color: var(--text-soft);
        font-size: 16px;
        line-height: 24px;
    }

    .achievement-view__skills {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .achievement-view__skill {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 18px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #FFFFFF;
        color: var(--ink);
        font-size: 14px;
        font-weight: 800;
    }

    .achievement-view__content-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .achievement-view__info-card {
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #FFFFFF;
        padding: 18px;
        min-height: 112px;
    }

    .achievement-view__info-card--full {
        grid-column: 1 / -1;
    }

    .achievement-view__info-label {
        color: var(--text-disabled);
        font-family: "Roboto Mono", "Roboto", monospace;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin: 0 0 12px;
    }

    .achievement-view__info-text {
        color: var(--ink);
        font-size: 14px;
        line-height: 22px;
        margin: 0;
    }

    .achievement-view__ratings-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .achievement-view__rating-card {
        min-height: 112px;
        padding: 18px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: #FFFFFF;
    }

    .achievement-view__rating-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
    }

    .achievement-view__rating-title {
        display: block;
        margin: 0;
        font-size: 14px;
        line-height: 18px;
        font-weight: 800;
        color: var(--ink);
    }

    /* Replaced the star-image row (M5, 2026-07-30). It was
       `/images/testIcons/<value>.svg` — off-palette star art, and when a
       criterion had no score getRatingValue() returned "0", pointing at
       0.svg, which DOES NOT EXIST: an unrated criterion rendered a broken
       image. The score is now stated as a number and drawn by the bar. */
    .achievement-view__rating-value {
        font-family: "Roboto Mono", "Roboto", monospace !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #0A0A0A;
        white-space: nowrap;
    }
    .achievement-view__rating-max {
        font-weight: 500 !important;
        font-size: 11px !important;
        color: var(--text-disabled);
    }
    .achievement-view__rating-value--none {
        font-size: 10px !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--text-disabled);
    }

    .achievement-view__rating-description {
        color: var(--ink);
        font-size: 14px;
        line-height: 22px;
        margin: 0;
    }

    .achievement-view__rating-bar {
        width: 100%;
        height: 7px;
        border-radius: 999px;
        background: var(--border);
        overflow: hidden;
        margin: 0 0 10px;
    }

    /* CORRECTED on migration (M5, 2026-07-30). Two problems:
       (a) `width: 90%` was HARDCODED, so all six criteria drew an identical
           90%-full bar no matter what the person actually scored — a bar that
           contradicted the number printed beside it. Width is now an inline
           style computed from the real value in the view.
       (b) `#41C75D` was a second green. The reskin has one green, and lime is
           1.27:1 on white so it cannot carry a value on a light surface — the
           fill is ink on a cream track. */
    .achievement-view__rating-fill {
        display: block;
        height: 100%;
        width: 0;
        border-radius: inherit;
        background: #0A0A0A;
    }
    .achievement-view__rating-fill--none { background: #D1D5DB; }

    .achievement-view__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: -2px;
    }

    .achievement-view__back {
        display: inline-flex;
        width: fit-content;
        min-height: 40px;
        padding: 9px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #FFFFFF;
        color: var(--ink);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    @media (max-width: 991px) {
        .achievement-view {
            padding: 22px 16px 42px;
        }

        .achievement-view__summary-grid,
        .achievement-view__content-grid,
        .achievement-view__ratings-grid {
            grid-template-columns: 1fr;
        }

        .achievement-view__title {
            font-size: 32px;
        }
    }


/* ============================================================
   .employee-goal-view — Employee goal detail (employee-goalTest)
   MIGRATED 2026-07-31 (M5 pt2) out of a 377-line inline <style> block in
   views/employee-goalTest.ejs. Reskin CSS has one home, and an inline block
   cannot be cache-busted with the rest of the layer. Selectors were already
   BEM-namespaced (.employee-goal-view__*) so they move verbatim.
   ============================================================ */
    .employee-goal-view {
      /* This root is a <main>, so it never picked up legacy
         `section { margin: 20px }` the way the other employee pages do, and it
         had no margin of its own — the page sat flush against the sticky
         .topnav and the sidebar. Stated explicitly. 2026-08-03. */
      margin: 20px;

      --brand: #C5F154;
      --ink: #0A0A0A;
      --text-soft: #4B5563;
      --text-muted: #6B7280;
      --text-disabled: #9CA3AF;
      --border: #E5E7EB;

      display: flex;
      flex-direction: column;
      gap: 22px;
      font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--ink);
    }

    .employee-goal-view,
    .employee-goal-view *,
    .employee-goal-view *::before,
    .employee-goal-view *::after { box-sizing: border-box; }

    .employee-goal-view__hero,
    .employee-goal-view__card,
    .employee-goal-view__meta-card,
    .employee-goal-view__milestone-card {
      background: #FFFFFF;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: none;
    }

    .employee-goal-view__hero {
      padding: 22px;
    }

    .employee-goal-view__eyebrow,
    .employee-goal-view__section-pill {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      width: fit-content;
      margin-bottom: 18px;
      padding: 4px 10px;
      background: var(--brand);
      color: var(--ink);
      border-radius: 999px;
      font-family: "Roboto Mono", "Roboto", monospace;
      font-size: 10px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .employee-goal-view__title {
      margin: 0 0 12px;
      color: var(--ink);
      font-family: "Roboto", sans-serif;
      font-size: 34px;
      line-height: 40px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .employee-goal-view__description {
      margin: 0;
      color: var(--text-muted);
      font-size: 15px;
      line-height: 22px;
      max-width: 900px;
    }

    .employee-goal-view__description a {
      color: var(--ink);
      font-weight: 700;
      text-decoration: none;
    }

    .employee-goal-view__meta-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px 14px;
    }

    .employee-goal-view__meta-card {
      min-height: 116px;
      padding: 22px;
    }

    .employee-goal-view__meta-label {
      display: block;
      margin-bottom: 12px;
      color: var(--text-disabled);
      font-family: "Roboto Mono", "Roboto", monospace;
      font-size: 11px;
      line-height: 14px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .employee-goal-view__meta-value {
      margin: 0;
      color: var(--ink);
      font-family: "Roboto", sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .employee-goal-view__meta-subtext {
      display: block;
      margin-top: 6px;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
    }

    .employee-goal-view__status {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 6px 14px;
      border-radius: 999px;
      background: #ECFCCB;
      color: #365314;
      font-size: 13px;
      line-height: 16px;
      font-weight: 700;
      text-transform: capitalize;
    }

    .employee-goal-view__download {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
      min-height: 40px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      background: var(--ink);
      color: var(--brand) !important;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .employee-goal-view__card {
      padding: 22px;
    }

    .employee-goal-view__section-title {
      margin: 0 0 8px !important;
      padding: 0 !important;
      color: var(--ink) !important;
      font-family: "Roboto", sans-serif !important;
      font-size: 20px !important;
      line-height: 24px !important;
      font-weight: 700 !important;
      letter-spacing: -0.01em !important;
    }

    .employee-goal-view__section-text {
      margin: 0;
      max-width: 720px;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 20px;
    }

    .employee-goal-view__progress-wrap {
      margin-top: 22px;
    }

    .employee-goal-view__progress-track {
      position: relative;
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: #EEF2F7;
      overflow: hidden;
    }

    /* `#45C85A` was a THIRD off-palette green in this codebase, after the
       `#22C55E` button and the `#41C75D` achievement bar. One green: the fill is
       ink, since lime is 1.27:1 on white and cannot carry a value there.
       The width itself is fine — it is bound to the real completionPercentage
       via --progress-percent, set in the view's script. QA 2026-07-31. */
    .employee-goal-view__progress-fill {
      height: 100%;
      width: var(--progress-percent, 0%);
      border-radius: 999px;
      background: #0A0A0A;
      transition: width 0.3s ease;
    }

    .employee-goal-view__progress-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
    }

    .employee-goal-view__progress-value {
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
    }

    .employee-goal-view__milestone-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 14px;
    }

    .employee-goal-view__milestone-card {
      padding: 22px;
    }

    .employee-goal-view__milestone-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .employee-goal-view__milestone-title {
      margin: 0;
      color: var(--ink);
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .employee-goal-view__date-pill {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      margin-bottom: 18px;
      padding: 6px 12px;
      border-radius: 999px;
      background: #F5F6F8;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 16px;
      font-weight: 500;
    }

    .employee-goal-view__field-label {
      display: block;
      margin: 0 0 8px;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
    }

    .employee-goal-view__copy {
      margin: 0 0 18px;
      color: var(--text-muted);
      font-size: 14px;
      line-height: 20px;
    }

    .employee-goal-view__updates {
      min-height: 54px;
      margin-bottom: 18px;
      padding: 14px;
      border-radius: 14px;
      background: #FFFFFF;
      border: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 14px;
      line-height: 20px;
    }

    .employee-goal-view__select,
    .employee-goal-view__textarea {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #FFFFFF;
      color: var(--ink);
      font-family: "Roboto", sans-serif;
      font-size: 15px;
      font-weight: 400;
      box-shadow: none;
      outline: none;
    }

    .employee-goal-view__select {
      min-width: 150px;
      height: 42px;
      padding: 10px 14px;
    }

    .employee-goal-view__textarea {
      width: 100%;
      min-height: 118px;
      padding: 14px 16px;
      resize: vertical;
    }

    .employee-goal-view__textarea:focus,
    .employee-goal-view__select:focus {
      border-color: var(--ink);
      box-shadow: none;
      outline: none;
    }

    .employee-goal-view__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      border: 1px solid var(--ink);
      border-radius: 10px;
      background: var(--ink);
      color: var(--brand);
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      transition: opacity 0.2s ease;
    }

    .employee-goal-view__button:hover {
      opacity: 0.9;
    }

    .employee-goal-view__empty {
      padding: 22px;
      border-radius: 16px;
      background: #FFFFFF;
      border: 1px dashed var(--border);
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 500;
      text-align: center;
    }

    @media (max-width: 991px) {
      .employee-goal-view__meta-grid,
      .employee-goal-view__milestone-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 767px) {
      .employee-goal-view__hero,
      .employee-goal-view__card,
      .employee-goal-view__milestone-card,
      .employee-goal-view__meta-card {
        padding: 20px;
      }

      .employee-goal-view__title {
        font-size: 28px;
        line-height: 34px;
      }

      .employee-goal-view__meta-grid,
      .employee-goal-view__milestone-grid {
        grid-template-columns: 1fr;
      }

      .employee-goal-view__milestone-head {
        flex-direction: column;
      }

      .employee-goal-view__select {
        width: 100%;
      }
    }


/* ============================================================
   .employee-goals-v2 — Employee goal dashboard (employee-goal-dashboardTest)
   MIGRATED 2026-07-31 out of a 161-line inline <style> block in the view.
   Reskin CSS has one home. The status pills in here were rebuilt on migration —
   see the note above .employee-goals-v2__status.
   ============================================================ */
  .employee-goals-v2 {
    padding: 28px 28px 40px;
  }

  .employee-goals-v2__alerts {
    margin-top: 22px;
  }

  .employee-goals-v2__alert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .employee-goals-v2__alert {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 118px;
    padding: 18px;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    background: #F9FAFB;
    color: #0A0A0A;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
  }

  .employee-goals-v2__alert:hover {
    transform: translateY(-2px);
    border-color: #C5F154;
    background: #fff;
    color: #0A0A0A;
    text-decoration: none;
  }

  /* Same soft-tint green as the old status pills (#ECFDF5/#047857) — banned
     pattern, off-palette, and it read as a success state on a card whose whole
     point is that a goal is MISSING. It is a period label (Monthly / Quarterly /
     Half-yearly), so it becomes a neutral meta chip. 2026-07-31. */
  .employee-goals-v2__alert-kicker {
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F0EBDC;
    color: #0A0A0A;
    font-family: "Roboto Mono", "Roboto", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .employee-goals-v2__alert strong {
    font-size: 15px;
    line-height: 1.25;
  }

  .employee-goals-v2__alert span:last-child {
    color: #6B7280;
    font-size: 13px;
    line-height: 1.4;
  }

  .employee-goals-v2__table-card {
    margin-top: 22px;
  }

  .employee-goals-v2__goal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
  }

  .employee-goals-v2__goal-title strong {
    color: #0A0A0A;
    font-size: 14px;
    font-weight: 700;
  }

  .employee-goals-v2__pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .employee-goals-v2__muted {
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
  }

  .employee-goals-v2__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-family: "Roboto Mono", "Roboto", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-transform: uppercase;
    /* Base = the OPEN state, so any status the normaliser does not recognise
       (it slugifies anything unknown) lands on a styled pill instead of a bare
       one. The modifiers below override it. Declared HERE, before them — a
       second base rule after the modifiers would outrank them at equal
       specificity and flatten every state. */
    background: transparent;
    color: #6B7280;
    border: 1px solid #E5E7EB;
  }

  .employee-goals-v2__status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
  }

  /* ── Status pills rebuilt on migration, 2026-07-31 ──────────────────────
     These were a soft-tint traffic light: #ECFDF5/#047857 green, #EFF6FF/#1D4ED8
     blue, #FEF2F2/#B91C1C red. Three problems at once —
       · 10%-wash tint fills are a BANNED pattern (CLAUDE.md, user ruling);
         states are carried by SOLID fills here;
       · six off-palette colours, including a second green and a second red;
       · design.md §11 says status pills are 2-state monochrome.
     So: `completed` is the filled state (ink + lime, matching
     .dash-goals__status--done on the goal-status screen), and everything not
     completed is the open state (outline + muted). `overdue` is the single
     sanctioned exception — the one reskin red #DC2626, and SOLID with white
     text, never a tint. */
  .employee-goals-v2__status--completed {
    background: #0A0A0A;
    color: #C5F154;
    border: 1px solid #0A0A0A;
  }
  .employee-goals-v2__status--completed::before { background: #C5F154; }

  .employee-goals-v2__status--in-progress,
  .employee-goals-v2__status--pending,
  .employee-goals-v2__status--active {
    background: transparent;
    color: #6B7280;
    border: 1px solid #E5E7EB;
  }
  .employee-goals-v2__status--in-progress::before,
  .employee-goals-v2__status--pending::before,
  .employee-goals-v2__status--active::before { background: #9CA3AF; }

  .employee-goals-v2__status--overdue,
  .employee-goals-v2__status--late {
    background: #DC2626;
    color: #FFFFFF;
    border: 1px solid #DC2626;
  }
  .employee-goals-v2__status--overdue::before,
  .employee-goals-v2__status--late::before { background: #FFFFFF; }


  .employee-goals-v2__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .employee-goals-v2__action {
    min-height: 34px;
    padding: 8px 13px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  @media (max-width: 1199px) {
    .employee-goals-v2__alert-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 767px) {
    .employee-goals-v2 {
      padding: 18px 14px 32px;
    }

    .employee-goals-v2__alert-grid {
      grid-template-columns: 1fr;
    }
  }

/* ============================================================
   .employee-achievements-v2 — Staff achievement tracker
   Shares the dashboard hierarchy with the Staff goal dashboard while keeping
   achievement-specific status, score and responsive table behaviour scoped.
   ============================================================ */
.employee-achievements-v2 {
  padding: 28px 28px 48px;
}

.employee-achievements-v2__card {
  gap: 20px;
}

.employee-achievements-v2__search {
  cursor: text;
}

.employee-achievements-v2__table th:nth-child(2),
.employee-achievements-v2__table td:nth-child(2) {
  width: 190px;
}

.employee-achievements-v2__table th:nth-child(3),
.employee-achievements-v2__table td:nth-child(3) {
  width: 190px;
}

.employee-achievements-v2__table th:last-child,
.employee-achievements-v2__table td:last-child {
  width: 92px;
}

.employee-achievements-v2__title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}

.employee-achievements-v2__title-cell strong {
  color: #0A0A0A;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.employee-achievements-v2__title-cell span,
.employee-achievements-v2__rating-empty {
  color: #9CA3AF;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.employee-achievements-v2__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  color: #6B7280;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.employee-achievements-v2__status > span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: #9CA3AF;
}

.employee-achievements-v2__status--reviewed {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #C5F154;
}

.employee-achievements-v2__status--reviewed > span {
  background: #C5F154;
}

.employee-achievements-v2__action {
  min-width: 74px;
  height: 36px;
  justify-content: center;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
}

.employee-achievements-v2__no-results[hidden],
.employee-achievements-v2__table tr[hidden] {
  display: none !important;
}

.employee-achievements-v2__pagination {
  padding-top: 18px;
  border-top: 1px solid #E5E7EB;
}

@media (max-width: 767px) {
  .employee-achievements-v2 {
    padding: 18px 14px 32px;
  }

  .employee-achievements-v2 .dash-goals__cta {
    justify-content: center;
  }

  .employee-achievements-v2__table-wrap {
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .employee-achievements-v2__table,
  .employee-achievements-v2__table tbody,
  .employee-achievements-v2__table tr,
  .employee-achievements-v2__table td {
    display: block;
    width: 100% !important;
  }

  .employee-achievements-v2__table thead {
    display: none;
  }

  .employee-achievements-v2__table tbody tr {
    padding: 18px 0;
    border-bottom: 1px solid #E5E7EB;
  }

  .employee-achievements-v2__table tbody tr:first-child {
    padding-top: 0;
  }

  .employee-achievements-v2__table tbody tr:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .dash-goals .employee-achievements-v2__table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 34px;
    padding: 6px 0;
    border: 0;
    text-align: right;
  }

  .dash-goals .employee-achievements-v2__table tbody td::before {
    content: attr(data-label);
    color: #9CA3AF;
    font-family: "Roboto Mono", "Roboto", monospace !important;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dash-goals .employee-achievements-v2__table tbody td:first-child {
    display: block;
    padding: 0 0 10px;
    text-align: left;
  }

  .dash-goals .employee-achievements-v2__table tbody td:first-child::before {
    display: none;
  }

  .dash-goals .employee-achievements-v2__table tbody td:last-child {
    padding-top: 12px;
  }

  .employee-achievements-v2__title-cell {
    min-width: 0;
  }

  .employee-achievements-v2__pagination {
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================================
   Employer goal detail + review setup
   Current Goals hierarchy shared by employee-goal-by-employerTest.ejs and
   startEmployeeGoalReviewTest.ejs. Both views are body-only under the Employer
   V2 layout; no nested document or view-local token system remains.
   ============================================================ */
.employer-goal-detail,
.employer-goal-review {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto !important;
  padding: 28px 32px 64px;
}

.employer-goal-flow__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content !important;
  color: #4B5563 !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none !important;
}

.employer-goal-flow__back:hover {
  color: #0A0A0A !important;
}

.employer-goal-flow__head {
  align-items: flex-start;
}

.employer-goal-flow__head .dash-goals__head-text {
  max-width: 940px;
}

.employer-goal-flow__head .dash-goals__deck {
  max-width: 900px;
}

.employer-goal-flow__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.employer-goal-flow__tag,
.employer-goal-flow__count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  background: #FFFFFF;
  color: #4B5563;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.employer-goal-flow__count {
  background: #F5F1E8;
  border-color: #F0EBDC;
  color: #6B7280;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.employer-goal-flow__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  color: #6B7280;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.employer-goal-flow__status > span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: #9CA3AF;
}

.employer-goal-flow__status.is-complete {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #C5F154;
}

.employer-goal-flow__status.is-complete > span {
  background: #C5F154;
}

.employer-goal-flow__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #E5E7EB;
  border-left: 1px solid #E5E7EB;
}

.employer-goal-flow__fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}

.employer-goal-flow__fact--wide {
  grid-column: 1 / -1;
}

.employer-goal-flow__label {
  color: #9CA3AF;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employer-goal-flow__fact strong {
  color: #0A0A0A;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.employer-goal-flow__fact > span:not(.employer-goal-flow__label) {
  color: #6B7280;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.employer-goal-flow__text-link,
.employer-goal-flow__quiet-link {
  color: #0A0A0A !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.employer-goal-flow__quiet-link {
  color: #6B7280 !important;
  font-weight: 500;
}

.employer-goal-flow__section-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.employer-goal-flow__section-number {
  color: #9CA3AF;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.16em;
}

.employer-goal-flow__section-rule {
  height: 1px;
  flex: 1 1 auto;
  background: #E5E7EB;
}

.employer-goal-flow__section-label {
  color: #0A0A0A;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employer-goal-flow__table-wrap {
  width: 100%;
  overflow-x: auto;
}

.dash-goals .employer-goal-flow__table {
  min-width: 860px;
}

.employer-goal-flow__cell-title {
  color: #0A0A0A;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.employer-goal-flow__cell-muted {
  color: #6B7280;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  white-space: nowrap;
}

.employer-goal-flow__cell-copy {
  display: block;
  max-width: 360px;
  color: #4B5563;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

.employer-goal-flow__cell-update {
  white-space: pre-wrap;
}

.employer-goal-flow__table tr[hidden] {
  display: none !important;
}

.employer-goal-flow__pagination {
  padding-top: 18px;
  border-top: 1px solid #E5E7EB;
}

/* Employer goal detail --------------------------------------- */
.employer-goal-detail__overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: stretch;
}

.employer-goal-detail__overview {
  justify-content: flex-start;
}

.employer-goal-detail__progress {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border-radius: 18px;
  background: #0A0A0A;
  color: #FFFFFF;
}

.employer-goal-detail__progress-eyebrow {
  color: #C5F154;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.employer-goal-detail__progress-value {
  margin-top: 18px;
  color: #FFFFFF;
  font-size: 64px;
  font-weight: 800;
  line-height: 64px;
  letter-spacing: -0.04em;
}

.employer-goal-detail__progress-value span {
  color: #C5F154;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

.employer-goal-detail__progress h2 {
  margin-top: 14px !important;
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
}

.employer-goal-detail__progress p {
  margin-top: 6px !important;
  color: #9CA3AF !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

.employer-goal-detail__progress-track {
  height: 8px;
  margin-top: auto;
  background: #2A2A29;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.employer-goal-detail__progress-track > span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 8px;
  border-radius: 999px;
  background: #C5F154;
}

.employer-goal-detail__progress-scale {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  color: #9CA3AF;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
}

.employer-goal-detail__milestones {
  gap: 20px;
}

/* Employer goal review --------------------------------------- */
.employer-goal-review__layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: start;
}

.employer-goal-review__setup {
  gap: 24px;
  position: sticky;
  top: 24px;
}

.employer-goal-review__setup-copy,
.employer-goal-review__goal-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.employer-goal-review__setup-copy h2,
.employer-goal-review__goal-copy h2 {
  color: #0A0A0A !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  letter-spacing: -0.02em !important;
}

.employer-goal-review__setup-copy p,
.employer-goal-review__goal-copy p {
  color: #4B5563 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.employer-goal-review__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.employer-goal-review__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.employer-goal-review__option:hover {
  border-color: #0A0A0A;
}

.employer-goal-review__option.is-selected {
  border-color: #0A0A0A;
  background: #F5F1E8;
}

.employer-goal-review__option.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

.employer-goal-review__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.employer-goal-review__option-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid #9CA3AF;
  border-radius: 999px;
  background: #FFFFFF;
}

.employer-goal-review__option.is-selected .employer-goal-review__option-marker {
  border: 5px solid #0A0A0A;
}

.employer-goal-review__option-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.employer-goal-review__option-copy strong {
  color: #0A0A0A;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.employer-goal-review__option-copy span {
  color: #6B7280;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.employer-goal-review__option-meta {
  color: #9CA3AF;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.employer-goal-review__forms {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid #E5E7EB;
}

.employer-goal-review__forms-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.employer-goal-review__forms-head > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.employer-goal-review__forms-head h3 {
  color: #0A0A0A !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 21px !important;
}

.employer-goal-review__selection {
  color: #6B7280;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  text-align: right;
}

.employer-goal-review__form-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.employer-goal-review__form {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #FFFFFF;
  color: #0A0A0A;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
}

.employer-goal-review__form:hover {
  border-color: #0A0A0A;
}

.employer-goal-review__form.is-selected {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #C5F154;
}

.employer-goal-review__forms-empty {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border: 1px dashed #D8CFB8;
  border-radius: 12px;
  background: #F5F1E8;
}

.employer-goal-review__forms-empty strong {
  color: #0A0A0A;
  font-size: 14px;
  font-weight: 600;
}

.employer-goal-review__forms-empty span {
  color: #6B7280;
  font-size: 12px;
  line-height: 18px;
}

.employer-goal-review__form-pagination {
  display: flex;
  justify-content: flex-end;
}

.employer-goal-review__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
}

.employer-goal-review button.dash-goals__cta {
  border: 0;
}

.employer-goal-review__notice {
  min-height: 18px;
  color: #6B7280 !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 14px !important;
  text-transform: uppercase !important;
}

.employer-goal-review__context {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.employer-goal-review__goal-card {
  gap: 22px;
}

.employer-goal-review__facts {
  margin-top: 2px;
}

.employer-goal-review__milestones {
  gap: 18px;
}

.dash-goals .employer-goal-review__milestone-table {
  min-width: 0;
  table-layout: fixed;
}

.dash-goals .employer-goal-review__milestone-table th:nth-child(1) {
  width: 26%;
}

.dash-goals .employer-goal-review__milestone-table th:nth-child(2) {
  width: 20%;
}

.dash-goals .employer-goal-review__milestone-table th:nth-child(3) {
  width: 54%;
}

.dash-goals .employer-goal-review__milestone-table tbody td:last-child {
  text-align: left;
  white-space: normal;
}

.employer-goal-review__milestone-table .employer-goal-flow__cell-copy {
  max-width: none;
  overflow-wrap: anywhere;
}

.employer-goal-review__empty {
  padding: 26px;
}

.employer-goal-review__dialog,
.employer-goal-review__loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 10, .58);
}

.employer-goal-review__dialog[hidden],
.employer-goal-review__loading[hidden] {
  display: none !important;
}

.employer-goal-review__dialog-card,
.employer-goal-review__loading-card {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 460px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 30px;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  background: #FFFFFF;
}

.employer-goal-review__dialog-card h2 {
  color: #0A0A0A !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
}

.employer-goal-review__dialog-card p,
.employer-goal-review__loading-card p {
  color: #6B7280 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.employer-goal-review__dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0A0A0A;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.employer-goal-review__dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #C5F154;
  color: #0A0A0A;
  font-size: 20px;
  font-weight: 800;
}

.employer-goal-review__loading-card {
  align-items: center;
  max-width: 390px;
  text-align: center;
}

.employer-goal-review__loading-card strong {
  color: #0A0A0A;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.employer-goal-review__spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #E5E7EB;
  border-top-color: #0A0A0A;
  border-radius: 999px;
  animation: employer-goal-review-spin .8s linear infinite;
}

@keyframes employer-goal-review-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1080px) {
  .employer-goal-detail__overview-grid,
  .employer-goal-review__layout {
    grid-template-columns: 1fr;
  }

  .employer-goal-review__setup {
    position: static;
  }
}

@media (max-width: 720px) {
  .employer-goal-detail,
  .employer-goal-review {
    padding: 18px 14px 40px;
  }

  .employer-goal-flow__head .dash-goals__cta {
    justify-content: center;
    width: 100%;
  }

  .employer-goal-flow__facts,
  .employer-goal-review__form-list {
    grid-template-columns: 1fr;
  }

  .employer-goal-flow__fact--wide {
    grid-column: auto;
  }

  .employer-goal-detail__progress {
    min-height: 300px;
  }

  .employer-goal-review__forms-head,
  .employer-goal-review__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .employer-goal-review__selection {
    text-align: left;
  }

  .employer-goal-review__continue {
    justify-content: center;
    width: 100%;
  }

  .employer-goal-flow__table-wrap {
    overflow: visible;
  }

  .dash-goals .employer-goal-flow__table,
  .dash-goals .employer-goal-flow__table tbody,
  .dash-goals .employer-goal-flow__table tr,
  .dash-goals .employer-goal-flow__table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .dash-goals .employer-goal-flow__table thead {
    display: none;
  }

  .dash-goals .employer-goal-flow__table tbody tr {
    padding: 16px 0;
    border-bottom: 1px solid #E5E7EB;
  }

  .dash-goals .employer-goal-flow__table tbody tr:first-child {
    padding-top: 0;
  }

  .dash-goals .employer-goal-flow__table tbody tr:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .dash-goals .employer-goal-flow__table tbody td,
  .dash-goals .employer-goal-flow__table tbody td:last-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }

  .dash-goals .employer-goal-flow__table tbody td::before {
    content: attr(data-label);
    flex: 0 0 92px;
    color: #9CA3AF;
    font-family: "Roboto Mono", "Roboto", monospace !important;
    font-size: 9px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
  }

  .employer-goal-flow__cell-copy {
    max-width: 210px;
    text-align: right;
  }

  .employer-goal-flow__pagination {
    align-items: flex-start;
    gap: 12px;
  }

  .employer-goal-review__dialog-card,
  .employer-goal-review__loading-card {
    padding: 26px 22px;
  }
}

/* ============================================================
   Employer Performance Improvement Plans
   Current dashboard shell and cream empty-state pattern shared with Goals.
   ============================================================ */
.dash-pip {
  --pip-brand: #C5F154;
  --pip-ink: #0A0A0A;
  --pip-cream: #F5F1E8;
  --pip-cream-line: #D8CFB8;
  --pip-text: #4B5563;
  --pip-muted: #6B7280;
  --pip-disabled: #9CA3AF;
  --pip-border: #E5E7EB;

  display: flex;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto !important;
  padding: 32px 32px 64px;
  flex-direction: column;
  gap: 22px;
  color: var(--pip-ink);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
}

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

.dash-pip > *,
.dash-pip section,
.dash-pip header,
.dash-pip footer,
.dash-pip h1,
.dash-pip h2,
.dash-pip p,
.dash-pip ol,
.dash-pip ul {
  margin: 0 !important;
}

.dash-pip__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 0 10px;
}

.dash-pip__head-copy {
  display: flex;
  max-width: 880px;
  flex-direction: column;
  gap: 10px;
}

.dash-pip__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.dash-pip__chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--pip-ink);
  color: var(--pip-brand);
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dash-pip__chip-meta,
.dash-pip__section-label,
.dash-pip__metric > span,
.dash-pip__empty-copy > small,
.dash-pip__no-results > span:last-child > small,
.dash-pip__guide-copy > span {
  color: var(--pip-disabled);
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dash-pip__head h1 {
  color: var(--pip-ink) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 46px !important;
  letter-spacing: -.04em !important;
}

.dash-pip__head p {
  max-width: 760px;
  color: var(--pip-text) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
}

.dash-pip__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dash-pip__metric {
  display: flex;
  min-height: 136px;
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--pip-border);
  border-radius: 16px;
  background: #FFFFFF;
  flex-direction: column;
}

.dash-pip__metric > span {
  color: var(--pip-muted);
}

.dash-pip__metric strong {
  margin-top: auto;
  color: var(--pip-ink);
  font-size: 40px;
  font-weight: 800;
  line-height: 42px;
  letter-spacing: -.04em;
}

.dash-pip__metric small {
  margin-top: 5px;
  color: var(--pip-disabled);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.dash-pip__panel {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--pip-border);
  border-radius: 18px;
  background: #FFFFFF;
  flex-direction: column;
}

.dash-pip__panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--pip-border);
}

.dash-pip__panel-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.dash-pip__panel-head h2 {
  color: var(--pip-ink) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  letter-spacing: -.02em !important;
}

.dash-pip__panel-head p {
  color: var(--pip-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

.dash-pip__search {
  position: relative;
  display: block;
  width: min(320px, 100%);
  flex: 0 0 auto;
}

.dash-pip__search svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--pip-disabled);
  transform: translateY(-50%);
  pointer-events: none;
}

.dash-pip__search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--pip-border);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--pip-ink);
  font-family: "Roboto", sans-serif !important;
  font-size: 13px;
  outline: none;
}

.dash-pip__search input:focus {
  border-color: var(--pip-ink);
  box-shadow: 0 0 0 3px rgba(197, 241, 84, .22);
}

.dash-pip__table-wrap {
  width: 100%;
  padding: 0 26px;
  overflow-x: auto;
}

.dash-pip__table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: auto;
}

.dash-pip__table thead th {
  padding: 16px 16px 13px 0;
  border-bottom: 1px solid var(--pip-border);
  background: transparent;
  color: var(--pip-disabled);
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

.dash-pip__table thead th:last-child {
  padding-right: 0;
  text-align: right;
}

.dash-pip__table tbody td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--pip-border);
  vertical-align: middle;
}

.dash-pip__table tbody td:last-child {
  padding-right: 0;
}

.dash-pip__table tbody tr:last-child td {
  border-bottom: 0;
}

.dash-pip__table tr[hidden],
.dash-pip [hidden] {
  display: none !important;
}

.dash-pip__employee {
  display: flex;
  min-width: 220px;
  align-items: center;
  gap: 12px;
}

.dash-pip__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #F0EBDC;
  border-radius: 50%;
  background: var(--pip-cream);
  color: var(--pip-ink);
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
}

.dash-pip__employee-copy,
.dash-pip__plan-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.dash-pip__employee-copy strong,
.dash-pip__plan-copy strong {
  color: var(--pip-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}

.dash-pip__employee-copy small,
.dash-pip__plan-copy small {
  color: var(--pip-disabled);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.dash-pip__plan-copy {
  max-width: 300px;
}

.dash-pip__frequency {
  color: var(--pip-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-transform: capitalize;
}

.dash-pip__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--pip-border);
  border-radius: 999px;
  color: var(--pip-muted);
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dash-pip__status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pip-disabled);
}

.dash-pip__status.is-active {
  border-color: var(--pip-ink);
  background: var(--pip-ink);
  color: var(--pip-brand);
}

.dash-pip__status.is-active > span,
.dash-pip__status.is-complete > span {
  background: var(--pip-brand);
}

.dash-pip__status.is-extended {
  border-color: #F0E1A4;
  background: #FFF8D6;
  color: #8A6410;
}

.dash-pip__status.is-extended > span {
  background: #D5A61F;
}

.dash-pip__status.is-complete {
  border-color: #E3EAD3;
  background: #F4F9E8;
  color: #426218;
}

.dash-pip__status.is-closed {
  border-color: #F1D1D1;
  background: #FFF0F0;
  color: #9F3333;
}

.dash-pip__status.is-closed > span {
  background: #D45C5C;
}

.dash-pip__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.dash-pip__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--pip-border);
  border-radius: 9px;
  background: #FFFFFF;
  color: var(--pip-ink) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: none !important;
}

.dash-pip__action:hover {
  border-color: var(--pip-ink);
}

.dash-pip__action--primary {
  border-color: var(--pip-ink);
  background: var(--pip-ink);
  color: var(--pip-brand) !important;
}

.dash-pip__panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 26px;
  border-top: 1px solid var(--pip-border);
}

.dash-pip__panel-footer > span {
  color: var(--pip-muted);
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dash-pip__pagination {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  list-style: none;
}

.dash-pip__pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--pip-border);
  border-radius: 9px;
  background: #FFFFFF;
  color: var(--pip-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dash-pip__pagination button.is-active {
  border-color: var(--pip-ink);
  background: var(--pip-ink);
  color: var(--pip-brand);
}

.dash-pip__empty,
.dash-pip__no-results {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 24px !important;
  padding: 32px 28px;
  border: 1px dashed var(--pip-cream-line);
  border-radius: 14px;
  background: var(--pip-cream);
}

.dash-pip__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border: 1px solid var(--pip-border);
  border-radius: 18px;
  background: #FFFFFF;
  color: var(--pip-ink);
}

.dash-pip__empty-copy,
.dash-pip__no-results > span:last-child {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
}

.dash-pip__empty-copy > strong,
.dash-pip__no-results > span:last-child > strong {
  color: var(--pip-ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 27px;
}

.dash-pip__empty-copy > p,
.dash-pip__no-results > span:last-child > p {
  max-width: 600px;
  color: var(--pip-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.dash-pip__empty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--pip-ink);
  color: var(--pip-brand) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none !important;
  white-space: nowrap;
}

.dash-pip__guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr);
  overflow: hidden;
  border-radius: 18px;
  background: var(--pip-ink);
  color: #FFFFFF;
}

.dash-pip__guide-copy {
  display: flex;
  padding: 36px;
  flex-direction: column;
  gap: 12px;
}

.dash-pip__guide-copy > span {
  color: var(--pip-brand);
}

.dash-pip__guide-copy h2 {
  max-width: 540px;
  color: #FFFFFF !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  letter-spacing: -.03em !important;
}

.dash-pip__guide-copy p {
  max-width: 600px;
  color: #AEB4BE !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.dash-pip__steps {
  display: flex;
  padding: 30px 34px;
  border-left: 1px solid #2B2B2B;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  list-style: none;
}

.dash-pip__steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
}

.dash-pip__steps li > span {
  color: var(--pip-brand);
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
}

.dash-pip__steps li > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dash-pip__steps strong {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.dash-pip__steps small {
  color: #9CA3AF;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

@media (max-width: 1120px) {
  .dash-pip__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-pip__guide {
    grid-template-columns: 1fr;
  }

  .dash-pip__steps {
    border-top: 1px solid #2B2B2B;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .dash-pip {
    padding: 20px 14px 44px;
  }

  .dash-pip__head h1 {
    font-size: 32px !important;
    line-height: 37px !important;
  }

  .dash-pip__head p {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .dash-pip__metrics {
    grid-template-columns: 1fr;
  }

  .dash-pip__metric {
    min-height: 116px;
  }

  .dash-pip__panel-head,
  .dash-pip__panel-footer,
  .dash-pip__empty,
  .dash-pip__no-results {
    align-items: flex-start;
    flex-direction: column;
  }

  .dash-pip__search {
    width: 100%;
  }

  .dash-pip__table-wrap {
    padding: 0 20px;
    overflow: visible;
  }

  .dash-pip__table,
  .dash-pip__table tbody,
  .dash-pip__table tr,
  .dash-pip__table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .dash-pip__table thead {
    display: none;
  }

  .dash-pip__table tbody tr {
    padding: 18px 0;
    border-bottom: 1px solid var(--pip-border);
  }

  .dash-pip__table tbody tr:last-child {
    border-bottom: 0;
  }

  .dash-pip__table tbody td,
  .dash-pip__table tbody td:last-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 7px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }

  .dash-pip__table tbody td::before {
    content: attr(data-label);
    flex: 0 0 82px;
    color: var(--pip-disabled);
    font-family: "Roboto Mono", "Roboto", monospace !important;
    font-size: 9px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
  }

  .dash-pip__employee,
  .dash-pip__plan-copy {
    min-width: 0;
    max-width: 210px;
    text-align: right;
  }

  .dash-pip__employee {
    justify-content: flex-end;
  }

  .dash-pip__employee-copy {
    align-items: flex-end;
  }

  .dash-pip__actions {
    max-width: 210px;
    flex-wrap: wrap;
  }

  .dash-pip__empty,
  .dash-pip__no-results {
    margin: 20px !important;
    padding: 26px 22px;
  }

  .dash-pip__empty-action {
    width: 100%;
    white-space: normal;
  }

  .dash-pip__guide-copy,
  .dash-pip__steps {
    padding: 28px 24px;
  }
}

/* ============================================================
   .dash-review — Goal-based performance review builder
   (goalBasedPerformanceReview.ejs, /aigoalQuestionnaire)
   M8, 2026-07-31.

   This screen is a live form BUILDER: its JS adds, removes, previews and
   serialises fields, and generates EJS from the result. So the legacy markup
   (.profile-card / .form-group / .field / .row / .col-md-*) is restyled IN
   PLACE rather than rewritten — every id, class and handler the builder relies
   on survives untouched. Replaces a 49-line inline <style> block that redefined
   Bootstrap's .form-group globally.
   ============================================================ */

.dash-review {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --border-soft: #F0EBDC;

  padding: 8px 28px 64px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-review, .dash-review *, .dash-review *::before, .dash-review *::after { box-sizing: border-box; }

/* Cards ------------------------------------------------------- */
.dash-review .profile-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: none;
}
.dash-review > .profile-card { padding: 24px 28px; }
.dash-review .left-panel.profile-card,
.dash-review .right-panel.profile-card { padding: 24px; height: 100%; }

/* Page header ------------------------------------------------- */
.dash-review .goals-nav .breadcrumbs { display: flex; margin: 0 !important; padding: 0 !important; list-style: none; }
.dash-review .goals-nav h2 {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  line-height: 34px !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}
.dash-review .subscription-container h4,
.dash-review .milestones h2,
.dash-review .goal-insight h5 {
  margin: 0 0 14px !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.dash-review .goal-insight h4 {
  margin: 0 0 8px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 27px !important;
  color: var(--ink) !important;
}
.dash-review .goal-insight .description {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-soft) !important;
}

/* Builder fields. `.form-group` is SCOPED here — the inline block set these
   properties globally and reached the chrome's form groups too. */
.dash-review .form-group {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dash-review .field {
  width: 100%;
  margin: 10px 0;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.dash-review .field-label input { width: calc(100% - 50px); }
.dash-review input.form-control,
.dash-review select.form-control,
.dash-review textarea.form-control {
  height: auto;
  min-height: 44px;
  padding: 11px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.dash-review textarea.form-control { min-height: 88px; }
.dash-review input.form-control::placeholder,
.dash-review textarea.form-control::placeholder { color: var(--text-disabled) !important; }
.dash-review input.form-control:focus,
.dash-review select.form-control:focus,
.dash-review textarea.form-control:focus { border-color: var(--ink) !important; outline: none; }

/* Remove-field control. Was #e74c3c — off-palette; the reskin has one red. */
.dash-review .remove-field {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: transparent;
  color: #DC2626;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.dash-review .remove-field:hover { background: var(--cream); }

/* Buttons ----------------------------------------------------- */
.dash-review .btn.small_btn,
.dash-review button.small_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 16px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.dash-review .btn.small_btn:hover,
.dash-review button.small_btn:hover { background: var(--cream) !important; border-color: var(--ink) !important; }
.dash-review .action_buttons { gap: 10px; margin-top: 18px; }
.dash-review #preview-form.btn,
.dash-review #save-form.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.dash-review #preview-form.btn {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}
.dash-review #preview-form.btn:hover { background: var(--cream) !important; border-color: var(--ink) !important; }
.dash-review #save-form.btn {
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  color: var(--brand) !important;
}
.dash-review #save-form.btn:hover { background: #1A1A1A !important; }
/* The category chip is a <button> but is not an action — read-only. */
.dash-review .goal-insight button.small_btn {
  min-height: 0;
  padding: 4px 10px !important;
  background: var(--cream-2) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: default;
}

/* Goal meta tiles --------------------------------------------- */
.dash-review .goal-info .profile-card,
.dash-review .summary-sec.profile-card {
  padding: 14px 16px;
  background: var(--cream);
  border: 0;
  border-radius: 12px;
}
.dash-review .goal-info h6,
.dash-review .summary-sec h5 {
  margin: 0 0 4px !important;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.dash-review .goal-info .title.small,
.dash-review .summary-sec .text {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
}
.dash-review__role { color: var(--text-muted); font-weight: 400; }
.dash-review .summary-sec a { color: var(--ink); text-decoration: underline; }

/* Milestones table -------------------------------------------- */
.dash-review .milestones table { width: 100%; border-collapse: collapse; }
.dash-review .milestones thead th {
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--border);
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  text-align: left;
}
.dash-review .milestones tbody td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--ink) !important;
  vertical-align: top;
}
.dash-review .milestones tbody td.desc { color: var(--text-soft) !important; }
.dash-review .milestones tbody tr:last-child td { border-bottom: 0; }

/* Status pill — 2-state monochrome, same shape as the goals layer. */
.dash-review .dash-review__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  background: transparent;
  color: var(--text-muted) !important;
  border: 1px solid var(--border);
}
.dash-review .dash-review__status-dot {
  width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--text-disabled);
}
.dash-review .dash-review__status--done {
  background: var(--ink);
  color: var(--brand) !important;
  border-color: var(--ink);
}
.dash-review .dash-review__status--done .dash-review__status-dot { background: var(--brand); }

/* Rating widget in the builder + preview. Scoped (the inline block styled
   `.rating` globally). Blank previews, so the empty .ink-score meter. */
.dash-review .rating { display: inline-flex; align-items: center; gap: 4px; }
.dash-review .rating input[name="star"] { display: none; width: 0; opacity: 0; margin-left: -2px; }
.dash-review .rating span label { float: none; cursor: pointer; }
.dash-review .rating span label.half { overflow: hidden; position: absolute; width: 20px; }

/* Preview modal ----------------------------------------------- */
.dash-review + #modal .modal-content,
#modal .modal-content { border-radius: 18px; }

@media (max-width: 991px) {
  .dash-review { padding: 8px 16px 48px; }
  .dash-review .left-panel.profile-card { margin-bottom: 16px; }
}

/* Goal panel empty state — the page is reachable without a goal in session
   (only the OpenAI step sets req.session.goalID), and used to 500 there. */
.dash-review .dash-review__nogoal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: var(--cream);
  border-radius: 14px;
}
.dash-review .dash-review__nogoal-eyebrow {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.dash-review .dash-review__nogoal-title {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 24px !important;
  color: var(--ink) !important;
}
.dash-review .dash-review__nogoal-copy {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--text-soft) !important;
}

/* ── .dash-review: the BUILDER's generated fields (2026-07-31) ─────────────
   addTextField / addDropdown / addCheckbox / addRating build their markup in
   JS, so none of it was covered by the static-markup pass. Styled here rather
   than by editing the generators: the builder also READS this DOM back when
   serialising and previewing (`.field-label input`, `.options`, `.rating`,
   `.dropdown-option`…), so leaving the structure untouched is the safe route. */

/* Option rows. The inputs carried no .form-control, so they rendered as raw
   browser boxes wedged together inside a `.options.d-flex` with no gap. */
.dash-review .field .options {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.dash-review .field .dropdown-option,
.dash-review .field .checkbox-option {
  flex: 0 1 auto;
  min-width: 150px;
  height: 40px;
  padding: 0 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.dash-review .field .dropdown-option::placeholder,
.dash-review .field .checkbox-option::placeholder { color: var(--text-disabled); }
.dash-review .field .dropdown-option:focus,
.dash-review .field .checkbox-option:focus { border-color: var(--ink); outline: none; }

/* "Add Option" was a bare <span> that looked like stray text. */
.dash-review .field .add-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.dash-review .field .add-option:hover { background: var(--cream); border-color: var(--ink); }
.dash-review .field .add-option::before { content: "+"; font-weight: 700; }
/* The generator emits the options BEFORE the Add Option span on dropdowns and
   AFTER it on checkboxes; order it consistently either way. */
.dash-review .field { display: flex; flex-direction: column; align-items: stretch; }
.dash-review .field .field-label.form-group { order: 0; margin-bottom: 0; }
.dash-review .field .options { order: 1; }
.dash-review .field .add-option { order: 2; align-self: flex-start; }
.dash-review .field .rating { order: 1; }
.dash-review .field > select.d-none,
.dash-review .field > input.d-none { display: none !important; }

/* ── Rating: SEGMENTED 1-5 ────────────────────────────────────────────────
   Stars are retired app-wide per the user, 2026-07-31. This is the
   "Perf Scale v2 — A · Segmented 1-5" component from the Paper design system,
   transcribed from the board rather than eyeballed: 44x40 segments, r8, gap 8;
   FILLED = #0A0A0A fill + #C5F154 label, Roboto Mono 600 14/18;
   EMPTY  = #FFFFFF fill + #E5E7EB border + #9CA3AF label, Roboto Mono 500;
   legend Roboto Mono 500 10/12, ls .1em, uppercase, #9CA3AF.
   Fill is CUMULATIVE — choosing 4 fills 1..4 — so the row reads as a meter. */
.dash-review .dash-review__scale {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  margin: 4px 0 0;
}
.dash-review .dash-review__scale-legend {
  display: flex;
  justify-content: space-between;
  width: 252px;
  padding-bottom: 10px;
}
.dash-review .dash-review__scale-legend span {
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9CA3AF;
}
.dash-review .dash-review__scale-row { display: flex; gap: 8px; }
.dash-review button.dash-review__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 40px;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #9CA3AF;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.dash-review button.dash-review__seg:hover { border-color: #0A0A0A; color: #0A0A0A; }
.dash-review button.dash-review__seg.is-on {
  background: #0A0A0A;
  border-color: #0A0A0A;
  font-weight: 600;
  color: #C5F154;
}
@media (max-width: 767px) {
  .dash-review .dash-review__scale { align-items: flex-start; }
  .dash-review .dash-review__scale-row { flex-wrap: wrap; }
}

/* ── Centred cards vs the per-layer type reset (2026-07-31) ────────────────
   Every .dash-* layer carries a reset of the shape

     .dash-<layer> h1,…,h6, p, ul, li { … text-align: left !important; … }

   A card that centres its contents does so with `text-align: center` on the
   CARD, which its children INHERIT — and inheritance loses to any direct
   declaration, let alone an !important one. So headings and paragraphs inside
   centred cards silently render left.

   It shows up specifically on the PARAGRAPH: these cards are also
   `align-items: center`, so a short heading shrink-wraps and still looks
   centred, while the longer body text fills the width and exposes the
   left alignment. That is exactly how it was reported on the save-template
   modal. (`.dash-teamboard .teams-grid__empty p` was already patched the same
   way by whoever hit this before — this generalises the fix.) */
.dash-customreview .cr-success__card h3,
.dash-customreview .cr-success__card p,
.dash-goalform .css-only-modal .modal_header h5,
.dash-goalform .css-only-modal .modal_header p {
  text-align: center !important;
}

/* ============================================================
   .ink-scale — segmented 1-5 rating (design.md §11.9)
   Standalone on purpose: the GENERATED review forms
   (views/customReviewForm-*.ejs) use it and sit inside legacy markup with no
   .dash-* wrapper, so it must not depend on an ancestor layer. Paired with
   /js/ink-scale.js. Replaces `<input class="rating-loading">` (Krajee stars),
   which rendered as nothing whenever the plugin failed to load.
   ============================================================ */
.ink-scale {
  /* BLOCK-level flex: inside the generated review forms this control follows
     an inline <label>, and as inline-flex it flowed onto the same line — so
     every scale started at a different x, offset by its label's width, and a
     long label pushed its scale onto the next line. Block-level puts each
     scale on its own line, sharing one left edge. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-top: 6px;
}
.ink-scale, .ink-scale * { box-sizing: border-box; }
.ink-scale__legend {
  display: flex; justify-content: space-between; width: 252px; padding-bottom: 10px;
}
.ink-scale__legend span {
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500; font-size: 10px; line-height: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9CA3AF;
}
.ink-scale__row { display: flex; align-items: center; gap: 8px; }
.ink-scale__seg {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 44px; height: 40px; padding: 0;
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px;
  font-family: "Roboto Mono", "Roboto", monospace;
  font-weight: 500; font-size: 14px; line-height: 18px; color: #9CA3AF;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ink-scale__seg:hover { border-color: #0A0A0A; color: #0A0A0A; }
.ink-scale__seg.is-on {
  background: #0A0A0A; border-color: #0A0A0A; font-weight: 600; color: #C5F154;
}
/* Read-only rendering (a saved template previewed inside <fieldset disabled>). */
.ink-scale[data-readonly="true"] .ink-scale__seg { cursor: default; }
.ink-scale[data-readonly="true"] .ink-scale__seg:hover { border-color: #E5E7EB; color: #9CA3AF; }
.ink-scale[data-readonly="true"] .ink-scale__seg.is-on:hover { border-color: #0A0A0A; color: #C5F154; }
@media (max-width: 767px) {
  .ink-scale__row { flex-wrap: wrap; }
  .ink-scale__legend { width: auto; gap: 24px; }
}

/* ── .ink-scale inside the GENERATED review forms (2026-07-31) ─────────────
   The generated row is

     <div class="form_fields ratings"><div class="form-group row"><div class="col-sm-4">
       <label>Time Management</label> <div class="ink-scale">…</div>

   `.ink-scale` was inline-flex, so it flowed straight after the inline <label>.
   Every scale then started at a DIFFERENT x — offset by that row's label width
   — and a long label ("Creativity and Innovation") pushed its scale onto the
   next line entirely. Making the scale a block-level flex container puts it on
   its own line, so all of them share one left edge.

   Everything below is anchored on .ink-scale (our own class) or guarded by
   :has(), so no legacy screen that still uses these generic Bootstrap classes
   is touched — and where :has() is unsupported the rule is simply dropped. */

/* The rating cell is col-sm-4 (33%); the control needs 252px and the label sits
   above it, so let the cell run full width like every other field on the form. */
.form-group.row:has(> .col-sm-4 > .ink-scale) { margin-left: 0; margin-right: 0; }
.col-sm-4:has(> .ink-scale) {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.col-sm-4:has(> .ink-scale) > label {
  display: block;
  margin: 0 0 2px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #0A0A0A;
}
.form_fields.ratings:has(.ink-scale) { margin-bottom: 18px; }

/* Checkbox rows in the same generated forms: `col-sm-1` + `col-sm-11` threw the
   box and its label to opposite ends of the row. Pull them together. */
.form-group.row:has(> .col-sm-1 > input.check-box) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.form-group.row:has(> .col-sm-1 > input.check-box) > .col-sm-1,
.form-group.row:has(> .col-sm-1 > input.check-box) > .col-sm-11 {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
.form-group.row:has(> .col-sm-1 > input.check-box) > .col-sm-11 > label {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #0A0A0A;
}

/* ============================================================
   .dash-form__select — the select primitive the .dash-form layer
   was missing. achievement1Test.ejs had invented it locally inside
   its own inline <style>; when that inline block moved out, the class
   needed a real home. Added here with the input/textarea siblings
   (M7, 2026-08-03).

   SPECIFICITY IS DELIBERATE — (0,2,0), NOT (0,2,1).
   addNewProjectStep1Test.ejs and addNewProjectStep2Test.ejs also use
   .dash-form__select and style it themselves, in their own in-view
   <style>, at `.project-create .dash-form__select` = (0,2,0). Writing
   this rule as `.dash-form select.dash-form__select` would score
   (0,2,1) and silently outrank them, changing two screens nobody asked
   us to touch (their border is #D9DEE8, and they keep the native
   dropdown arrow rather than the chevron below). Matching their
   specificity lets source order decide instead — an in-view <style>
   in the body comes after this linked sheet, so those two screens keep
   exactly the look they have today, and screens with no competing rule
   get the primitive.
   ============================================================ */
.dash-form .dash-form__select {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  padding: 12px 40px 12px 14px !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236B7280' d='M5 6L0 0h10z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 10px 6px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}
.dash-form .dash-form__select:focus { border-color: var(--ink) !important; }
.dash-form .dash-form__select:disabled {
  background-color: var(--bg-subtle) !important;
  color: var(--text-disabled) !important;
}

/* ============================================================
   .dash-achcreate — the two-step "create achievement" flow
   (achievement1Test.ejs = step 1, achievement2Test.ejs = step 2)

   ONE layer for BOTH steps on purpose. Before M7 each step carried
   its own inline <style> (167 and 222 lines) and they had drifted
   into two different visual languages — different green, different
   near-black, different borders, different heading scale. Sits on
   top of .dash-form, so all the field primitives come for free.
   ============================================================ */

/* .dash-form is itself a white card. Here the SECTIONS are the cards,
   so the outer one is neutralised rather than nested card-in-card. */
.dash-form.dash-achcreate {
  width: min(calc(100% - 48px), 980px);
  max-width: 980px;
  /* Explicit page rhythm also overrides the legacy global
     `section { margin: 20px }` rule from style-test.css. */
  margin: 24px auto 56px;
  gap: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#page-content-wrapper:has(> .dash-achcreate) {
  box-sizing: border-box;
  min-width: 0;
  background: #FAFAF7;
}

.dash-achcreate .dash-form__fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.dash-achcreate__progress {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.dash-achcreate__progress-meta {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dash-achcreate__section {
  width: 100%;
  margin: 0 !important;
  padding: 32px 36px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.dash-achcreate__section-head { margin-bottom: 24px; }

.dash-achcreate__kicker {
  display: block;
  align-items: center;
  min-height: 14px;
  margin-bottom: 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-disabled);
}

.dash-achcreate h2.dash-achcreate__section-title,
.dash-achcreate h3.dash-achcreate__section-title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}

.dash-achcreate p.dash-achcreate__section-copy {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 620px;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
}

.dash-achcreate__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
}
.dash-achcreate__span-2 { grid-column: 1 / -1; }

/* Hidden reviewer-type variants (step 2). [hidden] loses to the grid's
   display, so it is restated. */
.dash-achcreate__grid > [hidden] { display: none; }

/* Upload previews (step 1) ---------------------------------- */
.dash-achcreate__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.dash-achcreate__previews img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Rating cards (step 1) ------------------------------------- */
.dash-achcreate__ratings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}
.dash-achcreate__rating {
  padding: 18px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.dash-achcreate .dash-achcreate__rating-label,
.dash-achcreate label.dash-achcreate__rating-label {
  display: block;
  margin: 0 0 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--text-soft) !important;
}
/* .ink-scale is standalone by design; it only needs its top gap removed
   here because the label above already supplies the spacing. */
.dash-achcreate__rating .ink-scale { margin-top: 0; }

/* Incomplete-ratings notice (step 1) ------------------------
   Hidden until the submit handler adds .is-shown. Was a soft-tint
   alert (#FEF2F2 / #FECACA / #991B1B) — the banned tint pattern plus
   three off-palette colours. Now the standard .dash-form__notice
   surface with a SOLID reskin-red chip. */
.dash-achcreate .dash-achcreate__error { display: none; margin-top: 18px; }
.dash-achcreate .dash-achcreate__error.is-shown { display: flex; }
.dash-achcreate .dash-achcreate__error-chip {
  background: #DC2626;
  color: #FFFFFF;
}

.dash-achcreate .dash-form__upload-btn,
.dash-achcreate .dash-form__btn { border-radius: 10px; }

.dash-billing-gate {
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:24px 26px;
  border:1px dashed #D8CFB8;
  border-radius:18px;
  background:#F5F1E8;
}
.dash-billing-gate__head { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:16px; }
.dash-billing-gate__chip { display:inline-flex; padding:5px 8px; border-radius:5px; background:#0A0A0A; color:#C5F154; font:700 9px/12px "Roboto Mono",monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.dash-billing-gate h2 { margin:0 0 6px; color:#0A0A0A; font-size:20px; line-height:26px; font-weight:800; }
.dash-billing-gate p { margin:0; max-width:680px; color:#4B5563; font-size:13px; line-height:20px; }
.dash-billing-gate__facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border:1px solid #E5E7EB; border-radius:12px; background:#fff; }
.dash-billing-gate__facts > div { padding:14px 16px; border-right:1px solid #E5E7EB; }
.dash-billing-gate__facts > div:last-child { border-right:0; }
.dash-billing-gate__facts dt { color:#9CA3AF; font:700 9px/12px "Roboto Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.dash-billing-gate__facts dd { margin:5px 0 0; color:#0A0A0A; font-size:20px; line-height:24px; font-weight:800; }
.dash-billing-gate__actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.dash-billing-gate__actions .dash-form__btn { width:auto; }

@media (max-width: 900px) {
  #page-content-wrapper:has(> .dash-achcreate) {
    padding-right: 0;
    padding-left: 0;
  }
  .dash-form.dash-achcreate {
    width: calc(100% - 32px);
    margin: 20px auto 40px;
  }
  .dash-achcreate__grid,
  .dash-achcreate__ratings { grid-template-columns: 1fr; }
  .dash-achcreate__progress { padding: 24px 18px; }
  .dash-achcreate__section { padding: 26px 20px; }
  .dash-billing-gate { padding:22px 20px; }
}
@media (max-width: 520px) {
  .dash-billing-gate__head { grid-template-columns:1fr; }
  .dash-billing-gate__facts { grid-template-columns:1fr; }
  .dash-billing-gate__facts > div { border-right:0; border-bottom:1px solid #E5E7EB; }
  .dash-billing-gate__facts > div:last-child { border-bottom:0; }
  .dash-billing-gate__actions { align-items:stretch; flex-direction:column; }
  .dash-billing-gate__actions .dash-form__btn { width:100%; }
}

/* ============================================================
   .dash-expert — ONE shared layer for BOTH expert accounts
   (Industry Expert + Academic Expert).

   The two accounts are twins: Academic Expert = Industry Expert
   minus the Projects branch, and every shared screen is
   field-identical. So they get one layer, not two, which is what
   stops them drifting apart again (they already had: the IE views
   were migrated by another dev into an in-view `.expert-dashboard`
   stylesheet while the AE views stayed on the 2019 markup).

   Superseded on adoption: the ~500-line inline <style> block in
   each views/industry-expert-*Test.ejs, and `.expert-dashboard__*`
   / `.ie-*` / `.expert-profile-page__*` / `.expert-settings__*` /
   `.industry-notification*` class families.

   Spec: design.md §11. Rating uses the segmented 1-5 scale (§11.9)
   for input and the .ink-score meter for read-only display —
   NO STARS anywhere.
   ============================================================ */

.dash-expert {
  --brand: #C5F154;
  --brand-hover: #B8E83C;
  --ink: #0A0A0A;
  --ink-hover: #1A1A1A;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --border: #E5E7EB;
  --hairline: #F0EBDC;
  --cream: #F5F1E8;
  --cream-2: #F0EBDC;
  --dashed: #D8CFB8;
  --danger: #DC2626;
  --danger-deep: #B91C1C;
  --bg: #FAFAF7;

  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: calc(100vh - 80px);
  padding: 40px 56px 64px;
  background: var(--bg);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.dash-expert,
.dash-expert *,
.dash-expert *::before,
.dash-expert *::after { box-sizing: border-box; }

/* The legacy sheets set a serif-ish stack and odd line-heights on
   bare tags inside .inner_pages; restate them once here so every
   child starts from a known baseline (design.md §11.6). */
.dash-expert h1,
.dash-expert h2,
.dash-expert h3,
.dash-expert h4,
.dash-expert p,
.dash-expert span,
.dash-expert a,
.dash-expert label,
.dash-expert strong {
  font-family: inherit;
  letter-spacing: normal;
}

/* Margin reset is deliberately NOT applied to span/a/strong.
   `.dash-expert span { margin: 0 }` is (0,1,1) and beats any single-class
   component rule (0,1,0), so it silently strips margins that a shared
   component depends on — it knocked `.dash-stepper__line`'s `margin-top:13px`
   off, dropping the connector to the top of the row instead of level with the
   28px node. Only the tags that actually carry a UA or Bootstrap margin are
   reset: headings and <p> (UA), and <label> (Bootstrap's `margin-bottom:.5rem`). */
.dash-expert h1,
.dash-expert h2,
.dash-expert h3,
.dash-expert h4,
.dash-expert p,
.dash-expert label {
  margin: 0;
}
.dash-expert a { text-decoration: none; }
/* Anchors inherit the surrounding text colour — EXCEPT anchor buttons, which
   must keep their own variant colour.
   FIX 2026-08-03 (user-reported: "text on request credits buttons is not
   visible, only on hover"). This rule used to be a flat `.dash-expert a`
   carrying `color: inherit`, i.e. (0,1,1) — which out-ranked every button
   colour rule (0,1,0). So `<a class="dash-expert__btn">` inherited the
   surrounding ink onto its ink fill and vanished, reappearing on :hover only
   because `.dash-expert__btn:hover` is (0,2,0) and wins.
   Excluding buttons HERE is the right fix: restating the colours at a higher
   specificity instead would out-rank the single-class modifiers
   (--lime/--ghost/--back/--danger) and collapse the whole variant system —
   which is exactly what the "button base rule is not out-specified" assertion
   in docs/verify/verify-expert.js exists to prevent. */
.dash-expert a:not([class*="dash-expert__btn"]) { color: inherit; }
.dash-expert a:hover { text-decoration: none; }

/* Centred single-column variant, for the form screens
   (request credits, manage profile, settings, update picture). */
.dash-expert--column { align-items: center; }
.dash-expert__column { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 720px; }
.dash-expert__column--wide { max-width: 800px; }

/* ---- page header ---------------------------------------- */
.dash-expert__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.dash-expert__head-text { display: flex; flex-direction: column; gap: 14px; }
.dash-expert__eyebrow { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.dash-expert__chip {
  padding: 3px 8px;
  background: var(--ink);
  border-radius: 4px;
  color: var(--brand);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dash-expert__crumb {
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-expert__title {
  color: var(--ink);
  font-size: 40px;
  font-weight: 800;
  line-height: 46px;
  letter-spacing: -0.02em;
}
.dash-expert__deck {
  max-width: 470px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

/* ---- header-right stat tile (dark) ----------------------- */
.dash-expert__stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  min-width: 186px;
  padding: 22px 24px;
  background: var(--ink);
  border-radius: 18px;
}
.dash-expert__stat-label {
  color: var(--text-disabled);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-expert__stat-value {
  color: var(--brand);
  font-size: 44px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -0.02em;
}

/* ---- KPI row (white tiles, real numbers only) ------------ */
.dash-expert__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
.dash-expert__kpi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-expert__kpi-label {
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-expert__kpi-value {
  color: var(--ink);
  font-size: 44px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -0.02em;
}

/* ---- card shell ------------------------------------------ */
.dash-expert__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 32px 36px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.dash-expert__card--tight { padding: 24px; }
.dash-expert__card-head { display: flex; flex-direction: column; gap: 6px; }
.dash-expert__kicker {
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-expert__card-title {
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: -0.01em;
}

/* Numbered section header: [01] ---- Label (form screens) */
.dash-expert__section-head { display: flex; flex-direction: row; align-items: center; gap: 18px; width: 100%; }
.dash-expert__section-num {
  color: var(--text-disabled);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.18em;
}
.dash-expert__section-rule { flex: 1 1 auto; height: 1px; background: var(--hairline); }
.dash-expert__section-label { font-size: 14px; font-weight: 600; line-height: 18px; letter-spacing: 0.02em; }

/* ---- two-column detail grid ------------------------------ */
.dash-expert__grid { display: flex; flex-direction: row; align-items: flex-start; gap: 24px; width: 100%; }
.dash-expert__col-main { display: flex; flex-direction: column; gap: 24px; flex: 1 1 auto; min-width: 0; }
.dash-expert__col-side { display: flex; flex-direction: column; gap: 24px; width: 408px; flex-shrink: 0; }
.dash-expert__col-side--narrow { width: 360px; }

/* ---- meta grid: mono label over value -------------------- */
.dash-expert__meta { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--hairline); }
.dash-expert__meta-row { display: flex; flex-direction: row; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.dash-expert__meta-row:last-child { border-bottom: 0; }
.dash-expert__meta-row--stack { flex-direction: column; gap: 4px; }
.dash-expert__meta-cell { display: flex; flex-direction: column; gap: 4px; width: 50%; flex-shrink: 0; padding-right: 16px; }
.dash-expert__meta-label {
  color: var(--text-disabled);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-expert__meta-value { color: var(--ink); font-size: 15px; font-weight: 400; line-height: 20px; }
.dash-expert__meta-value--mono { font-family: "Roboto Mono", "Roboto", monospace; font-size: 13px; letter-spacing: 0.02em; word-break: break-all; }

/* ---- narrative blocks (description / explanation / …) ---- */
.dash-expert__prose { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.dash-expert__prose-block { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.dash-expert__prose-text { color: var(--text-soft); font-size: 13px; font-weight: 400; line-height: 20px; }

/* ---- chips ----------------------------------------------- */
.dash-expert__chips { display: flex; flex-flow: row wrap; gap: 8px; width: 100%; }
.dash-expert__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--cream-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}
.dash-expert__meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--cream-2);
  border-radius: 6px;
  color: var(--ink);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

/* ---- divider used between stacked sections in one card --- */
.dash-expert__rule { width: 100%; padding-top: 18px; border-top: 1px solid var(--hairline); }

/* ---- table card head: title block + search --------------- */
.dash-expert__table-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.dash-expert__search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 300px;
  height: 48px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dash-expert__search svg { flex-shrink: 0; }
/* The input also carries legacy .form-control on the AE views, which
   forces Bebas Neue 22px / ls 2px / #f3fce7 / h70 — restate every one
   of those properties or they leak through (design.md §11.6). */
.dash-expert__search input,
.dash-expert input.dash-expert__search-input {
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  font-family: "Roboto", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 18px;
  letter-spacing: normal !important;
  color: var(--ink);
}
.dash-expert__search input::placeholder { color: var(--text-disabled); font-size: 15px; }

/* ---- data table (jb dialect, design.md §11.4) ------------ */
/* Never keep bootstrap's .table on these: inside
   body.version_2_update_table (the AE views) it inherits a stray
   box-shadow: 1px 1px 5px 5px rgba(0,0,0,.08). Use .dash-expert__table
   alone. */
/* A REAL <table>: DataTables drives search/sort/pagination on these
   screens and needs table markup, so this is the jb dialect
   expressed as th/td padding rather than flex rows. */
.dash-expert__table-wrap { width: 100%; overflow-x: auto; }
.dash-expert__table { width: 100%; border-collapse: collapse; background: transparent; }
.dash-expert__table thead th {
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-expert__table tbody td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
  border-top: 0;
  background: transparent;
  vertical-align: middle;
  color: var(--ink);
  font-size: 14px;
  line-height: 18px;
}
.dash-expert__table tbody tr:last-child td { border-bottom: 0; }
.dash-expert__table th:last-child,
.dash-expert__table td:last-child { padding-right: 0; text-align: right; }
.dash-expert__td--end { display: flex; justify-content: flex-end; }

/* DataTables chrome. The init sets dom so DT's own search box and
   length select are gone (the card header owns search); only info +
   paginate render, restyled to the pager spec. */
.dash-expert .dataTables_wrapper { width: 100%; }
.dash-expert .dataTables_info {
  padding: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
.dash-expert .dash-expert__dt-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding-top: 20px;
}
.dash-expert .dataTables_paginate { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.dash-expert .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-disabled) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 16px;
  cursor: pointer;
}
.dash-expert .dataTables_paginate .paginate_button:hover { background: transparent !important; border-color: var(--ink) !important; color: var(--ink) !important; }
.dash-expert .dataTables_paginate .paginate_button.current,
.dash-expert .dataTables_paginate .paginate_button.current:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--brand) !important;
}
.dash-expert .dataTables_paginate .paginate_button.disabled,
.dash-expert .dataTables_paginate .paginate_button.disabled:hover {
  border-color: var(--border) !important;
  color: var(--text-disabled) !important;
  cursor: default;
}
/* DT's sort arrows are background images on th — drop them; the
   header is a mono micro-label and arrows read as noise there. */
.dash-expert .dash-expert__table thead th.sorting,
.dash-expert .dash-expert__table thead th.sorting_asc,
.dash-expert .dash-expert__table thead th.sorting_desc { background-image: none !important; }
.dash-expert__cell-name { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 18px; }
.dash-expert__cell-sub { display: block; color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 16px; }
.dash-expert__cell-plain { color: var(--text-soft); font-size: 13px; font-weight: 400; line-height: 20px; }
.dash-expert__cell-stack { display: flex; flex-direction: column; gap: 3px; }

/* Avatar: cream circle + initials. There is NO usable default
   avatar image in this repo — testIcons/profile.svg is a stock
   photo of a stranger and noprofile.png is a document glyph. */
.dash-expert__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--cream);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  overflow: hidden;
}
.dash-expert__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-expert__avatar--lg { width: 88px; height: 88px; font-size: 30px; line-height: 34px; font-weight: 800; }
.dash-expert__avatar--md { width: 64px; height: 64px; font-size: 22px; line-height: 26px; font-weight: 800; }
.dash-expert__cell-person { display: flex; flex-direction: row; align-items: center; gap: 12px; }

/* ---- status pill: 2-state, monochrome (design.md §11.4) --- */
.dash-expert__pill {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-expert__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--text-disabled);
}
.dash-expert__pill--on { background: var(--ink); border-color: var(--ink); color: var(--brand); }
.dash-expert__pill--on::before { background: var(--brand); }

/* Credit movement chip: signed number, same 2-state vocabulary. */
.dash-expert__credit {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
}
.dash-expert__credit--plus { background: var(--ink); border-color: var(--ink); color: var(--brand); }

/* ---- score meter — read-only rating (.ink-score) ---------- */
/* Replaces every star in the expert screens. Five segments echo the
   five buttons of the input scale, so the two read as one system. */
.dash-expert__score { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; }
.dash-expert__score-track { display: flex; flex-direction: row; align-items: center; gap: 3px; }
.dash-expert__score-seg { width: 18px; height: 6px; border-radius: 999px; background: var(--border); }
.dash-expert__score-seg--on { background: var(--ink); }
.dash-expert__score-value {
  color: var(--ink);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}
/* no-data: all five segments grey, value is an em-dash */
.dash-expert__score--empty .dash-expert__score-value { color: var(--text-disabled); }

/* Big variant, sitting under a 44px KPI value on a dark card. */
.dash-expert__score--kpi .dash-expert__score-track { gap: 4px; }
.dash-expert__score--kpi .dash-expert__score-seg { width: 34px; height: 8px; background: #2A2A29; }
.dash-expert__score--kpi .dash-expert__score-seg--on { background: var(--brand); }

/* ---- segmented 1-5 rating input (design.md §11.9) -------- */
/* Fill is CUMULATIVE: choosing 4 lights 1..4, so it reads as a
   meter, not a radio group. Integer 1-5, no halves. The real value
   is carried by a visually-hidden input that keeps its original
   name= so the existing POST is untouched. */
/* The <form> inside a card is a single child, so the card's own 18px gap does
   NOT space the form's blocks — they stacked flush (the remarks textarea sat
   directly on the submit button). The form owns its own rhythm. */
.dash-expert__form { display: flex; flex-direction: column; width: 100%; }
/* padding on BOTH sides, per design.md §11.9 ("padding-block: 14px"), so a
   criterion row is symmetric about its hairline instead of being padded only
   at the top. */
.dash-expert__rate { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px 0; border-top: 1px solid var(--hairline); }
.dash-expert__rate:first-of-type { border-top: 0; padding-top: 0; }
/* Footer action sits clear of the last field. */
.dash-expert__form-actions { display: flex; width: 100%; padding-top: 24px; }
.dash-expert__rate-label { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 18px; }
.dash-expert__rate-desc { color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 16px; }
/* The control itself is `.ink-scale` (already in this file at the
   ".ink-scale — segmented 1-5 rating" block, driven by /js/ink-scale.js).
   Do NOT add a second segmented control here — the expert screens
   reuse that one so the generated review forms, the employee
   screens and these stay a single system. `.dash-expert__rate`
   above is only the row wrapper around it. */
.dash-expert__rate .ink-scale { margin-top: 0; }

/* Read-only criterion row: label+desc left, score meter right. */
.dash-expert__crit { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 0; border-top: 1px solid var(--hairline); }
.dash-expert__crit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---- buttons (design.md §11.4) --------------------------- */
/* Legacy `.bttn` forces display:block, width:100%, Bebas Neue 32px, ls 3px,
   and `form button.bttn` is (0,1,2). It is tempting to out-specify that with
   `.dash-expert button.dash-expert__btn` — DON'T. That base rule becomes
   (0,2,1) and then outranks every single-class modifier below it, so --ghost,
   --lime, --danger and --back all lost their background to the base ink and
   every button on the page rendered identical. `[hidden]` lost the same way,
   so hidden buttons still rendered.
   An `!important` declaration beats a normal one at ANY specificity, so the
   base only needs !important on the properties legacy actually fights —
   never a heavier selector. Keep this a single class. */
.dash-expert__btn {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  max-width: none !important;
  height: auto;
  padding: 11px 18px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: var(--brand);
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 18px;
  letter-spacing: normal !important;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease;
}
.dash-expert__btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--brand); }

.dash-expert__btn--lime { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.dash-expert__btn--lime:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--ink); }

.dash-expert__btn--ghost { background: transparent; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); }
.dash-expert__btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* Quiet back-link in the page header: bordered, not a pill. */
.dash-expert__btn--back { background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--text-soft); padding: 0 16px; height: 40px; }
.dash-expert__btn--back:hover { background: transparent; border-color: var(--border); color: var(--ink); }

/* Row actions inside tables: 13/500, radius 8, pad 8/16. */
.dash-expert__btn--row { padding: 8px 16px; border-radius: 8px; font-size: 13px !important; line-height: 16px; }
.dash-expert__btn--danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.dash-expert__btn--danger:hover { background: transparent; border-color: var(--danger-deep); color: var(--danger-deep); }
.dash-expert__btn--block { width: 100% !important; }
.dash-expert__btn[disabled],
.dash-expert__btn.is-disabled { background: var(--border); border-color: var(--border); color: var(--text-disabled); pointer-events: none; }

.dash-expert__btn-bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
.dash-expert__muted-action { color: var(--text-disabled); font-size: 13px; font-weight: 400; line-height: 16px; }

/* ---- pagination ------------------------------------------ */
.dash-expert__pager { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-top: 4px; }
.dash-expert__pager-count { color: var(--text-muted); font-size: 13px; font-weight: 400; line-height: 20px; }
.dash-expert__pager-links { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.dash-expert__pager-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-disabled);
  font-size: 13px;
  font-weight: 500;
}
.dash-expert__pager-link.is-on { background: var(--ink); border-color: var(--ink); color: var(--brand); padding: 0; }
.dash-expert__pager-link.is-on:hover { background: var(--ink); color: var(--brand); }

/* ---- form primitives ------------------------------------- */
.dash-expert__field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.dash-expert__label-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
.dash-expert__label { color: var(--ink); font-size: 13px; font-weight: 500; line-height: 16px; }
.dash-expert__req {
  color: var(--text-disabled);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Every property restated + !important: `.form-control` and the
   id-specificity `#tags_input input` push Bebas Neue 22px / ls 2px /
   #f3fce7 / h70 / pad 15-30 onto these (design.md §11.6). */
.dash-expert__input,
.dash-expert input.dash-expert__input,
.dash-expert select.dash-expert__input,
.dash-expert textarea.dash-expert__input {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  padding: 0 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  letter-spacing: normal !important;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset; /* kill autofill tint */
}
.dash-expert__input:focus { border-color: var(--ink) !important; outline: none; }
.dash-expert__input::placeholder { color: var(--text-disabled) !important; font-size: 15px !important; font-weight: 400 !important; }
.dash-expert textarea.dash-expert__input {
  height: auto !important;
  min-height: 120px;
  padding: 14px !important;
  line-height: 22px !important;
  resize: vertical;
}
.dash-expert__input[readonly] { background: var(--cream) !important; color: var(--text-soft) !important; }

/* Tag / chips input (bootstrap-tagsinput). Legacy `.tag` is
   display:flex (block), which stacks every chip on its own row. */
.dash-expert__tagbox {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dash-expert__tagbox .tag,
.dash-expert__tagbox .dash-expert__tag {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 10px !important;
  background: var(--cream-2) !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 16px;
}
.dash-expert__tagbox .tag [data-role="remove"],
.dash-expert__tag-x { color: var(--text-disabled); cursor: pointer; }
/* Keep the plugin-managed original hidden — a display:!important on
   the input class resurrects it and leaks the raw serialised value. */
.dash-expert__tagbox input[type="text"] {
  flex: 1 1 120px;
  min-width: 120px;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  font-family: "Roboto", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* Toggle 40x24, knob 18 (design.md §11.4) */
.dash-expert__toggle-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.dash-expert__toggle { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; width: 40px; height: 24px; padding: 3px; background: var(--border); border-radius: 999px; cursor: pointer; transition: background 0.15s ease; }
.dash-expert__toggle-knob { width: 18px; height: 18px; background: #FFFFFF; border-radius: 999px; transition: transform 0.15s ease; }
.dash-expert__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.dash-expert__toggle.is-on { background: var(--brand); }
.dash-expert__toggle.is-on .dash-expert__toggle-knob { transform: translateX(16px); }

/* Upload dropzone */
.dash-expert__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 32px 24px;
  background: var(--cream);
  border: 1px dashed var(--dashed);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
}
.dash-expert__drop-title { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 18px; }
.dash-expert__drop-note { color: var(--text-muted); font-size: 13px; font-weight: 400; line-height: 20px; }

/* ---- evidence: image thumbs + file link ------------------ */
.dash-expert__thumbs { display: flex; flex-flow: row wrap; gap: 16px; width: 100%; }
.dash-expert__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 184px;
  height: 124px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.dash-expert__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dash-expert__file {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dash-expert__file-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; background: var(--cream); border-radius: 8px; }
.dash-expert__file-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }

/* ---- empty state: cream dashed block --------------------- */
.dash-expert__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 48px 32px;
  background: var(--cream);
  border: 1px dashed var(--dashed);
  border-radius: 14px;
  text-align: center;
}
.dash-expert__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.dash-expert__empty-title { color: var(--ink); font-size: 22px; font-weight: 800; line-height: 26px; letter-spacing: -0.01em; }
.dash-expert__empty-copy { max-width: 360px; color: var(--text-muted); font-size: 13px; font-weight: 400; line-height: 20px; }
/* Compact inline variant for a single missing field inside a card. */
.dash-expert__empty--inline { padding: 20px; gap: 6px; }
.dash-expert__empty--inline .dash-expert__empty-title { font-size: 14px; font-weight: 600; line-height: 18px; }

/* ---- notifications list ---------------------------------- */
.dash-expert__notif-card { display: flex; flex-direction: column; width: 100%; padding: 12px 24px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 18px; }
.dash-expert__notif {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.dash-expert__notif:last-child { border-bottom: 0; }
/* SOLID lime badge + ink glyph — never a 10% soft tint. */
.dash-expert__notif-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--brand);
  border-radius: 999px;
}
.dash-expert__notif-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.dash-expert__notif-label {
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-expert__notif-text { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; }
.dash-expert__notif-date {
  flex-shrink: 0;
  width: 88px;
  text-align: right;
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
}

/* ---- responsive ------------------------------------------ */
@media (max-width: 1200px) {
  .dash-expert__grid { flex-direction: column; }
  .dash-expert__col-side,
  .dash-expert__col-side--narrow { width: 100%; }
}
@media (max-width: 900px) {
  .dash-expert { padding: 28px 20px 48px; gap: 22px; }
  .dash-expert__head { flex-direction: column; }
  .dash-expert__title { font-size: 32px; line-height: 38px; }
  .dash-expert__kpis { grid-template-columns: 1fr; }
  .dash-expert__card { padding: 24px 20px; }
  .dash-expert__table-head { flex-direction: column; align-items: flex-start; }
  .dash-expert__search { width: 100%; }
}

/* ============================================================
   .dash-signup — the expert application wizard
   (/industryExpertSignup + /academicExpertSignup)

   Sits ON TOP of .dash-expert (root carries both classes) so the
   input / button / tagbox / dropzone primitives and their legacy
   !important overrides come for free. These two pages render under
   the app-default employer-layout, which loads scss/style.css — so
   .bttn, .form-control and .tag are all in play here.

   A 3-step wizard over ONE <form>: the steps show/hide, there is
   still a single multipart POST to …_joinRequest. Nothing about the
   submitted payload changes.
   ============================================================ */

/* The root also carries `dash-onb`, whose `padding:0 !important` is what lets
   .onb-topbar sit flush as a full-bleed bar. Page padding therefore lives on
   __inner, not here. */
.dash-expert.dash-signup {
  align-items: stretch;
  min-height: auto;
  gap: 0;
}

/* `hidden` must actually hide. The wizard toggles steps and nav buttons with
   the attribute, but author rules here set display on those very elements —
   .dash-expert__btn is `display: inline-flex !important` (it has to be, to
   beat legacy .bttn's display:block) and .dash-expert__field/__card are flex.
   An author display rule beats the UA [hidden] rule regardless of
   specificity, so without this the Back button and every "hidden" step still
   render. Two classes (0,2,0) so it also outranks the single-class
   .dash-expert__btn !important. Scoped to .dash-expert, not .dash-signup, so
   every expert screen gets it. */
.dash-expert [hidden] { display: none !important; }
/* Column sits under the full-bleed .onb-topbar, so it owns the page padding. */
.dash-signup__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 768px;      /* 720 column + 24 gutters */
  margin: 20px auto;
  padding: 44px 24px 72px;
}

/* ---- public chrome -------------------------------------------
   NO bespoke topbar here. These pages carry `dash-onb` on the root and use
   the system's existing standalone-page chrome, `.onb-topbar` (defined with
   the .dash-onb block above and already used by the employee onboarding
   pages): full-width white bar, h72, bottom hairline.

   A previous version defined a `.dash-signup__topbar` here that copied the
   contents of .auth-v2__header without its container — no bar, no height, no
   border — so it read as loose text on the page ground and matched nothing
   else in the app. Don't reintroduce it. */

/* Footer cross-link, mirroring the sign-in page's "New to Inkqe? …" line. */
.dash-signup__crosslink {
  width: 100%;
  padding-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}
.dash-signup__crosslink a { color: var(--ink); font-weight: 500; }
.dash-signup__crosslink a:hover { text-decoration: underline; }

/* ---- hero ------------------------------------------------- */
.dash-signup__hero { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.dash-signup__title {
  color: var(--ink);
  font-size: 44px;
  font-weight: 800;
  line-height: 50px;
  letter-spacing: -0.02em;
}
.dash-signup__deck { color: var(--text-soft); font-size: 15px; font-weight: 400; line-height: 24px; }
.dash-signup__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; padding-top: 4px; }
.dash-signup__value {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.dash-signup__value-label {
  color: var(--text-muted);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-signup__value-copy { color: var(--ink); font-size: 13px; font-weight: 400; line-height: 20px; }

/* ---- steps ------------------------------------------------ */
/* Panels are toggled with the `hidden` attribute so a step that is
   not shown is also removed from the a11y tree and tab order. */
.dash-signup__panel[hidden] { display: none; }
.dash-signup__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; }
.dash-signup__two--single { grid-template-columns: minmax(0, 1fr); }

.dash-signup__note {
  width: 100%;
  padding: 14px 16px;
  background: var(--cream);
  border-radius: 10px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

/* ---- radio pills (design.md §11.4) ------------------------ */
.dash-signup__radios { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.dash-signup__radio {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
}
.dash-signup__radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.dash-signup__radio-dot { width: 8px; height: 8px; border-radius: 999px; background: #D1D5DB; flex-shrink: 0; }
/* :has() is already relied on elsewhere in this file, so it is fair game. */
.dash-signup__radio:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.dash-signup__radio:has(input:checked) .dash-signup__radio-dot { background: var(--brand); }
.dash-signup__radio:has(input:focus-visible) { border-color: var(--ink); }

/* ---- upload ----------------------------------------------- */
.dash-signup__upload { position: relative; width: 100%; }
/* The real file input covers the dropzone so the whole block is the
   click target; it stays in the DOM and keeps its name, so the
   multipart POST is untouched.

   style-test.css (loaded here via the app-default employer-layout) carries
   TWO bare rules that hit this input:
     :3181  input[type="file"] { display: none }
     :3267  input[type=file]  { position:absolute; opacity:0; width:0;
                                height:0; pointer-events:none }
   Both are (0,1,1) so this rule out-specifies them — but only for properties
   it actually declares. `display` and `pointer-events` were omitted, so the
   input was display:none AND pointer-events:none: the dropzone looked right
   and nothing happened on click. Declare both, explicitly. */
.dash-signup__upload input[type="file"] {
  display: block !important;
  pointer-events: auto !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/* The input is invisible, so surface keyboard focus on the dropzone. */
.dash-signup__upload:has(input[type="file"]:focus-visible) .dash-expert__drop {
  border-style: solid;
  border-color: var(--ink);
}
.dash-signup__upload .dash-expert__drop { padding: 26px 20px; }
/* Filled state: solid surface, solid lime badge with an ink tick (SOLID fill —
   never a soft tint), filename as the title and size + "click to replace"
   underneath, so the control reports what it is holding. */
.dash-signup__upload.is-filled .dash-expert__drop {
  background: #FFFFFF;
  border-style: solid;
  border-color: var(--border);
}
.dash-signup__upload.is-filled .dash-expert__empty-icon {
  background: var(--brand);
  border-color: var(--brand);
}
.dash-signup__upload.is-filled .dash-expert__drop-title { word-break: break-all; }

/* ============================================================
   .dash-notice — the shared app-wide error page (views/error.ejs)

   NOT expert-only: `res.render("error", …)` is called from every account
   type, so this replaces the legacy "Something Went Wrong" screen
   everywhere. error.ejs links this stylesheet itself, because several of
   the layouts it renders under (user-layout, superAdmin-layout …) do not.
   ============================================================ */
.dash-expert.dash-notice {
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 64px 24px;
}
.dash-notice__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  padding: 40px 44px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  text-align: center;
}
/* SOLID fill + white glyph — the sanctioned destructive badge. Never a
   10% tint, and never a coloured edge-strip on the card. */
.dash-notice__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--danger);
  border-radius: 999px;
}
.dash-notice__title {
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: -0.01em;
}
.dash-notice__msg {
  max-width: 400px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.dash-notice__actions { display: flex; gap: 12px; padding-top: 6px; }

/* ============================================================
   .dash-done — the post-application confirmation PAGE

   Deliberately NOT the .dash-notice card. A centred 520px card reads as a
   modal that lost its overlay; a confirmation is a destination and should
   be composed like one — left-aligned editorial hero on the page ground,
   then the real "what happens next" content, then one quiet action.

   The dark panel is design.md §11.4's guide card (ink r18, lime mono
   eyebrow, numbered lime-mono items, #E5E7EB body, hairline dividers at
   rgba(255,255,255,0.08) — the one place a hairline inside a dark surface
   is sanctioned).
   ============================================================ */
.dash-expert.dash-done {
  align-items: stretch;
  min-height: auto;
  gap: 0;
}
/* Same shape as the wizard: full-bleed .onb-topbar, then a padded column. */
.dash-done__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 768px;
  margin: 20px auto;
  padding: 56px 24px 80px;
}

.dash-done__hero { display: flex; flex-direction: column; gap: 20px; width: 100%; }
/* SOLID lime + ink glyph, sitting on the page rather than inside a card. */
.dash-done__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--brand);
  border-radius: 999px;
}
.dash-done__title {
  max-width: 660px;
  color: var(--ink);
  font-size: 52px;
  font-weight: 800;
  line-height: 56px;
  letter-spacing: -0.02em;
  /* Even out the two lines instead of leaving a short widow on line 2.
     The markup also binds the closing phrase with &nbsp;, which is what
     actually guarantees it — balance is a progressive enhancement. */
  text-wrap: balance;
}
/* One sentence per line: the markup carries an explicit <br> between them, and
   `pretty` stops either line ending on a widow if it has to wrap further on a
   narrow viewport. */
.dash-done__deck {
  max-width: 560px;
  color: var(--text-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  text-wrap: pretty;
}

.dash-done__guide {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30px 34px;
  background: var(--ink);
  border-radius: 18px;
}
.dash-done__guide-label {
  padding-bottom: 14px;
  color: var(--brand);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dash-done__step {
  display: flex;
  flex-direction: row;
  gap: 18px;
  width: 100%;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dash-done__step-num {
  flex-shrink: 0;
  width: 28px;
  color: var(--brand);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.18em;
}
.dash-done__step-text { display: flex; flex-direction: column; gap: 4px; }
.dash-done__step-title { color: #FFFFFF; font-size: 15px; font-weight: 600; line-height: 20px; }
.dash-done__step-copy { color: #E5E7EB; font-size: 13px; font-weight: 400; line-height: 20px; }

.dash-done__foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.dash-done__foot-note { max-width: 400px; color: var(--text-muted); font-size: 13px; font-weight: 400; line-height: 20px; }

@media (max-width: 760px) {
  .dash-done__title { font-size: 34px; line-height: 40px; }
  .dash-done__deck { font-size: 15px; line-height: 24px; }
  .dash-done__guide { padding: 24px 20px; }
  .dash-done__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---- tags input ------------------------------------------- */
/* bootstrap-tagsinput replaces the <input> with its own
   .bootstrap-tagsinput wrapper at runtime, so the tagbox look has to be
   attached to THAT, not to our markup. Scoped to .dash-expert (not
   .dash-signup) so every expert screen with a tag field gets it.

   The plugin emits <span class="tag label label-info">, which walks straight
   into `.bootstrap-tagsinput .tag.label` in scss/style.css:1052 — a (0,3,0)
   rule setting Bebas Neue 20px, ls 2px, a grey border and 15px margins. Our
   selector ties it at (0,3,0) and only wins on load order, so EVERY property
   it sets must be restated here or that one leaks. letter-spacing was the one
   that got through first: the chips rendered in Roboto but 2px-tracked.
   Canonical values transcribed from Paper "02 · Status pills, tags & chips"
   → row "Tag input chip", not eyeballed. */
.dash-expert .bootstrap-tagsinput {
  display: flex !important;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: "Roboto", sans-serif !important;
}
.dash-expert .bootstrap-tagsinput .tag,
.dash-expert .bootstrap-tagsinput .tag.label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 5px 10px !important;
  background: var(--cream-2) !important;
  border: 0 !important;            /* legacy: 1px solid rgba(153,153,153,.8) */
  border-radius: 999px !important;
  color: var(--ink) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;      /* legacy: 20px */
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: normal !important; /* legacy: 2px — the leak that showed */
  text-transform: none !important;
}
/* The remove control: legacy sets font-family FontAwesome and
   content "\f057" on this pseudo-element, so both have to be restated or
   the × renders as a FontAwesome glyph (or tofu). Board spec is Roboto
   13/400 #9CA3AF. */
.dash-expert .bootstrap-tagsinput .tag [data-role="remove"] {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text-disabled) !important;
  cursor: pointer;
}
.dash-expert .bootstrap-tagsinput .tag [data-role="remove"]::after {
  content: "\00d7" !important;
  padding: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  letter-spacing: normal !important;
}
.dash-expert .bootstrap-tagsinput input {
  flex: 1 1 140px;
  min-width: 140px;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  font-family: "Roboto", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
.dash-expert .bootstrap-tagsinput input::placeholder { color: var(--text-disabled); }

/* ---- validation ------------------------------------------- */
.dash-signup__err {
  display: none;
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.dash-signup__field.is-invalid .dash-signup__err { display: block; }
.dash-signup__field.is-invalid .dash-expert__input,
.dash-signup__field.is-invalid .dash-expert__tagbox { border-color: var(--danger) !important; }

/* ---- nav bar ---------------------------------------------- */
/* gap as well as space-between: on step 1 the bar is flex-end and the
   secondary is hidden, so nothing should ever sit flush against anything. */
.dash-signup__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding-top: 4px;
}
.dash-signup__nav--end { justify-content: flex-end; }

/* ---- server error banner ---------------------------------- */
.dash-signup__alert {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--danger);
  border-radius: 10px;
  color: var(--danger-deep);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

@media (max-width: 760px) {
  .dash-signup__title { font-size: 32px; line-height: 38px; }
  .dash-signup__values,
  .dash-signup__two { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   .ink-credits — the credit-balance box

   Reported 2026-08-03: the credit balance looked different on every
   screen that shows one. The employer's Credit Statements screen
   (.dash-cs .cs-balance) was picked as the reference — a BLACK box, so
   the number stands out — and this is that component, lifted to a
   standalone name so the four employee screens can use it without being
   re-scoped onto .dash-cs. Same standalone reasoning as .ink-scale
   (design.md §11.9): no ancestor-layer dependency.

   What it replaces on those four screens was worse than inconsistent:
   a white card with ink text and an icon badge filled
   `rgba(34,197,94,0.10)` — the BANNED soft-tint badge wash, in a 10%
   tint of #22C55E, the DEPRECATED green (design.md §1, CLAUDE.md "one
   green"). Badges take SOLID fills. Here: solid lime, ink glyph.

   Markup:
     <aside class="ink-credits">
       <span class="ink-credits__badge"><svg …/></span>
       <span class="ink-credits__meta">
         <span class="ink-credits__label">Credits</span>
         <span class="ink-credits__value">1,240</span>
       </span>
     </aside>
   The glyph must inherit colour (`fill="currentColor"` / `stroke="currentColor"`).
   ============================================================ */
/* GEOMETRY IS THE OLD CARD'S, ON PURPOSE (user ruling 2026-08-03).
   All four screens put this in `grid-template-columns: minmax(0,1fr) 220px`
   with `align-items:stretch`, and the white card it replaces filled that cell
   — 22px padding, radius 18, label/value left and icon right. A first pass
   shipped the reference's hug-the-content pill (`align-self:start`,
   `padding:16px 20px`, radius 14) and it read as a small rectangle stranded in
   the top-right corner of the column with a large gap beneath it. The BOX is
   what changed here (white -> ink, tinted badge -> solid lime); the FOOTPRINT
   must not.

   `!important` is load-bearing too: user-paid-credit-requestTest.ejs renders
   under user-layout.ejs, which carries the full legacy style.scss, where
   selectors like `.inner_pages aside` outrank a bare (0,1,0) class. */
.ink-credits {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* Geometry is !important for the same reason the paint is: this box renders
     on a page carrying the full legacy style.scss, and a stray `aside` or
     `.container-fluid > *` width/height rule there silently inflates it out of
     its grid cell. box-sizing must be stated too — with content-box the 22px
     padding is ADDED to the 220px column and the box overhangs the page. */
  box-sizing: border-box !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 22px !important;
  background: #0A0A0A !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.ink-credits, .ink-credits * { box-sizing: border-box !important; }
.ink-credits__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #C5F154 !important;
  color: #0A0A0A !important;
}
.ink-credits__badge svg { flex: 0 0 auto; }
.ink-credits__meta { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0; margin: 0 !important; padding: 0 !important; }
.ink-credits__label {
  font-family: "Roboto Mono", "Roboto", monospace !important;
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #C5F154 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ink-credits__value {
  font-family: "Roboto", sans-serif !important;
  font-weight: 800;
  font-size: 28px !important;
  line-height: 30px !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Each host collapses its head grid to one column at 1100px (991px on credit
   statements); the old cards capped themselves at 260px there so the box did
   not run the full page width. Same cap, applied once. */
@media (max-width: 1100px) {
  .ink-credits { max-width: 260px; }
}


/* ---- .dash-me additions for the aspirant My Profile (2026-08-04) -------------
   Aspirant is the third account on this shared layer (employer, employee,
   aspirant). Two small extensions, both additive — nothing existing changes.
   The old .dash-myprofile__* block that lived here was deleted with the rebuild;
   among its rules was a skill "proficiency" bar hard-coded to width:72% for every
   skill, with no proficiency field anywhere in the schema to back it. ---------- */

/* Muted variant of the role pill — the §11.4 2-state status pill, used for the
   read-only Public/Private indicator. Must come after .me-role-pill to win. */
.dash-me .me-role-pill--muted { background:#FFFFFF; border:1px solid var(--border); }
.dash-me .me-role-pill--muted .me-dot { background:var(--text-disabled); }
.dash-me .me-role-pill--muted .me-role-pill__text { color:var(--text-muted); }

/* Contact-row items that are links (View CV / View public profile). The base
   class was span-only, so anchors need the underline killed and a hover state. */
.dash-me a.me-contact-item { text-decoration:none !important; transition:color .12s ease; }
.dash-me a.me-contact-item:hover { color:var(--ink); }
.dash-me a.me-contact-item:hover svg { stroke:var(--ink); }

/* Project rows carry a title + optional company/job sub-line stacked in one cell. */
.dash-me .me-cell-who > div { display:flex; flex-direction:column; gap:2px; min-width:0; }

/* ---- .dash-goalform tag input — added 2026-08-04 for the aspirant Set Career
   Goal screen. The employee/employer create-goal screens have no tag field, so
   these two classes are genuinely new; both are new names, so nothing existing
   changes. Chip follows the §11.4 spec: cream fill, r999, Roboto 13/500 ink,
   muted × . The widget itself is view-local vanilla JS (no plugin). ---------- */
.dash-goalform__taglist { display:flex; flex-wrap:wrap; gap:8px; }
.dash-goalform__taglist:empty { display:none; }
.dash-goalform__tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; background:#F0EBDC; border-radius:999px;
  font-family:"Roboto",sans-serif; font-weight:500; font-size:13px; line-height:16px; color:#0A0A0A;
}
.dash-goalform__tag button {
  padding:0; background:none; border:0; line-height:1; cursor:pointer;
  font-size:14px; color:#9CA3AF; box-shadow:none;
}
.dash-goalform__tag button:hover { color:#0A0A0A; }



/* ---- CSS-only confirmation modal, scoped to .dash-jobs — added 2026-08-04.
   The aspirant Applied Jobs screen shows this after a successful apply. Its rules
   previously lived in the .dash-appjobs fork; that fork was retired when the screen
   moved to .dash-jobs, and the only other copies are scoped to .dash-goalform or sit
   in public/scss/style.css, which the aspirant layout does NOT load. Without these the
   checkbox-hack modal renders as raw, always-visible markup on the page.
   Cloned verbatim from the .dash-goalform copy so both look identical. ---------- */
.dash-jobs #css-only-modals {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin: 0;
}
.dash-jobs .css-only-modal-check { display: none; }
.dash-jobs .css-only-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0;
}
.dash-jobs .css-only-modal .modal-content {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 30px 36px 32px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.28);
  overflow: hidden;
}
.dash-jobs .css-only-modal .modal_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  padding-top: 6px;
}
.dash-jobs .css-only-modal .modal_header h5 {
  margin: 0 0 10px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 28px !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
.dash-jobs .css-only-modal .modal_header p {
  max-width: 440px;
  margin: 0 0 24px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--text-soft) !important;
}
/* The original pinned min-height:280px on the header to reserve space for a
   checkmark animation that the same stylesheet then set to display:none — so
   the modal carried ~150px of empty air. The animation stays hidden (it is
   legacy, and unhiding it pulls in animation CSS from style-test); the dead
   reservation does not. */
.dash-jobs .check_animation { display: none; }
.dash-jobs .css-only-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--cream);
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  line-height: 1;
  cursor: pointer;
}
.dash-jobs .css-only-modal-close:hover { background: var(--cream-2); }
.dash-jobs .css-only-modal-close:focus { outline: none; box-shadow: none; }
.dash-jobs .css-only-modal-close .fa { font-size: 16px !important; }


/* ---- .dash-goalform self-assessment ratings — added 2026-08-04 for Add Project
   step 2. The create-goal screens have no rating block, so these are new names.
   The control itself is the shared, global .ink-scale (design.md §11.9). ------ */
.dash-goalform__ratings { display:flex; flex-direction:column; gap:6px; }
.dash-goalform__rating { display:flex; flex-direction:column; gap:6px; padding:16px 0; border-top:1px solid #F0EBDC; }
.dash-goalform__rating:first-child { border-top:0; padding-top:4px; }
.dash-goalform__rating-label { font-weight:500 !important; font-size:14px !important; line-height:18px !important; color:#0A0A0A; }
.dash-goalform__error { display:none; font-weight:500; font-size:13px; line-height:18px; color:#DC2626; margin-top:6px; }

/* ============================================================
   .ink-radio — the radio pill row (design.md §11.4), ONE shared
   implementation. Follows the .ink-scale / .ink-score / .ink-rate
   convention: unscoped, so any layer can use it without each one
   growing its own copy.

   Consolidation, not a new component. It replaces three per-layer
   duplicates added 2026-08-04 (.onb-radio*, .dash-form__radio*,
   .dash-goalform__radio*) — net two fewer implementations.
   .dash-signup__radio* (the expert leg's, already shipped) is left
   alone; fold it in when that leg next touches those screens.

   Spec, verbatim from §11.4: selected = #0A0A0A bg, lime dot 8,
   white 13/500; unselected = white + 1px #E5E7EB, #D1D5DB dot,
   #4B5563 13/500. Each h40, pad 0/16, r10; row gap 10.

   The native input stays in the DOM (it is what posts) but is
   visually hidden, so `required`/`checked` behave normally.
   Two-tier state: the sibling rule works everywhere; :has() upgrades
   the whole pill where supported. The :has() rules come LAST so they
   win the specificity tie.
   ============================================================ */
.ink-radios { display:flex; flex-wrap:wrap; gap:10px; }
.ink-radio {
  display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 16px; margin:0 !important;
  background:#FFFFFF; border:1px solid #E5E7EB; border-radius:10px; cursor:pointer;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
  transition:background .12s ease, border-color .12s ease;
}
.ink-radio input[type="radio"] {
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  overflow:hidden; clip:rect(0 0 0 0); border:0; opacity:0;
}
.ink-radio__dot { width:8px; height:8px; border-radius:999px; background:#D1D5DB; flex-shrink:0; }
.ink-radio__label { font-weight:500 !important; font-size:13px !important; line-height:16px !important; color:#4B5563; }
.ink-radio:hover { border-color:#0A0A0A; }
.ink-radio input:checked ~ .ink-radio__dot { background:#0A0A0A; }
.ink-radio:has(input:checked) { background:#0A0A0A; border-color:#0A0A0A; }
.ink-radio:has(input:checked):hover { background:#0A0A0A; border-color:#0A0A0A; }
.ink-radio:has(input:checked) .ink-radio__dot { background:#C5F154; }
.ink-radio:has(input:checked) .ink-radio__label { color:#FFFFFF; }

/* ============================================================
   .dash-limit — plan / limit interstitial  (added 2026-08-04)

   Used by views/errorSubscriptionExpired.ejs, which is rendered from ~60 places
   in the controllers for EVERY cap in the app (job posting, employees, annual
   reviews, achievement feedback, custom forms, expired subscription).

   IMPORTANT CONSTRAINT: not one of those 60 render calls passes a `layout`
   local, so the view falls to the app default (`./layouts/employer-layout.ejs`,
   app.js:614) which is just <head> + <body><%- body %></body> — no sidebar, no
   header. The view is therefore a SELF-CONTAINED full page and must centre
   itself; it cannot rely on dashboard chrome. Giving it the dashboard layout
   would mean editing ~60 controller call sites (backend, out of scope).

   Tokens are redeclared locally because this sheet scopes them per layer
   (.dash-welcome:10, .dash-profile:1325) rather than on :root.
   ============================================================ */
.dash-limit {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --text-soft: #4B5563;
  --border: #E5E7EB;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #FAFAF7;
  font-family: "Roboto", system-ui, sans-serif;
}
.dash-limit__card {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 36px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}
/* SOLID ink fill with a lime glyph — "text-on-dark", the one permitted use of
   the green besides a solid fill. Deliberately NOT a 10%-wash tint badge and
   NOT an edge accent strip; both are banned in this design system. */
.dash-limit__badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-limit__title {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dash-limit__body {
  margin: 0 auto;
  max-width: 400px;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-soft);
}
.dash-limit__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.dash-limit__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--brand);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s;
}
.dash-limit__btn:hover { background: #1A1A1A; }
.dash-limit__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 575px) {
  .dash-limit__card { padding: 32px 22px; }
  .dash-limit__title { font-size: 21px; line-height: 27px; }
}

/* ============================================================
   Employer articles — complete editorial workflow
   Routes: manage/create/edit/view/publish/unpublish/delete blogs.
   Paper authority: Blogs page, implemented under .dash-blogs only.
   ============================================================ */
.dash-blogs {
  --brand: #C5F154;
  --ink: #0A0A0A;
  --cream: #F5F1E8;
  --cream-deep: #F0EBDC;
  --border: #E5E7EB;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;
  --danger: #DC2626;

  width: 100%;
  min-height: 100%;
  padding: 32px 36px 72px !important;
  background: #FAFAF7;
  color: var(--ink);
  font-family: "Roboto", system-ui, sans-serif !important;
}
.dash-blogs,
.dash-blogs *,
.dash-blogs *::before,
.dash-blogs *::after { box-sizing: border-box; }
.dash-blogs [hidden] { display: none !important; }
.dash-blogs .blog-board { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 1600px; margin: 0 auto; }
.dash-blogs .blog-page-head { margin: 0; }
.dash-blogs h1.jb-title { margin: 0 !important; text-transform: none !important; }
.dash-blogs p.jb-subtitle { margin: 0 !important; }
.dash-blogs .jb-cta:focus-visible,
.dash-blogs .jb-act:focus-visible,
.dash-blogs .jb-empty__cta:focus-visible,
.dash-blogs .page-link:focus-visible,
.dash-blogs .blog-button:focus-visible,
.dash-blogs .blog-menu__button:focus-visible,
.dash-blogs .blog-menu__panel a:focus-visible,
.dash-blogs .blog-menu__panel button:focus-visible,
.dash-blogs .blog-clear-search:focus-visible,
.dash-blogs .blog-back-link:focus-visible,
.dash-blogs .blog-toolbar button:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px !important;
}
.dash-blogs .blog-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Manage ---------------------------------------------------- */
.dash-blogs .blog-list-card { gap: 24px; padding: 28px !important; overflow: visible; }
.dash-blogs .jb-search { position: relative; width: 320px; height: 48px; padding: 0 14px; color: var(--text-disabled); }
.dash-blogs .jb-search input { font-family: "Roboto", sans-serif !important; font-size: 15px !important; line-height: 18px !important; font-weight: 400 !important; letter-spacing: normal !important; }
.dash-blogs .blog-table { table-layout: fixed; }
.dash-blogs .blog-table th:first-child { width: 48%; }
.dash-blogs .blog-table th:nth-child(2) { width: 17%; }
.dash-blogs .blog-table th:nth-child(3) { width: 15%; }
.dash-blogs .blog-table th:last-child { width: 20%; padding-right: 0 !important; }
.dash-blogs .blog-table td:last-child { padding-right: 0 !important; }
.dash-blogs .blog-article-cell { gap: 3px; }
.dash-blogs .blog-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.dash-blogs .jb-job__name.blog-article-title {
  color: var(--ink) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}
.dash-blogs .jb-job__name.blog-article-title:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.dash-blogs .blog-featured-badge { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 20px; padding: 3px 7px; border-radius: 5px; background: var(--brand); color: var(--ink); font: 600 9px/12px "Roboto Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.dash-blogs .blog-article-description { max-width: 560px; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.dash-blogs .blog-created { color: var(--text-muted); text-transform: uppercase; }
.dash-blogs .blog-row-actions { position: relative; width: 100%; }
.dash-blogs .blog-menu { position: relative; display: inline-flex; flex: 0 0 auto; }
.dash-blogs .blog-menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.dash-blogs .blog-menu__button:hover,
.dash-blogs .blog-menu__button[aria-expanded="true"] { border-color: var(--border); background: var(--cream); color: var(--ink); }
.dash-blogs .blog-menu__button--large { width: 42px; height: 42px; border-color: var(--border); background: #fff; border-radius: 10px; }
.dash-blogs .blog-menu__panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 80;
  width: 164px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px -8px rgba(10, 10, 10, .18);
}
.dash-blogs .blog-menu__panel.is-floating { position: fixed; right: auto; bottom: auto; z-index: 1100; }
.dash-blogs .blog-menu__panel form { width: 100%; margin: 0; padding: 0; }
.dash-blogs .blog-menu__panel a,
.dash-blogs .blog-menu__panel button,
.dash-blogs .blog-menu__panel .blog-menu__current {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--ink) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
}
.dash-blogs .blog-menu__panel button { border: 0; background: transparent; text-align: left; cursor: pointer; }
.dash-blogs .blog-menu__panel .blog-menu__current { color: var(--text-muted) !important; cursor: default; }
.dash-blogs .blog-menu__panel a:hover,
.dash-blogs .blog-menu__panel a:focus,
.dash-blogs .blog-menu__panel button:hover,
.dash-blogs .blog-menu__panel button:focus { background: var(--cream); }
.dash-blogs .blog-menu__panel a.blog-menu__danger { color: var(--danger) !important; }
.dash-blogs .jb-pager .page-link { font-family: "Roboto", sans-serif !important; }
.dash-blogs .jb-pager .page-link:disabled { color: var(--text-disabled); cursor: default; background: #fff; }
.dash-blogs .blog-no-results { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 52px 24px; border: 1px dashed #D8CFB8; border-radius: 14px; background: var(--cream); text-align: center; }
.dash-blogs .blog-no-results h3 { margin: 0; color: var(--ink); font-size: 20px; line-height: 26px; font-weight: 800; }
.dash-blogs .blog-clear-search { padding: 8px 16px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 500 13px/18px "Roboto", sans-serif; cursor: pointer; }

/* Shared navigation + buttons ------------------------------- */
.dash-blogs .blog-back-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink) !important;
  font: 500 14px/18px "Roboto", sans-serif !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
}
.dash-blogs .blog-back-link:hover { background: #fff; }
.dash-blogs .blog-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding: 11px 18px !important;
  border-radius: 10px;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer;
}
.dash-blogs .blog-button--primary { border: 1px solid var(--ink); background: var(--ink); color: var(--brand) !important; }
.dash-blogs .blog-button--primary:hover { background: #1A1A1A; color: var(--brand) !important; }
.dash-blogs .blog-button--ghost { border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink) !important; }
.dash-blogs .blog-button--ghost:hover { background: #fff; color: var(--ink) !important; }
.dash-blogs .blog-button--danger { border: 1px solid var(--danger); background: var(--danger); color: #fff !important; }
.dash-blogs .blog-button--danger:hover { background: #B91C1C; border-color: #B91C1C; }
.dash-blogs .blog-button:disabled { border-color: var(--border); background: var(--border); color: var(--text-disabled) !important; cursor: default; }

/* Create + Edit --------------------------------------------- */
.dash-blogs .blog-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 24px; }
.dash-blogs .blog-editor-form { min-width: 0; margin: 0; }
.dash-blogs .blog-form-card { display: flex; flex-direction: column; gap: 28px; padding: 32px 36px; border: 1px solid var(--border); border-radius: 18px; background: #fff; }
.dash-blogs .blog-form-section { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; }
.dash-blogs .blog-form-section + .blog-form-section { padding-top: 28px; border-top: 1px solid var(--cream-deep); }
.dash-blogs .blog-section-heading { display: flex; align-items: center; gap: 18px; }
.dash-blogs .blog-section-heading > span { flex: 0 0 auto; color: var(--text-disabled); font: 600 12px/16px "Roboto Mono", monospace; letter-spacing: .18em; }
.dash-blogs .blog-section-heading > i { flex: 1 1 auto; height: 1px; background: var(--cream-deep); }
.dash-blogs .blog-section-heading h2 { flex: 0 0 auto; margin: 0; color: var(--ink); font: 600 14px/18px "Roboto", sans-serif !important; letter-spacing: .02em; }
.dash-blogs .blog-section-intro { margin: -10px 0 0; color: var(--text-soft); font: 400 13px/20px "Roboto", sans-serif; }
.dash-blogs .blog-field { display: flex; flex-direction: column; gap: 6px; }
.dash-blogs .blog-field__label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dash-blogs .blog-field__label-row label { margin: 0; color: var(--ink); font: 500 13px/16px "Roboto", sans-serif !important; letter-spacing: normal !important; }
.dash-blogs .blog-field__label-row span { color: var(--text-disabled); font: 600 10px/12px "Roboto Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.dash-blogs input.blog-input {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  outline: 0;
  background: #fff !important;
  color: var(--ink) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}
.dash-blogs input.blog-input::placeholder { color: var(--text-disabled); opacity: 1; }
.dash-blogs input.blog-input:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 3px rgba(197, 241, 84, .32) !important; }
.dash-blogs .blog-help { margin: 0; color: var(--text-muted); font: 400 12px/18px "Roboto", sans-serif; }
.dash-blogs .blog-field-error { margin: 0; color: #B91C1C; font: 500 12px/18px "Roboto", sans-serif; }
.dash-blogs .blog-field.is-invalid input.blog-input,
.dash-blogs .blog-editor-shell.is-invalid { border-color: var(--danger) !important; }
.dash-blogs .blog-editor-shell { overflow: visible; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.dash-blogs .blog-editor-shell:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(197, 241, 84, .32); }
.dash-blogs .blog-toolbar.ql-toolbar.ql-snow {
  position: sticky;
  top: var(--blog-toolbar-top, 84px);
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 48px;
  padding: 7px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 9px 9px 0 0;
  background: var(--cream);
  font-family: "Roboto", sans-serif !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dash-blogs .blog-toolbar.ql-toolbar.ql-snow::-webkit-scrollbar { display: none; }
.dash-blogs .blog-toolbar button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 32px;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--text-soft) !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  cursor: pointer;
}
.dash-blogs .blog-toolbar button svg { display: none !important; }
.dash-blogs .blog-toolbar button::after { white-space: nowrap; }
.dash-blogs .blog-toolbar .ql-bold::after { content: "B"; font-weight: 800; }
.dash-blogs .blog-toolbar .ql-italic::after { content: "I"; font-style: italic; }
.dash-blogs .blog-toolbar .ql-header::after { content: "H2"; }
.dash-blogs .blog-toolbar .ql-blockquote::after { content: "Quote"; }
.dash-blogs .blog-toolbar .ql-list::after { content: "• List"; }
.dash-blogs .blog-toolbar .ql-link::after { content: "Link"; }
.dash-blogs .blog-toolbar .ql-background::after { content: "Highlight"; }
.dash-blogs .blog-toolbar .ql-image::after { content: "Image"; }
.dash-blogs .blog-toolbar button:hover { background: var(--cream-deep) !important; color: var(--ink) !important; }
.dash-blogs .blog-toolbar button.ql-active { background: var(--ink) !important; color: var(--brand) !important; }
.dash-blogs .blog-toolbar__divider { flex: 0 0 auto; width: 1px; height: 22px; margin: 0 4px; background: #D9D5C9; }
.dash-blogs .blog-editor.ql-container.ql-snow { height: auto; border: 0 !important; font-family: "Roboto", sans-serif !important; }
.dash-blogs .blog-editor .ql-editor { min-height: 320px; padding: 22px; color: var(--ink); font: 400 15px/1.72 "Roboto", sans-serif; }
.dash-blogs .blog-editor .ql-editor.ql-blank::before { left: 22px; right: 22px; color: var(--text-disabled); font-style: normal; }
.dash-blogs .blog-editor .ql-editor h2 { margin: 26px 0 12px; color: var(--ink); font-size: 24px; line-height: 30px; font-weight: 800; }
.dash-blogs .blog-editor .ql-editor blockquote { margin: 22px 0; padding: 18px 20px; border: 0; border-radius: 10px; background: var(--cream); color: var(--ink); }
.dash-blogs .blog-editor .ql-tooltip { z-index: 20; }
.dash-blogs .blog-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--cream-deep); }
.dash-blogs .blog-error-summary { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid #FECACA; border-radius: 10px; background: #FEF2F2; color: #991B1B; font: 400 13px/19px "Roboto", sans-serif; }
.dash-blogs .blog-error-summary strong { font-weight: 700; }
.dash-blogs .blog-guide { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px dashed #D8CFB8; border-radius: 14px; background: var(--cream); }
.dash-blogs .blog-guide__label { color: var(--text-muted); font: 700 10px/14px "Roboto Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.dash-blogs .blog-guide h2 { margin: 0; color: var(--ink); font: 800 18px/24px "Roboto", sans-serif !important; }
.dash-blogs .blog-guide p { margin: 0; color: var(--text-soft); font: 400 13px/20px "Roboto", sans-serif; }
.dash-blogs .blog-guide ul { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; }
.dash-blogs .blog-guide li { display: flex; gap: 8px; padding: 10px 0; border-top: 1px solid #DED8C9; color: var(--text-soft); font: 400 12px/18px "Roboto", sans-serif; }
.dash-blogs .blog-guide li::before { flex: 0 0 auto; color: var(--ink); content: "—"; }

/* Article view ---------------------------------------------- */
.dash-blogs .blog-article-card { overflow: visible; border: 1px solid var(--border); border-radius: 18px; background: #fff; }
.dash-blogs .blog-article-head { padding: 40px 44px; border-bottom: 1px solid var(--border); }
.dash-blogs .blog-article-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.dash-blogs .blog-article-head__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 1000px; }
.dash-blogs .blog-article-head h1 { margin: 0; color: var(--ink); font: 800 40px/46px "Roboto", sans-serif !important; letter-spacing: -.02em; text-transform: none !important; overflow-wrap: anywhere; }
.dash-blogs .blog-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.dash-blogs .blog-article-date { color: var(--text-muted); font: 600 10px/14px "Roboto Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.dash-blogs .blog-article-actions { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dash-blogs .blog-reading-surface { width: min(100%, 840px); margin: 0 auto; padding: 64px 40px 76px; }
.dash-blogs .blog-lead { margin: 0 0 38px; color: var(--text-soft); font: 400 20px/31px "Roboto", sans-serif; letter-spacing: -.015em; }
.dash-blogs .blog-prose { color: #242424; font: 400 16px/1.78 "Roboto", sans-serif; overflow-wrap: anywhere; }
.dash-blogs .blog-prose > *:first-child { margin-top: 0 !important; }
.dash-blogs .blog-prose > *:last-child { margin-bottom: 0 !important; }
.dash-blogs .blog-prose h1,
.dash-blogs .blog-prose h2,
.dash-blogs .blog-prose h3 { color: var(--ink); font-family: "Roboto", sans-serif !important; font-weight: 800 !important; text-transform: none !important; }
.dash-blogs .blog-prose h1 { margin: 46px 0 16px; font-size: 32px; line-height: 39px; }
.dash-blogs .blog-prose h2 { margin: 42px 0 14px; font-size: 26px; line-height: 33px; }
.dash-blogs .blog-prose h3 { margin: 34px 0 12px; font-size: 20px; line-height: 27px; }
.dash-blogs .blog-prose p { margin: 0 0 22px; }
.dash-blogs .blog-prose ul,
.dash-blogs .blog-prose ol { margin: 0 0 24px; padding-left: 24px !important; }
.dash-blogs .blog-prose ul,
.dash-blogs .blog-prose ul > li { list-style: disc outside !important; }
.dash-blogs .blog-prose ol,
.dash-blogs .blog-prose ol > li { list-style: decimal outside !important; }
.dash-blogs .blog-prose li { margin: 0 0 8px; }
.dash-blogs .blog-prose blockquote { margin: 30px 0; padding: 22px 24px; border: 0 !important; border-radius: 12px; background: var(--cream); color: var(--ink); font-size: 18px; line-height: 1.65; }
.dash-blogs .blog-prose pre { overflow-x: auto; margin: 28px 0; padding: 18px 20px; border-radius: 10px; background: var(--ink); color: #fff; font: 400 13px/1.65 "Roboto Mono", monospace; }
.dash-blogs .blog-prose a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dash-blogs .blog-prose img,
.dash-blogs .blog-prose video { display: block; max-width: 100%; height: auto; margin: 28px auto; border-radius: 10px; }
.dash-blogs .blog-prose .ql-align-center { text-align: center; }
.dash-blogs .blog-prose .ql-align-right { text-align: right; }
.dash-blogs .blog-prose .ql-align-justify { text-align: justify; }

/* Confirmation routes -------------------------------------- */
.dash-blogs.blog-confirm-page { min-height: 0; padding: 0 !important; }
.dash-blogs .blog-confirm-layer { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 10, 10, .55); }
.dash-blogs .blog-confirm { display: flex; flex-direction: column; align-items: stretch; gap: 18px; width: 100%; max-width: 376px; padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: none; text-align: left !important; }
.dash-blogs .blog-confirm__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--brand); color: var(--ink); }
.dash-blogs .blog-confirm__icon svg { flex: 0 0 auto; }
.dash-blogs .blog-confirm--danger .blog-confirm__icon { background: var(--danger); color: var(--ink); }
.dash-blogs .blog-confirm__copy { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left !important; }
.dash-blogs .blog-confirm__eyebrow { margin: 0; color: var(--text-muted); font: 700 9px/12px "Roboto Mono", monospace; letter-spacing: .08em; text-transform: uppercase; text-align: left !important; }
.dash-blogs .blog-confirm h1 { width: 100%; margin: 0; color: var(--ink); font: 800 22px/26px "Roboto", sans-serif !important; letter-spacing: -.01em; text-align: left !important; text-transform: none !important; }
.dash-blogs .blog-confirm #blog-confirm-copy { width: 100%; margin: 0 !important; color: var(--text-soft); font: 400 13px/20px "Roboto", sans-serif !important; text-align: left !important; }
.dash-blogs .blog-confirm p.blog-confirm__target { display: block; width: 100%; max-width: none; margin: 0 !important; padding: 14px 16px !important; border-radius: 10px; background: var(--cream); color: var(--ink); font: 700 13px/18px "Roboto", sans-serif !important; text-align: left !important; overflow-wrap: anywhere; word-break: normal; }
.dash-blogs .blog-confirm__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; padding-top: 4px; }

@media (max-width: 1100px) {
  .dash-blogs .blog-form-layout { grid-template-columns: 1fr; }
  .dash-blogs .blog-guide { position: static; }
}

@media (max-width: 767px) {
  .dash-blogs { padding: 24px 18px 56px !important; }
  .dash-blogs .blog-board { gap: 24px; }
  .dash-blogs .jb-head { flex-direction: column; }
  .dash-blogs .jb-head .jb-cta { width: 100%; justify-content: center; }
  .dash-blogs h1.jb-title { font-size: 32px !important; line-height: 38px !important; }
  .dash-blogs .blog-list-card { padding: 22px 18px !important; }
  .dash-blogs .jb-card__head { flex-direction: column; }
  .dash-blogs .jb-search { width: 100%; }
  .dash-blogs .blog-table-wrap { overflow: visible; }
  .dash-blogs .blog-table,
  .dash-blogs .blog-table tbody { display: block; width: 100%; }
  .dash-blogs .blog-table thead { display: none; }
  .dash-blogs .blog-table tr { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
  .dash-blogs .blog-table tr:last-child { margin-bottom: 0; }
  .dash-blogs .blog-table td { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; width: 100%; padding: 0 !important; border: 0 !important; text-align: left !important; }
  .dash-blogs .blog-table td::before { color: var(--text-muted); content: attr(data-label); font: 500 10px/14px "Roboto Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
  .dash-blogs .blog-table td:first-child { display: block; padding-bottom: 14px !important; border-bottom: 1px solid var(--cream-deep) !important; }
  .dash-blogs .blog-table td:first-child::before { display: none; }
  .dash-blogs .blog-table td .jb-pill { justify-self: start; }
  .dash-blogs .blog-article-description { max-width: none; white-space: normal; }
  .dash-blogs .blog-row-actions { justify-content: stretch; }
  .dash-blogs .blog-row-actions .jb-act { flex: 1 1 0; }
  .dash-blogs .blog-menu__button { width: 44px; height: 44px; }
  .dash-blogs .blog-menu__panel { bottom: calc(100% + 7px); top: auto; }
  .dash-blogs .jb-pager-row { align-items: flex-start; flex-direction: column; }
  .dash-blogs .jb-pager { flex-wrap: wrap; }
  .dash-blogs .blog-form-card { padding: 26px 20px; }
  .dash-blogs .blog-toolbar.ql-toolbar.ql-snow { flex-wrap: nowrap; overflow-x: auto; }
  .dash-blogs .blog-form-footer { align-items: stretch; flex-direction: column; }
  .dash-blogs .blog-form-footer .blog-button { width: 100% !important; }
  .dash-blogs .blog-article-head { padding: 28px 22px; }
  .dash-blogs .blog-article-head__top { flex-direction: column; }
  .dash-blogs .blog-article-head h1 { font-size: 31px; line-height: 38px; }
  .dash-blogs .blog-article-actions { width: 100%; }
  .dash-blogs .blog-article-actions > .blog-button { flex: 1 1 auto; }
  .dash-blogs .blog-reading-surface { padding: 42px 22px 54px; }
  .dash-blogs .blog-lead { font-size: 18px; line-height: 28px; }
  .dash-blogs .blog-prose { font-size: 15px; }
  .dash-blogs .blog-confirm__actions { align-items: stretch; flex-direction: column-reverse; }
  .dash-blogs .blog-confirm__actions .blog-button { width: 100% !important; }
}

@media (max-width: 420px) {
  .dash-blogs .blog-table td { grid-template-columns: 76px minmax(0, 1fr); }
  .dash-blogs .blog-form-card { padding: 22px 16px; }
  .dash-blogs .blog-section-heading { gap: 10px; }
  .dash-blogs .blog-confirm-layer { padding: 16px; }
  .dash-blogs .blog-confirm { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-blogs *,
  .dash-blogs *::before,
  .dash-blogs *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   .dash-employee-job — employee opportunity + applied-job detail
   (user-view-job-new / user-view-applied-job-detailsTest)
   Candidate-facing hierarchy derived from the employer job detail
   and the public opportunity reader. Both routes share one partial.
   ============================================================ */
.dash-employee-job {
  --brand:#C5F154; --ink:#0A0A0A; --cream:#F5F1E8; --cream-2:#F0EBDC;
  --text-soft:#4B5563; --text-muted:#6B7280; --text-disabled:#9CA3AF;
  --border:#E5E7EB; --page:#FAFAF7;
  color:var(--ink); font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
}
.dash-employee-job,
.dash-employee-job *,
.dash-employee-job *::before,
.dash-employee-job *::after { box-sizing:border-box; }
.dash-employee-job * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif; }
.dash-employee-job h1,
.dash-employee-job h2,
.dash-employee-job h3,
.dash-employee-job p,
.dash-employee-job dl,
.dash-employee-job dt,
.dash-employee-job dd { margin:0 !important; padding:0 !important; letter-spacing:normal; text-transform:none; text-align:left; }
.dash-employee-job section { margin:0 !important; }

.dash-employee-job .ej-board { display:flex; flex-direction:column; gap:32px; width:100%; max-width:1180px; margin:0 auto; padding:8px 0 64px; }
.dash-employee-job .ej-head { display:flex; flex-direction:column; width:100%; margin:0 !important; padding:0 !important; }
.dash-employee-job .ej-head__top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.dash-employee-job .ej-eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-width:0; }
.dash-employee-job .ej-chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:4px; background:var(--ink); color:var(--brand); font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:14px; letter-spacing:.1em; text-transform:uppercase; }
.dash-employee-job .ej-crumb { color:var(--text-muted); font-family:"Roboto Mono",monospace !important; font-size:11px; font-weight:500; line-height:14px; letter-spacing:.06em; text-transform:uppercase; }
.dash-employee-job .ej-back { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; min-height:40px; padding:10px 16px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text-soft) !important; font-size:14px; font-weight:500; line-height:18px; text-decoration:none !important; }
.dash-employee-job .ej-back:hover { border-color:var(--ink); color:var(--ink) !important; }
.dash-employee-job .ej-back svg { flex:0 0 auto; }
.dash-employee-job .ej-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.dash-employee-job h1.ej-title { color:var(--ink); font-size:40px !important; font-weight:800 !important; line-height:46px !important; letter-spacing:-.02em !important; }
.dash-employee-job p.ej-summary { max-width:760px; margin-top:12px !important; color:var(--text-soft); font-size:15px; font-weight:400; line-height:24px; }
.dash-employee-job .ej-status { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:12px; letter-spacing:.08em; text-transform:uppercase; }
.dash-employee-job .ej-status__dot { width:6px; height:6px; flex:0 0 auto; border-radius:999px; }
.dash-employee-job .ej-status--active { background:var(--ink); color:var(--brand); }
.dash-employee-job .ej-status--active .ej-status__dot { background:var(--brand); }
.dash-employee-job .ej-status--muted { border:1px solid var(--border); background:#fff; color:var(--text-muted); }
.dash-employee-job .ej-status--muted .ej-status__dot { background:var(--text-disabled); }

.dash-employee-job .ej-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:26px; border-top:1px solid var(--cream-2); border-bottom:1px solid var(--cream-2); }
.dash-employee-job .ej-fact { display:flex; flex-direction:column; gap:7px; min-width:0; padding:20px 22px; border-right:1px solid var(--cream-2); }
.dash-employee-job .ej-fact:first-child { padding-left:0; }
.dash-employee-job .ej-fact:last-child { border-right:0; }
.dash-employee-job .ej-fact__label { color:var(--text-disabled); font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:12px; letter-spacing:.12em; text-transform:uppercase; }
.dash-employee-job .ej-fact__value { color:var(--ink); font-size:14px; font-weight:600; line-height:20px; overflow-wrap:anywhere; }

.dash-employee-job .ej-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.dash-employee-job .ej-main { min-width:0; }
.dash-employee-job .ej-role-card { overflow:hidden; width:100%; padding:0 36px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.dash-employee-job .ej-section { display:flex; flex-direction:column; gap:22px; padding:32px 0 !important; border-bottom:1px solid var(--cream-2); }
.dash-employee-job .ej-section--last { border-bottom:0; }
.dash-employee-job .ej-section__head { display:flex; align-items:center; gap:18px; }
.dash-employee-job .ej-section__number { color:var(--text-disabled); font-family:"Roboto Mono",monospace !important; font-size:12px; font-weight:600; line-height:16px; letter-spacing:.18em; }
.dash-employee-job .ej-section__rule { height:1px; flex:1 1 auto; background:var(--cream-2); }
.dash-employee-job h2.ej-section__title { flex:0 1 auto; color:var(--ink); font-size:14px !important; font-weight:600 !important; line-height:18px !important; letter-spacing:.02em !important; }
.dash-employee-job .ej-prose { display:flex; flex-direction:column; gap:14px; }
.dash-employee-job .ej-prose p,
.dash-employee-job p.ej-section__copy { color:var(--text-soft); font-size:15px; font-weight:400; line-height:25px; white-space:pre-line; overflow-wrap:anywhere; }

.dash-employee-job .ej-numbered-list { display:flex; flex-direction:column; }
.dash-employee-job .ej-numbered-list__item { display:grid; grid-template-columns:42px minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--cream-2); }
.dash-employee-job .ej-numbered-list__item:first-child { padding-top:0; }
.dash-employee-job .ej-numbered-list__item:last-child { padding-bottom:0; border-bottom:0; }
.dash-employee-job .ej-numbered-list__number { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:var(--cream); color:var(--ink); font-family:"Roboto Mono",monospace !important; font-size:11px; font-weight:600; line-height:14px; }
.dash-employee-job .ej-numbered-list__copy { padding-top:5px; color:var(--text-soft); font-size:15px; font-weight:400; line-height:25px; overflow-wrap:anywhere; }

.dash-employee-job .ej-requirements { display:flex; flex-direction:column; gap:14px; }
.dash-employee-job .ej-requirement { display:grid; grid-template-columns:10px minmax(0,1fr); gap:12px; align-items:start; }
.dash-employee-job .ej-requirement__dot { width:5px; height:5px; margin-top:10px; border-radius:999px; background:var(--ink); }
.dash-employee-job .ej-requirement__copy { color:var(--text-soft); font-size:15px; font-weight:400; line-height:25px; overflow-wrap:anywhere; }
.dash-employee-job .ej-skills { display:flex; flex-direction:column; gap:12px; padding-top:22px; border-top:1px solid var(--cream-2); }
.dash-employee-job .ej-skills__label { color:var(--text-disabled); font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:12px; letter-spacing:.12em; text-transform:uppercase; }
.dash-employee-job .ej-chips { display:flex; flex-wrap:wrap; gap:8px; }
.dash-employee-job .ej-value-chip { display:inline-flex !important; align-items:center; max-width:100%; padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:#fff; color:var(--ink); font-size:13px; font-weight:500; line-height:16px; overflow-wrap:anywhere; }

.dash-employee-job .ej-benefits { display:grid; grid-template-columns:minmax(200px,.85fr) minmax(0,1.15fr); gap:28px; margin:0 -36px !important; padding:30px 36px !important; background:var(--ink); }
.dash-employee-job .ej-benefits__copy { display:flex; flex-direction:column; gap:10px; }
.dash-employee-job .ej-benefits__eyebrow { color:var(--brand); font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:14px; letter-spacing:.1em; text-transform:uppercase; }
.dash-employee-job h2.ej-benefits__title { color:#fff; font-size:22px !important; font-weight:800 !important; line-height:28px !important; letter-spacing:-.01em !important; }
.dash-employee-job .ej-benefits__items { display:flex; flex-wrap:wrap; align-content:center; gap:8px; }
.dash-employee-job .ej-benefit { display:inline-flex; align-items:center; max-width:100%; padding:7px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; font-size:13px; font-weight:500; line-height:17px; overflow-wrap:anywhere; }

.dash-employee-job .ej-aside { position:sticky; top:20px; display:flex; flex-direction:column; gap:18px; }
.dash-employee-job .ej-action-card,
.dash-employee-job .ej-details-card { display:flex; flex-direction:column; gap:18px; width:100%; padding:24px !important; border-radius:18px; }
.dash-employee-job .ej-action-card { border:1px solid var(--ink); background:var(--ink); }
.dash-employee-job .ej-action-card__eyebrow { color:var(--brand); font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:14px; letter-spacing:.1em; text-transform:uppercase; }
.dash-employee-job h2.ej-action-card__title { color:#fff; font-size:22px !important; font-weight:800 !important; line-height:28px !important; letter-spacing:-.01em !important; }
.dash-employee-job p.ej-action-card__copy { color:#D1D5DB; font-size:13px; font-weight:400; line-height:20px; }
.dash-employee-job .ej-apply-form { width:100%; margin:0; }
.dash-employee-job .ej-primary { display:inline-flex !important; align-items:center; justify-content:center; width:100% !important; min-height:42px; padding:11px 18px !important; border:0 !important; border-radius:10px !important; background:var(--brand) !important; color:var(--ink) !important; font-family:"Roboto",sans-serif !important; font-size:14px !important; font-weight:600 !important; line-height:18px !important; letter-spacing:normal !important; text-decoration:none !important; cursor:pointer; }
.dash-employee-job .ej-primary:hover { background:#B8E83C !important; color:var(--ink) !important; }
.dash-employee-job .ej-application-state { display:inline-flex; align-items:center; align-self:flex-start; gap:7px; padding:6px 11px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#fff; font-family:"Roboto Mono",monospace !important; font-size:10px; font-weight:600; line-height:12px; letter-spacing:.08em; text-transform:uppercase; }
.dash-employee-job .ej-application-state__dot { width:6px; height:6px; border-radius:999px; background:var(--brand); }

.dash-employee-job .ej-details-card { border:1px solid var(--border); background:#fff; }
.dash-employee-job .ej-details-card__eyebrow { color:var(--text-disabled); font-family:"Roboto Mono",monospace !important; font-size:11px; font-weight:500; line-height:14px; letter-spacing:.1em; text-transform:uppercase; }
.dash-employee-job .ej-detail-list { display:flex; flex-direction:column; }
.dash-employee-job .ej-detail { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--cream-2); }
.dash-employee-job .ej-detail:first-child { padding-top:0; }
.dash-employee-job .ej-detail:last-child { padding-bottom:0; border-bottom:0; }
.dash-employee-job .ej-detail dt { color:var(--text-muted); font-size:13px; font-weight:400; line-height:18px; }
.dash-employee-job .ej-detail dd { max-width:58%; color:var(--ink); font-size:13px; font-weight:600; line-height:18px; text-align:right !important; overflow-wrap:anywhere; }

.dash-employee-job .ej-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:48px 28px; border:1px dashed #D8CFB8; border-radius:14px; background:var(--cream); text-align:center; }
.dash-employee-job .ej-empty__icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); border-radius:999px; background:#fff; color:var(--text-muted); }
.dash-employee-job h2.ej-empty__title { color:var(--ink); font-size:22px !important; font-weight:800 !important; line-height:26px !important; text-align:center !important; }
.dash-employee-job p.ej-empty__copy { max-width:440px; color:var(--text-muted); font-size:14px; font-weight:400; line-height:22px; text-align:center !important; }

@media (max-width:1024px) {
  .dash-employee-job .ej-layout { grid-template-columns:1fr; }
  .dash-employee-job .ej-aside { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:720px) {
  .dash-employee-job .ej-board { padding:8px 4px 56px; }
  .dash-employee-job .ej-head__top { align-items:flex-start; flex-direction:column; }
  .dash-employee-job .ej-back { width:100%; justify-content:center; }
  .dash-employee-job h1.ej-title { font-size:30px !important; line-height:36px !important; }
  .dash-employee-job .ej-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dash-employee-job .ej-fact { padding:16px 14px; border-bottom:1px solid var(--cream-2); }
  .dash-employee-job .ej-fact:nth-child(2n) { border-right:0; }
  .dash-employee-job .ej-fact:nth-last-child(-n+2) { border-bottom:0; }
  .dash-employee-job .ej-fact:first-child { padding-left:14px; }
  .dash-employee-job .ej-role-card { padding:0 20px; }
  .dash-employee-job .ej-section { padding:26px 0 !important; }
  .dash-employee-job .ej-section__head { gap:10px; }
  .dash-employee-job .ej-benefits { grid-template-columns:1fr; margin:0 -20px !important; padding:26px 20px !important; }
  .dash-employee-job .ej-aside { display:flex; }
}

@media (max-width:420px) {
  .dash-employee-job .ej-facts { grid-template-columns:1fr; }
  .dash-employee-job .ej-fact,
  .dash-employee-job .ej-fact:nth-child(2n),
  .dash-employee-job .ej-fact:nth-last-child(-n+2) { padding:14px 0; border-right:0; border-bottom:1px solid var(--cream-2); }
  .dash-employee-job .ej-fact:last-child { border-bottom:0; }
  .dash-employee-job .ej-numbered-list__item { grid-template-columns:36px minmax(0,1fr); gap:12px; }
}

/* Employer-owned read-only employee/applicant profiles. These views deliberately
   extend .dash-me so own, employee and applicant profiles share one visual law. */
.dash-person-profile h1.me-name { font-size:40px !important; line-height:46px !important; }
.dash-person-profile .me-panel__val { max-width:62%; text-align:right !important; overflow-wrap:anywhere; }
.dash-person-profile .person-chart { position:relative; width:100%; min-height:260px; height:260px; }
.dash-person-profile .person-chart canvas { width:100% !important; height:260px !important; }
.dash-person-profile .person-team-list { display:flex; flex-direction:column; gap:0; }
.dash-person-profile .person-team-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.dash-person-profile .person-team-row:first-child { padding-top:0; }
.dash-person-profile .person-team-row:last-child { padding-bottom:0; border-bottom:0; }
.dash-person-profile .person-team-avatar { display:block; object-fit:cover; }
.dash-employee-record { margin:0 !important; }
.dash-employee-record .employee-record-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.dash-employee-record .employee-record-item { display:flex; flex-direction:column; gap:6px; min-width:0; padding:18px 20px; border:1px solid var(--border); border-radius:12px; background:#FAFAF7; }
.dash-employee-record .employee-record-item strong { color:var(--ink); font-size:15px; font-weight:600; line-height:22px; overflow-wrap:anywhere; }
#css-only-modals.set-success .lib-success__card { position:relative; align-items:flex-start; text-align:left; padding:28px; }
#css-only-modals.set-success .lib-success__card h5,
#css-only-modals.set-success .lib-success__card p { text-align:left !important; }
#css-only-modals.set-success .lib-success__actions { justify-content:flex-start; }
#css-only-modals.set-success .set-success__close { position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:999px; background:#F3F4F6; color:#6B7280; font-size:20px; line-height:1; cursor:pointer; }
.dash-reference-detail h1.reference-detail-title { margin:0 !important; color:var(--ink); font-size:40px !important; font-weight:800 !important; line-height:46px !important; letter-spacing:-.02em !important; }
.dash-reference-detail p.reference-detail-subtitle { margin:0 !important; color:var(--text-muted); font-family:"Roboto Mono",monospace !important; font-size:11px !important; font-weight:500; line-height:16px !important; letter-spacing:.06em !important; text-transform:uppercase !important; }
.dash-reference-detail .reference-score { flex:0 0 auto; color:var(--ink); font-family:"Roboto Mono",monospace !important; font-size:12px; font-weight:600; line-height:16px; }
.dash-reference-detail .reference-notes { display:flex; flex-direction:column; gap:0; }
.dash-reference-detail .reference-note { display:flex; flex-direction:column; gap:6px; padding:14px 0; border-bottom:1px solid var(--border); }
.dash-reference-detail .reference-note:first-child { padding-top:0; }
.dash-reference-detail .reference-note:last-child { padding-bottom:0; border-bottom:0; }
.dash-reference-detail .reference-note p { margin:0 !important; color:var(--soft-ink); font-size:14px !important; line-height:22px !important; }
.admin-profile-shell { width:100%; min-height:100vh; background:#FAFAF7; }
.admin-profile-shell__bar { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; padding:14px 56px; border-bottom:1px solid #E5E7EB; background:#fff; font-family:"Roboto",sans-serif; }
.admin-profile-shell__brand { display:inline-flex; align-items:center; }
.admin-profile-shell__brand img { display:block; width:auto; height:34px; }
.admin-profile-shell__nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.admin-profile-shell__nav a { display:inline-flex; align-items:center; min-height:38px; padding:9px 13px; border:1px solid #E5E7EB; border-radius:999px; color:#0A0A0A; font-size:13px; font-weight:500; line-height:18px; text-decoration:none !important; }
.admin-profile-shell__nav a:hover { border-color:#0A0A0A; color:#0A0A0A; }
@media (max-width:720px) {
  .dash-person-profile h1.me-name { font-size:30px !important; line-height:36px !important; }
  .dash-person-profile .me-panel__row { align-items:flex-start; }
  .dash-person-profile .me-panel__val { max-width:56%; }
  .dash-person-profile .person-chart { min-height:220px; height:220px; }
  .dash-person-profile .person-chart canvas { height:220px !important; }
  .dash-employee-record .employee-record-grid { grid-template-columns:1fr; }
  .dash-reference-detail h1.reference-detail-title { font-size:30px !important; line-height:36px !important; }
  .admin-profile-shell__bar { align-items:flex-start; flex-direction:column; padding:14px 24px; }
  .admin-profile-shell__nav { width:100%; }
}
/* ================================================================
   AUTHENTICATED EMPLOYEE TASKS
   Employee task list/detail only. Keeps the nested legacy documents and
   Bootstrap presentation from leaking into the V2 employee shell.
   ================================================================ */
.dash-employee-tasks .task-reskin-grid { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start; }
.dash-employee-tasks .task-filter-card,
.dash-employee-tasks .task-list-card { background:#fff; border:1px solid #E5E7EB; border-radius:18px; }
.dash-employee-tasks .task-filter-card { padding:20px; }
.dash-employee-tasks .task-list-card { padding:22px; min-height:280px; overflow:visible; }
.dash-employee-tasks .task-filter-card__eyebrow,
.dash-employee-tasks .task-list-card__eyebrow { display:block; margin-bottom:8px; color:#9CA3AF; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.dash-employee-tasks .task-filter-card__title,
.dash-employee-tasks .task-list-card__title { margin:0 0 18px; color:#0A0A0A; font-size:20px; line-height:26px; font-weight:700; }
.dash-employee-tasks .task-filter-group { margin-bottom:20px; }
.dash-employee-tasks .task-filter-group:last-child { margin-bottom:0; }
.dash-employee-tasks .task-filter-label { display:block; margin-bottom:10px; color:#4B5563; font-size:13px; line-height:18px; font-weight:700; }
.dash-employee-tasks .task-filter-list { display:grid; gap:6px; }
.dash-employee-tasks .task-filter-link { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:9px 12px; border:1px solid transparent; border-radius:10px; background:#F8F9FB; color:#0A0A0A !important; font-size:13px; line-height:18px; font-weight:600; text-decoration:none !important; }
.dash-employee-tasks .task-filter-link:hover { border-color:#E5E7EB; background:#fff; }
.dash-employee-tasks .task-filter-link.active { border-color:#0A0A0A; background:#0A0A0A; color:#C5F154 !important; }
.dash-employee-tasks .task-list-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
.dash-employee-tasks .task-count-pill { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:6px 10px; border:1px solid #E5E7EB; border-radius:999px; background:#fff; color:#4B5563; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.dash-employee-tasks .alert-info { margin:0; padding:28px; border:1px dashed #D1D5DB; border-radius:14px; background:#F8F9FB; color:#4B5563; font-size:14px; line-height:22px; }
.dash-employee-tasks .table-responsive { margin:0 -22px -22px; overflow:visible; }
.dash-employee-tasks table.table { width:100%; margin:0; border-collapse:collapse; table-layout:fixed; }
.dash-employee-tasks table.table th:nth-child(1) { width:34%; }
.dash-employee-tasks table.table th:nth-child(2) { width:22%; }
.dash-employee-tasks table.table th:nth-child(3) { width:14%; }
.dash-employee-tasks table.table th:nth-child(4) { width:11%; }
.dash-employee-tasks table.table th:nth-child(5) { width:12%; }
.dash-employee-tasks table.table th:nth-child(6) { width:7%; }
.dash-employee-tasks table.table thead th { padding:14px 16px; border:0; border-bottom:1px solid #E5E7EB; background:#F8F9FB; color:#6B7280; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.dash-employee-tasks table.table tbody td { padding:16px 12px; border-color:#EEF0F3; color:#0A0A0A; font-size:13px; line-height:18px; vertical-align:middle; white-space:normal; overflow-wrap:anywhere; }
.dash-employee-tasks table.table h5 { margin:0 0 3px; color:#0A0A0A; font-size:14px; line-height:19px; font-weight:700; }
.dash-employee-tasks table.table .text { color:#6B7280; font-size:12px; line-height:17px; }
.dash-employee-tasks table.table .badge.status { padding:5px 9px; border:1px solid #E5E7EB; border-radius:999px; background:#fff !important; color:#4B5563 !important; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.04em; }
.dash-employee-tasks table.table .badge.status.completed { border-color:#0A0A0A; background:#0A0A0A !important; color:#C5F154 !important; }
.dash-employee-tasks .modal-content,
.dash-employee-tasks-modal .modal-content { border:1px solid #E5E7EB; border-radius:18px; box-shadow:0 24px 64px rgba(10,10,10,.18); }
.dash-employee-tasks .modal-header,
.dash-employee-tasks .modal-body,
.dash-employee-tasks .modal-footer,
.dash-employee-tasks-modal .modal-header,
.dash-employee-tasks-modal .modal-body,
.dash-employee-tasks-modal .modal-footer { padding:20px 22px; }
.dash-employee-tasks .modal-title,
.dash-employee-tasks-modal .modal-title { font-size:20px; line-height:26px; font-weight:700; }
.dash-employee-tasks .modal .form-group,
.dash-employee-tasks-modal .form-group { margin-bottom:16px; }
.dash-employee-tasks .modal .form-label,
.dash-employee-tasks-modal .form-label { margin-bottom:7px; font-size:13px; line-height:18px; font-weight:700; }
.dash-employee-tasks .modal .form-control,
.dash-employee-tasks .modal .form-select,
.dash-employee-tasks-modal .form-control,
.dash-employee-tasks-modal .form-select { border-color:#D1D5DB; border-radius:10px; }
.dash-employee-tasks .modal-footer .bttn,
.dash-employee-tasks-modal .modal-footer .bttn { min-height:40px; padding:9px 14px; border-radius:10px; }

.dash-employee-task-detail section { margin:0; }
.dash-employee-task-detail .pd-head { max-width:850px; }
.dash-employee-task-detail .etd-back { display:inline-flex; align-items:center; width:fit-content; min-height:40px; margin-top:4px; padding:9px 14px; border:1px solid #E5E7EB; border-radius:10px; background:#fff; color:#0A0A0A !important; font-size:13px; line-height:18px; font-weight:600; text-decoration:none !important; }
.dash-employee-task-detail .etd-summary { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:18px; align-items:start; }
.dash-employee-task-detail .etd-card { min-width:0; padding:24px; border:1px solid #E5E7EB; border-radius:18px; background:#fff; }
.dash-employee-task-detail .etd-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.dash-employee-task-detail .etd-card h2 { margin:4px 0 0; color:#0A0A0A; font-size:20px; line-height:26px; font-weight:700; letter-spacing:-.01em; }
.dash-employee-task-detail .etd-label { display:block; color:#9CA3AF; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.dash-employee-task-detail .etd-status,
.dash-employee-task-detail .etd-priority,
.dash-employee-task-detail .etd-count { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:6px 10px; border:1px solid #E5E7EB; border-radius:999px; background:#fff; color:#4B5563; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.dash-employee-task-detail .etd-status > span { width:7px; height:7px; border-radius:50%; background:#9CA3AF; }
.dash-employee-task-detail .etd-status[data-status="Completed"] { border-color:#0A0A0A; background:#0A0A0A; color:#C5F154; }
.dash-employee-task-detail .etd-status[data-status="Completed"] > span { background:#C5F154; }
.dash-employee-task-detail .etd-notice { margin-bottom:18px; padding:14px 16px; border-left:3px solid #0A0A0A; background:#F8F9FB; }
.dash-employee-task-detail .etd-notice strong { font-size:13px; line-height:18px; }
.dash-employee-task-detail .etd-notice p { margin:3px 0 0; color:#4B5563; font-size:13px; line-height:20px; }
.dash-employee-task-detail .etd-meta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 20px; }
.dash-employee-task-detail .etd-meta-grid > div,
.dash-employee-task-detail .etd-detail-list > div { padding:14px; border:1px solid #EEF0F3; border-radius:12px; background:#F8F9FB; }
.dash-employee-task-detail dt { margin:0 0 5px; color:#9CA3AF; font-family:"Roboto Mono",monospace !important; font-size:9px; line-height:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.dash-employee-task-detail dd { margin:0; color:#0A0A0A; font-size:13px; line-height:18px; font-weight:600; }
.dash-employee-task-detail .etd-primary { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border:1px solid #0A0A0A; border-radius:10px; background:#0A0A0A; color:#C5F154; font-size:14px; line-height:18px; font-weight:700; }
.dash-employee-task-detail .etd-detail-list { display:grid; gap:10px; margin:0; }
.dash-employee-task-detail .etd-linked { margin-top:16px; padding:16px; border:1px solid #E5E7EB; border-radius:14px; background:#fff; }
.dash-employee-task-detail .etd-linked strong { display:block; margin-top:6px; color:#0A0A0A; font-size:14px; line-height:19px; }
.dash-employee-task-detail .etd-linked p { margin:4px 0 10px; color:#4B5563; font-size:13px; line-height:20px; }
.dash-employee-task-detail .etd-linked a { color:#0A0A0A !important; font-size:13px; line-height:18px; font-weight:700; }
.dash-employee-task-detail .etd-history { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.dash-employee-task-detail .etd-history li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; padding:15px 0; border-bottom:1px solid #EEF0F3; }
.dash-employee-task-detail .etd-history li:last-child { border-bottom:0; }
.dash-employee-task-detail .etd-history__dot { width:9px; height:9px; margin-top:5px; border:2px solid #0A0A0A; border-radius:50%; background:#C5F154; }
.dash-employee-task-detail .etd-history__head,
.dash-employee-task-detail .etd-comment__head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dash-employee-task-detail .etd-history__head strong,
.dash-employee-task-detail .etd-comment__head strong { color:#0A0A0A; font-size:13px; line-height:18px; }
.dash-employee-task-detail time { color:#9CA3AF; font-family:"Roboto Mono",monospace !important; font-size:9px; line-height:12px; }
.dash-employee-task-detail .etd-history p,
.dash-employee-task-detail .etd-comment p { margin:5px 0 0; color:#4B5563; font-size:13px; line-height:20px; }
.dash-employee-task-detail .etd-empty { padding:24px; border:1px dashed #D1D5DB; border-radius:14px; background:#F8F9FB; text-align:center; }
.dash-employee-task-detail .etd-empty strong { color:#0A0A0A; font-size:14px; line-height:20px; }
.dash-employee-task-detail .etd-empty p { margin:4px 0 0; color:#6B7280; font-size:13px; line-height:20px; }
.dash-employee-task-detail .etd-files { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.dash-employee-task-detail .etd-files a { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:10px 12px; border:1px solid #E5E7EB; border-radius:10px; color:#0A0A0A !important; font-size:13px; line-height:18px; font-weight:600; text-decoration:none !important; }
.dash-employee-task-detail .etd-comment-list { display:grid; gap:10px; margin-bottom:18px; }
.dash-employee-task-detail .etd-comment { padding:14px 16px; border:1px solid #EEF0F3; border-radius:12px; background:#F8F9FB; }
.dash-employee-task-detail .etd-comment-form { display:grid; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid #E5E7EB; }
.dash-employee-task-detail .etd-comment-form label { color:#0A0A0A; font-size:13px; line-height:18px; font-weight:700; }
.dash-employee-task-detail .etd-comment-form textarea { width:100%; padding:11px 12px; border:1px solid #D1D5DB; border-radius:10px; color:#0A0A0A; font:400 14px/21px "Roboto",sans-serif; resize:vertical; }
.dash-employee-task-detail .etd-comment-form .etd-primary { justify-self:start; }
.dash-employee-task-modal .modal-content { overflow:hidden; border:1px solid #E5E7EB; border-radius:18px; box-shadow:0 24px 64px rgba(10,10,10,.18); }
.dash-employee-task-modal .modal-header,
.dash-employee-task-modal .modal-body,
.dash-employee-task-modal .modal-footer { padding:20px 22px; }
.dash-employee-task-modal .modal-title { color:#0A0A0A; font-size:20px; line-height:26px; font-weight:700; }
.dash-employee-task-modal .form-label { color:#0A0A0A; font-size:13px; line-height:18px; font-weight:700; }
.dash-employee-task-modal .form-control,
.dash-employee-task-modal .form-select { border-color:#D1D5DB; border-radius:10px; }
.dash-employee-task-modal .btn { min-height:40px; padding:9px 14px; border-radius:10px; font-size:13px; font-weight:700; }
.dash-employee-task-modal .btn-secondary { border-color:#D1D5DB; background:#fff; color:#0A0A0A; }
.dash-employee-task-modal .btn-primary { border-color:#0A0A0A; background:#0A0A0A; color:#C5F154; }
.dash-employee-task-status-dialog {
  --project-brand:#C5F154;
  --project-ink:#0A0A0A;
  --project-muted:#6B7280;
  --project-disabled:#9CA3AF;
  --project-border:#E5E7EB;
}
@media (max-width:991px) {
  .dash-employee-tasks .task-reskin-grid,
  .dash-employee-task-detail .etd-summary { grid-template-columns:minmax(0,1fr); }
  .dash-employee-tasks .task-reskin-grid,
  .dash-employee-tasks .task-reskin-grid > * { min-width:0; width:100%; max-width:100%; }
  .dash-employee-tasks .table-responsive { margin:0; }
  .dash-employee-tasks table.table,
  .dash-employee-tasks table.table tbody,
  .dash-employee-tasks table.table tr,
  .dash-employee-tasks table.table td { display:block; width:100% !important; }
  .dash-employee-tasks table.table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .dash-employee-tasks table.table tbody { display:grid; gap:14px; }
  .dash-employee-tasks table.table tbody tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:15px 18px; padding:18px; border:1px solid #E5E7EB; border-radius:14px; background:#fff; }
  .dash-employee-tasks table.table tbody td { min-width:0; padding:0; border:0; }
  .dash-employee-tasks table.table tbody td::before { display:block; margin-bottom:6px; color:#9CA3AF; content:attr(data-label); font-family:"Roboto Mono",monospace !important; font-size:9px; line-height:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .dash-employee-tasks table.table tbody td:nth-child(1),
  .dash-employee-tasks table.table tbody td:nth-child(2) { grid-column:1 / -1; }
  .dash-employee-tasks table.table tbody td:nth-child(1) { padding-bottom:14px; border-bottom:1px solid #EEF0F3; }
  .dash-employee-tasks .dash-manage__menu { justify-content:flex-start; }
}
@media (max-width:575px) {
  .dash-employee-task-detail .etd-card { padding:18px; }
  .dash-employee-task-detail .etd-card__head,
  .dash-employee-task-detail .etd-history__head,
  .dash-employee-task-detail .etd-comment__head { align-items:flex-start; flex-direction:column; }
  .dash-employee-task-detail .etd-meta-grid { grid-template-columns:1fr; }
  .dash-employee-tasks .task-list-card { padding:18px; }
  .dash-employee-tasks .task-filter-card { padding:18px; }
  .dash-employee-tasks .task-filter-list { display:flex; gap:8px; overflow-x:auto; padding-bottom:3px; scrollbar-width:thin; }
  .dash-employee-tasks .task-filter-link { flex:0 0 auto; min-height:36px; padding:8px 11px; white-space:nowrap; }
  .dash-employee-tasks table.table tbody tr { grid-template-columns:1fr; }
  .dash-employee-tasks table.table tbody td,
  .dash-employee-tasks table.table tbody td:nth-child(1),
  .dash-employee-tasks table.table tbody td:nth-child(2) { grid-column:1; }
}

.dash-form.dash-achcreate,
.dash-form.dash-achcreate * { box-sizing:border-box; }

/* Legacy-routable profile photo body. The role-specific shell is selected by
   controllers; this component stays valid even when a legacy route falls back
   to the bare layout. */
.legacy-employee-v2-frame #page-content-wrapper { box-sizing:border-box; }
.dash-achcreate .invalid-feedback { display:none; color:#DC2626; font-size:12px; line-height:16px; }
.dash-achcreate .needs-validation.was-validated :invalid ~ .invalid-feedback { display:block; }
.dash-photo { --brand:#C5F154; --ink:#0A0A0A; --soft:#4B5563; --muted:#6B7280; --disabled:#9CA3AF; --border:#E5E7EB; width:min(calc(100% - 32px),860px); margin:0 auto; padding:36px 0 64px; color:var(--ink); font-family:"Roboto",sans-serif; }
.dash-photo, .dash-photo *, .dash-photo *::before, .dash-photo *::after { box-sizing:border-box; }
.dash-photo__head { margin:0 0 22px; }
.dash-photo__eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dash-photo__eyebrow span { padding:3px 8px; border-radius:4px; background:var(--ink); color:var(--brand); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.dash-photo__eyebrow em { color:var(--muted); font-family:"Roboto Mono",monospace; font-size:11px; line-height:14px; font-style:normal; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.dash-photo__head h1 { margin:0 0 10px; color:var(--ink); font-size:40px; line-height:46px; font-weight:800; letter-spacing:-.02em; }
.dash-photo__head p { margin:0; max-width:620px; color:var(--soft); font-size:15px; line-height:24px; }
.dash-photo__card { display:grid; gap:22px; padding:28px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.dash-photo__identity { display:flex; align-items:center; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--border); }
.dash-photo__avatar { display:flex; align-items:center; justify-content:center; width:68px; height:68px; flex:0 0 68px; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:#F8F9FB center/cover no-repeat; color:var(--ink); font-family:"Roboto Mono",monospace; font-size:19px; line-height:1; font-weight:800; }
.dash-photo__avatar.has-image span { display:none; }
.dash-photo__identity strong { display:block; margin-top:5px; color:var(--ink); font-size:18px; line-height:24px; font-weight:700; }
.dash-photo__label { display:block; color:var(--disabled); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.dash-photo__field { display:grid; gap:8px; }
.dash-photo__drop { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:190px; margin:0; padding:24px; border:1px dashed #D1D5DB; border-radius:14px; background:#F8F9FB; cursor:pointer; text-align:center; }
.dash-photo__drop:hover { border-color:var(--ink); background:#fff; }
.dash-photo__drop-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:12px; border-radius:12px; background:var(--ink); color:var(--brand); font-size:23px; line-height:1; font-weight:500; }
.dash-photo__drop strong { color:var(--ink); font-size:14px; line-height:20px; font-weight:700; }
.dash-photo__drop small { margin-top:4px; color:var(--muted); font-size:12px; line-height:18px; }
.dash-photo__input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.dash-photo__input:focus + * { outline:2px solid var(--ink); outline-offset:2px; }
.dash-photo__actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:2px; }
.dash-photo__cancel, .dash-photo__submit { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border-radius:10px; font-size:14px; line-height:18px; font-weight:700; text-decoration:none !important; }
.dash-photo__cancel { border:1px solid var(--border); background:#fff; color:var(--ink) !important; }
.dash-photo__submit { border:1px solid var(--ink); background:var(--ink); color:var(--brand); }

/* Routable Aspirant portfolio dashboard retained for old bookmarks. */
.dash-asp-projects { --brand:#C5F154; --ink:#0A0A0A; --soft:#4B5563; --muted:#6B7280; --disabled:#9CA3AF; --border:#E5E7EB; width:min(calc(100% - 40px),1420px); margin:0 auto; padding:36px 0 64px; color:var(--ink); font-family:"Roboto",sans-serif; }
.dash-asp-projects, .dash-asp-projects *, .dash-asp-projects *::before, .dash-asp-projects *::after { box-sizing:border-box; }
.dash-asp-projects section { margin:0; }
.dash-asp-projects__head { margin-bottom:22px; }
.dash-asp-projects__eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dash-asp-projects__eyebrow span { padding:3px 8px; border-radius:4px; background:var(--ink); color:var(--brand); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.dash-asp-projects__eyebrow em { color:var(--muted); font-family:"Roboto Mono",monospace; font-size:11px; line-height:14px; font-style:normal; letter-spacing:.06em; text-transform:uppercase; }
.dash-asp-projects__head h1 { margin:0 0 10px; color:var(--ink); font-size:40px; line-height:46px; font-weight:800; letter-spacing:-.02em; }
.dash-asp-projects__head > p { margin:0; max-width:720px; color:var(--soft); font-size:15px; line-height:24px; }
.dash-asp-projects__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.dash-asp-projects__primary, .dash-asp-projects__secondary { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border-radius:10px; font-size:14px; line-height:18px; font-weight:700; text-decoration:none !important; }
.dash-asp-projects__primary { border:1px solid var(--ink); background:var(--ink); color:var(--brand) !important; }
.dash-asp-projects__secondary { border:1px solid var(--border); background:#fff; color:var(--ink) !important; }
.dash-asp-projects__stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px !important; }
.dash-asp-projects__stats article { padding:20px 22px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.dash-asp-projects__stats span { display:block; color:var(--muted); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.dash-asp-projects__stats strong { display:block; margin-top:12px; color:var(--ink); font-size:32px; line-height:36px; font-weight:800; }
.dash-asp-projects__surface { overflow:hidden; border:1px solid var(--border); border-radius:18px; background:#fff; }
.dash-asp-projects__surface-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px; border-bottom:1px solid var(--border); }
.dash-asp-projects__surface-head span { color:var(--disabled); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.dash-asp-projects__surface-head h2 { margin:5px 0 0; color:var(--ink); font-size:20px; line-height:26px; font-weight:700; }
.dash-asp-projects__surface-head em { padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-style:normal; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.dash-asp-projects__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:22px; }
.dash-asp-projects__card { display:flex; flex-direction:column; min-width:0; padding:20px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.dash-asp-projects__card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dash-asp-projects__card-head span, .dash-asp-projects__card-head em { color:var(--disabled); font-family:"Roboto Mono",monospace; font-size:9px; line-height:12px; font-style:normal; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.dash-asp-projects__card h3 { margin:18px 0 8px; color:var(--ink); font-size:18px; line-height:24px; font-weight:700; }
.dash-asp-projects__card > p { margin:0 0 20px; color:var(--soft); font-size:13px; line-height:20px; }
.dash-asp-projects__card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid #EEF0F3; }
.dash-asp-projects__card-foot strong { color:var(--muted); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; }
.dash-asp-projects__card-foot a { color:var(--ink) !important; font-size:13px; line-height:18px; font-weight:700; }
.dash-asp-projects__empty { margin:22px; padding:44px 24px; border:1px dashed #D1D5DB; border-radius:14px; background:#F8F9FB; text-align:center; }
.dash-asp-projects__empty strong { color:var(--ink); font-size:18px; line-height:24px; }
.dash-asp-projects__empty p { margin:6px auto 18px; color:var(--muted); font-size:14px; line-height:21px; }
.dash-asp-projects__empty a { display:inline-flex; min-height:40px; padding:9px 14px; border-radius:10px; background:var(--ink); color:var(--brand) !important; font-size:13px; line-height:18px; font-weight:700; text-decoration:none !important; }
@media(max-width:991px) { .dash-asp-projects__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:575px) {
  .dash-photo { padding-top:24px; }
  .dash-photo__head h1, .dash-asp-projects__head h1 { font-size:32px; line-height:38px; }
  .dash-photo__card { padding:20px; }
  .dash-photo__actions { align-items:stretch; flex-direction:column-reverse; }
  .dash-asp-projects { width:min(calc(100% - 32px),1420px); padding-top:24px; }
  .dash-asp-projects__stats, .dash-asp-projects__grid { grid-template-columns:1fr; }
  .dash-asp-projects__grid { padding:16px; }
  .dash-asp-projects__surface-head { align-items:flex-start; flex-direction:column; }
}

/* Authenticated unregistered-company employee identity and achievement family.
   The uc-* primitives are deliberately scoped because these routes can render
   under either the employer default layout or the older user layout. */
.dash-uc {
  --uc-brand:#C5F154; --uc-ink:#0A0A0A; --uc-soft:#4B5563; --uc-muted:#6B7280;
  --uc-disabled:#9CA3AF; --uc-border:#E5E7EB; --uc-bg:#FAFAF7; --uc-cream:#F2F3EE;
  background:var(--uc-bg); color:var(--uc-ink); font-family:"Roboto",sans-serif;
}
.dash-uc, .dash-uc *, .dash-uc *::before, .dash-uc *::after { box-sizing:border-box; }
.dash-uc .uc-main h1,.dash-uc .uc-main h2,.dash-uc .uc-main h3,.dash-uc .uc-main p,.dash-uc .uc-main blockquote,.dash-uc .uc-main fieldset,.dash-uc .uc-main legend { margin:0; padding:0; }
.dash-uc #page-content-wrapper { min-height:100vh; background:var(--uc-bg); }
.dash-uc .uc-main { width:min(100%,1440px); margin:0 auto; padding:38px 40px 72px; }
.dash-uc .uc-main--narrow { max-width:900px; }
.dash-uc .uc-main--form { max-width:1160px; }
.dash-uc .uc-stack,.dash-uc .uc-form { display:flex; flex-direction:column; gap:18px; }
.dash-uc .uc-back { display:inline-flex; align-items:center; gap:7px; margin-bottom:24px; color:var(--uc-soft)!important; font-size:14px; line-height:20px; font-weight:500; text-decoration:none!important; }
.dash-uc .uc-back:hover { color:var(--uc-ink)!important; }
.dash-uc .uc-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:32px; margin-bottom:28px; }
.dash-uc .uc-page-head--compact { max-width:900px; }
.dash-uc .uc-page-head > div:first-child { min-width:0; }
.dash-uc .uc-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:13px; color:var(--uc-muted); font-family:"Roboto Mono",monospace; font-size:11px; line-height:16px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.dash-uc .uc-eyebrow > span { padding:3px 8px; border-radius:4px; background:var(--uc-ink); color:var(--uc-brand); font-size:10px; line-height:14px; letter-spacing:.1em; }
.dash-uc .uc-page-head h1 { max-width:930px; color:var(--uc-ink); font-family:"Roboto",sans-serif; font-size:46px!important; line-height:52px!important; font-weight:800!important; letter-spacing:-.025em; }
.dash-uc .uc-page-head p { max-width:720px; margin-top:12px; color:var(--uc-soft); font-size:15px; line-height:24px; }
.dash-uc .uc-card { min-width:0; padding:28px 30px; border:1px solid var(--uc-border); border-radius:18px; background:#fff; box-shadow:none; }
.dash-uc .uc-card--flush { padding:0; overflow:hidden; }
.dash-uc .uc-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.dash-uc .uc-card--flush > .uc-card-head { margin:0; padding:24px 28px; border-bottom:1px solid var(--uc-border); }
.dash-uc .uc-kicker { display:block; color:var(--uc-disabled); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.dash-uc .uc-card-head h2,.dash-uc .uc-numbered-head h2 { margin-top:5px; color:var(--uc-ink); font-family:"Roboto",sans-serif; font-size:21px!important; line-height:27px!important; font-weight:700!important; }
.dash-uc .uc-count { display:inline-flex; align-items:baseline; gap:5px; padding:8px 11px; border:1px solid var(--uc-border); border-radius:999px; color:var(--uc-muted); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.dash-uc .uc-count strong { color:var(--uc-ink); font-size:13px; }
.dash-uc .uc-stat { min-width:170px; padding:20px 22px; border-radius:18px; background:var(--uc-ink); }
.dash-uc .uc-stat > span { display:block; color:#AEB5BE; font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.dash-uc .uc-stat > strong { display:block; margin-top:8px; color:#fff; font-size:34px; line-height:38px; font-weight:800; }
.dash-uc .uc-stat small { margin-left:3px; color:var(--uc-brand); font-size:14px; }
.dash-uc .uc-table-wrap { width:100%; overflow-x:auto; }
.dash-uc .uc-table { width:100%; border:0; border-collapse:collapse; background:#fff; }
.dash-uc .uc-table th { padding:13px 20px; border-bottom:1px solid var(--uc-border); color:var(--uc-disabled); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.07em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.dash-uc .uc-table td { padding:17px 20px; border-bottom:1px solid #EEF0F3; color:var(--uc-soft); font-size:14px; line-height:20px; vertical-align:middle; }
.dash-uc .uc-table tr:last-child td { border-bottom:0; }
.dash-uc .uc-table td strong { color:var(--uc-ink); font-weight:700; }
.dash-uc .uc-table-action { text-align:right; white-space:nowrap; }
.dash-uc .uc-status { display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:6px 10px; border:1px solid var(--uc-border); border-radius:999px; color:var(--uc-muted); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.dash-uc td .uc-status { margin-top:0; }
.dash-uc .uc-status > span { width:6px; height:6px; border-radius:50%; background:var(--uc-disabled); }
.dash-uc .uc-status.is-complete { border-color:var(--uc-ink); background:var(--uc-ink); color:var(--uc-brand); }
.dash-uc .uc-status.is-complete > span { background:var(--uc-brand); }
.dash-uc .uc-status.is-pending > span { background:#F0B429; }
.dash-uc .uc-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 17px; border:1px solid var(--uc-ink); border-radius:10px; background:var(--uc-ink); color:var(--uc-brand)!important; font-family:"Roboto",sans-serif; font-size:14px; line-height:20px; font-weight:700; text-decoration:none!important; cursor:pointer; }
.dash-uc .uc-button:hover { background:#202020; }
.dash-uc .uc-button--small { min-height:36px; padding:7px 12px; border-radius:9px; font-size:13px; }
.dash-uc .uc-button--wide { width:100%; }
.dash-uc .uc-button--secondary { border-color:var(--uc-border); background:#fff; color:var(--uc-ink)!important; }
.dash-uc .uc-button--secondary:hover { border-color:var(--uc-ink); background:#fff; }
.dash-uc .uc-button--danger { border-color:#E7B8B8; background:#FFF7F7; color:#A62B2B!important; }
.dash-uc .uc-empty { display:flex; flex-direction:column; align-items:center; padding:54px 24px; text-align:center; }
.dash-uc .uc-empty__icon,.dash-uc .uc-success__icon,.dash-uc .uc-dialog__icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:16px; border-radius:14px; background:var(--uc-brand); color:var(--uc-ink); font-size:22px; font-weight:800; }
.dash-uc .uc-empty h2 { color:var(--uc-ink); font-size:20px!important; line-height:26px!important; font-weight:700!important; }
.dash-uc .uc-empty p { max-width:480px; margin:7px auto 18px; color:var(--uc-muted); font-size:14px; line-height:21px; }
.dash-uc .uc-empty--compact { padding:34px 16px; }
.dash-uc .uc-search input { width:250px; min-height:40px; padding:9px 13px; border:1px solid var(--uc-border); border-radius:10px; background:#fff; color:var(--uc-ink); font-size:13px; outline:none; }
.dash-uc .uc-search input:focus { border-color:var(--uc-ink); box-shadow:0 0 0 3px rgba(197,241,84,.28); }
.dash-uc .uc-split { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(350px,.75fr); gap:20px; align-items:start; }
.dash-uc .uc-split--detail { grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); }
.dash-uc .uc-copy-block + .uc-copy-block { margin-top:20px; padding-top:20px; border-top:1px solid #EEF0F3; }
.dash-uc .uc-copy-block > span { display:block; margin-bottom:7px; color:var(--uc-disabled); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.dash-uc .uc-copy-block p,.dash-uc .uc-helper,.dash-uc .uc-quote,.dash-uc .uc-settings-card > p { color:var(--uc-soft); font-size:14px; line-height:22px; }
.dash-uc .uc-quote { margin-bottom:20px!important; padding:16px 18px!important; border:0; border-left:3px solid var(--uc-brand); border-radius:0 10px 10px 0; background:var(--uc-cream); font-style:normal; }
.dash-uc .uc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.dash-uc .uc-chip { display:inline-flex; align-items:center; padding:7px 11px; border:1px solid var(--uc-border); border-radius:999px; background:#fff; color:var(--uc-soft); font-family:"Roboto Mono",monospace; font-size:11px; line-height:15px; font-weight:600; }
.dash-uc .uc-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.dash-uc .uc-gallery a { display:block; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--uc-border); border-radius:12px; background:var(--uc-cream); }
.dash-uc .uc-gallery img { width:100%; height:100%; object-fit:cover; }
.dash-uc .uc-review-form { position:sticky; top:20px; }
.dash-uc .uc-rating-list { display:flex; flex-direction:column; gap:15px; margin:20px 0; }
.dash-uc .uc-rating { border:0; }
.dash-uc .uc-rating legend { margin-bottom:7px; color:var(--uc-ink); font-size:13px; line-height:18px; font-weight:700; }
.dash-uc .uc-rating__choices { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.dash-uc .uc-rating__choices label { margin:0; cursor:pointer; }
.dash-uc .uc-rating__choices input { position:absolute; opacity:0; pointer-events:none; }
.dash-uc .uc-rating__choices span { display:flex; align-items:center; justify-content:center; min-height:36px; border:1px solid var(--uc-border); border-radius:9px; color:var(--uc-muted); font-family:"Roboto Mono",monospace; font-size:12px; font-weight:700; }
.dash-uc .uc-rating__choices input:checked + span { border-color:var(--uc-ink); background:var(--uc-ink); color:var(--uc-brand); }
.dash-uc .uc-rating__choices input:focus-visible + span { outline:3px solid rgba(197,241,84,.55); outline-offset:2px; }
.dash-uc .uc-numbered-head { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.dash-uc .uc-numbered-head > span { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:var(--uc-ink); color:var(--uc-brand); font-family:"Roboto Mono",monospace; font-size:11px; font-weight:700; }
.dash-uc .uc-numbered-head > i { height:1px; flex:1; background:var(--uc-border); }
.dash-uc .uc-numbered-head h2 { order:2; margin:0; }
.dash-uc .uc-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.dash-uc .uc-field-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dash-uc .uc-field { display:flex; flex-direction:column; gap:7px; margin:0; color:var(--uc-ink); font-size:13px; line-height:18px; font-weight:700; }
.dash-uc .uc-field + .uc-field { margin-top:18px; }
.dash-uc .uc-field-grid .uc-field + .uc-field { margin-top:0; }
.dash-uc .uc-field input,.dash-uc .uc-field textarea,.dash-uc .uc-field select { width:100%; min-height:44px; margin:0; padding:10px 12px; border:1px solid #D9DDE3; border-radius:10px; background:#fff; color:var(--uc-ink); font-family:"Roboto",sans-serif; font-size:14px; line-height:21px; outline:none; }
.dash-uc .uc-field textarea { min-height:110px; resize:vertical; }
.dash-uc .uc-field input[readonly] { background:#F6F7F8; color:var(--uc-muted); }
.dash-uc .uc-field input:focus,.dash-uc .uc-field textarea:focus,.dash-uc .uc-field select:focus { border-color:var(--uc-ink); box-shadow:0 0 0 3px rgba(197,241,84,.28); }
.dash-uc .uc-field small { color:var(--uc-muted); font-size:11px; line-height:16px; font-weight:400; }
.dash-uc .uc-actions { display:flex; align-items:center; gap:10px; margin-top:22px; }
.dash-uc .uc-actions--end { justify-content:flex-end; margin-top:4px; }
.dash-uc .uc-actions--between { justify-content:space-between; }
.dash-uc .uc-photo-form { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; }
.dash-uc .uc-photo-preview { display:flex; align-items:center; justify-content:center; width:112px; height:112px; overflow:hidden; border-radius:24px; background:var(--uc-brand); color:var(--uc-ink); font-family:"Roboto Mono",monospace; font-size:30px; font-weight:800; }
.dash-uc .uc-photo-preview img { width:100%; height:100%; object-fit:cover; }
.dash-uc .uc-photo-form__copy h2 { margin:5px 0!important; color:var(--uc-ink); font-size:21px!important; line-height:27px!important; font-weight:700!important; }
.dash-uc .uc-photo-form__copy p { color:var(--uc-muted); font-size:13px; line-height:20px; }
.dash-uc .uc-file { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:190px; margin:0; padding:28px; border:1px dashed #C8CDD4; border-radius:14px; background:#F8F9FB; cursor:pointer; text-align:center; }
.dash-uc .uc-file input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.dash-uc .uc-file__icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:10px; border-radius:11px; background:var(--uc-ink); color:var(--uc-brand); font-size:22px; }
.dash-uc .uc-file strong { color:var(--uc-ink); font-size:14px; }
.dash-uc .uc-file small { margin-top:4px; color:var(--uc-muted); font-size:12px; }
.dash-uc .uc-photo-form > .uc-actions { grid-column:1/-1; justify-content:flex-end; margin:0; }
.dash-uc .uc-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.dash-uc .uc-settings-card { min-height:210px; }
.dash-uc .uc-copy-field { display:flex; margin-top:20px; }
.dash-uc .uc-copy-field input { min-width:0; flex:1; min-height:42px; padding:9px 11px; border:1px solid var(--uc-border); border-radius:10px 0 0 10px; background:#F7F8F9; color:var(--uc-soft); font-size:12px; }
.dash-uc .uc-copy-field button { padding:9px 13px; border:1px solid var(--uc-ink); border-radius:0 10px 10px 0; background:var(--uc-ink); color:var(--uc-brand); font-size:12px; font-weight:700; }
.dash-uc .uc-switch { position:relative; width:48px; height:28px; flex:0 0 auto; margin:0; }
.dash-uc .uc-switch input { position:absolute; opacity:0; }
.dash-uc .uc-switch > span { position:absolute; inset:0; border-radius:999px; background:#D7DBE0; cursor:pointer; transition:.2s; }
.dash-uc .uc-switch > span::after { content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s; }
.dash-uc .uc-switch input:checked + span { background:var(--uc-ink); }
.dash-uc .uc-switch input:checked + span::after { transform:translateX(20px); background:var(--uc-brand); }
.dash-uc .uc-switch input:focus-visible + span { outline:3px solid rgba(197,241,84,.6); outline-offset:2px; }
.dash-uc .uc-alert { margin-bottom:18px; padding:12px 14px; border-radius:10px; font-size:13px; line-height:19px; }
.dash-uc .uc-alert.is-error { border:1px solid #F1B7B7; background:#FFF6F6; color:#9B2424; }
.dash-uc .uc-live { min-height:20px; margin:10px 0 0; color:var(--uc-muted); font-size:12px; text-align:right; }
.dash-uc .uc-score-list { display:flex; flex-direction:column; gap:18px; }
.dash-uc .uc-score > div { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:7px; color:var(--uc-soft); font-size:13px; }
.dash-uc .uc-score strong { color:var(--uc-ink); font-family:"Roboto Mono",monospace; font-size:11px; }
.dash-uc .uc-score > i { display:block; height:7px; overflow:hidden; border-radius:999px; background:#E7E9ED; }
.dash-uc .uc-score > i > b { display:block; height:100%; border-radius:inherit; background:var(--uc-brand); }
.dash-uc .uc-dialog-layer { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(10,10,10,.58); }
.dash-uc .uc-dialog { width:min(100%,430px); padding:30px; border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.25); }
.dash-uc .uc-dialog h2 { margin:7px 0!important; color:var(--uc-ink); font-size:24px!important; line-height:30px!important; font-weight:800!important; }
.dash-uc .uc-dialog p { margin:0 0 20px!important; color:var(--uc-soft); font-size:14px; line-height:21px; }
.dash-uc .uc-main--success { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 100px); }
.dash-uc .uc-success { width:min(100%,680px); padding:48px; border:1px solid var(--uc-border); border-radius:20px; background:#fff; text-align:left; }
.dash-uc .uc-success h1 { max-width:560px; color:var(--uc-ink); font-size:42px!important; line-height:48px!important; font-weight:800!important; letter-spacing:-.02em; }
.dash-uc .uc-success > p { max-width:560px; margin-top:12px; color:var(--uc-soft); font-size:15px; line-height:24px; }
.dash-uc-verify .uc-employer-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 34px; border-bottom:1px solid var(--uc-border); background:#fff; }
.dash-uc-verify .uc-employer-top .uc-back { margin:0; }
.dash-uc-verify .uc-employer-top > div { display:flex; align-items:center; gap:8px; color:var(--uc-muted); font-size:12px; }
.dash-uc-verify .uc-employer-top strong { padding:6px 10px; border-radius:999px; background:var(--uc-ink); color:var(--uc-brand); font-family:"Roboto Mono",monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.dash-uc .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media(max-width:991px) {
  .dash-uc .uc-split,.dash-uc .uc-split--detail { grid-template-columns:1fr; }
  .dash-uc .uc-review-form { position:static; }
  .dash-uc .uc-field-grid--three { grid-template-columns:1fr; }
}
@media(max-width:767px) {
  .dash-uc .uc-main { padding:28px 20px 56px; }
  .dash-uc .uc-page-head { flex-direction:column; gap:18px; }
  .dash-uc .uc-page-head h1 { font-size:36px!important; line-height:42px!important; }
  .dash-uc .uc-stat { width:100%; min-width:0; }
  .dash-uc .uc-field-grid,.dash-uc .uc-settings-grid { grid-template-columns:1fr; }
  .dash-uc .uc-card { padding:22px 20px; }
  .dash-uc .uc-card--flush { padding:0; }
  .dash-uc .uc-card-head { align-items:flex-start; flex-direction:column; }
  .dash-uc .uc-card--flush > .uc-card-head { padding:20px; }
  .dash-uc .uc-search,.dash-uc .uc-search input { width:100%; }
  .dash-uc .uc-table,.dash-uc .uc-table tbody,.dash-uc .uc-table tr,.dash-uc .uc-table td { display:block; width:100%; }
  .dash-uc .uc-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .dash-uc .uc-table tr { padding:18px 20px; border-bottom:1px solid var(--uc-border); }
  .dash-uc .uc-table tr:last-child { border-bottom:0; }
  .dash-uc .uc-table td { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:7px 0; border:0; text-align:right; }
  .dash-uc .uc-table td::before { content:attr(data-label); color:var(--uc-disabled); font-family:"Roboto Mono",monospace; font-size:9px; line-height:15px; font-weight:700; letter-spacing:.06em; text-align:left; text-transform:uppercase; }
  .dash-uc .uc-table .uc-table-action { justify-content:flex-end; padding-top:13px; }
  .dash-uc .uc-table .uc-table-action::before { content:""; }
  .dash-uc .uc-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dash-uc .uc-photo-form { grid-template-columns:1fr; text-align:center; }
  .dash-uc .uc-photo-preview { margin:0 auto; }
  .dash-uc .uc-file,.dash-uc .uc-photo-form > .uc-actions { grid-column:auto; }
  .dash-uc .uc-photo-form > .uc-actions,.dash-uc .uc-actions--end,.dash-uc .uc-actions--between { align-items:stretch; flex-direction:column-reverse; }
  .dash-uc .uc-button { width:100%; }
  .dash-uc .uc-success { padding:32px 24px; }
  .dash-uc .uc-success h1 { font-size:34px!important; line-height:40px!important; }
  .dash-uc-verify .uc-employer-top { align-items:flex-start; flex-direction:column; padding:16px 20px; }
}

/* ============================================================
   Employer Company Profile v2 — approved Paper hierarchy
   View: employer-company-profile-new-test.ejs
   ============================================================ */
.dash-profile--v2 {
  --brand:#C5F154; --ink:#0A0A0A; --soft:#4B5563; --muted:#6B7280;
  --disabled:#9CA3AF; --border:#E5E7EB; --cream:#F5F1E8;
  --cream-deep:#F0EBDC; --dashed:#D8CFB8; --page:#FAFAF7;
  margin:0 !important; padding:0 !important; background:var(--page); color:var(--ink);
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
}
.dash-profile--v2,.dash-profile--v2 *,.dash-profile--v2 *::before,.dash-profile--v2 *::after { box-sizing:border-box; }
.dash-profile--v2 * { font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif !important; }
.dash-profile--v2 section { margin:0 !important; }
.dash-profile--v2 h1,.dash-profile--v2 h2,.dash-profile--v2 h3,.dash-profile--v2 p,
.dash-profile--v2 ol,.dash-profile--v2 ul,.dash-profile--v2 dl,.dash-profile--v2 dd { margin:0 !important; padding:0 !important; }
.dash-profile--v2 h1,.dash-profile--v2 h2,.dash-profile--v2 h3 { text-transform:none !important; text-align:left !important; }
.dash-profile--v2 a { text-decoration:none !important; }

.dash-profile--v2 .pfv2-board { display:flex; flex-direction:column; gap:28px; width:100%; min-width:0; padding:44px 64px 72px; background:var(--page); }
.dash-profile--v2 .pfv2-label {
  font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

.dash-profile--v2 .pfv2-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.dash-profile--v2 .pfv2-page-head__copy { display:flex; flex-direction:column; gap:8px; min-width:0; }
.dash-profile--v2 h1.pfv2-page-title { font-size:40px !important; line-height:44px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--ink); }
.dash-profile--v2 p.pfv2-page-subtitle { max-width:700px; font-size:14px !important; line-height:21px !important; font-weight:400; color:var(--soft); }
.dash-profile--v2 .pfv2-page-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.dash-profile--v2 .pfv2-btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 18px; border-radius:8px; font-size:14px; line-height:18px; font-weight:700; }
.dash-profile--v2 .pfv2-btn--ghost { border:1px solid var(--border); background:#fff; color:var(--ink); }
.dash-profile--v2 .pfv2-btn--ghost:hover { border-color:var(--ink); color:var(--ink); }
.dash-profile--v2 .pfv2-btn--primary { padding-inline:20px; border:1px solid var(--ink); background:var(--ink); color:var(--brand); }
.dash-profile--v2 .pfv2-btn--primary:hover { background:#1A1A1A; color:var(--brand); }

.dash-profile--v2 .pfv2-hero { display:flex; width:100%; min-height:272px; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:#fff; }
.dash-profile--v2 .pfv2-hero__identity { display:flex; flex-direction:column; justify-content:space-between; gap:24px; width:64%; min-width:0; padding:34px 38px; }
.dash-profile--v2 .pfv2-identity { display:flex; align-items:center; gap:18px; min-width:0; }
.dash-profile--v2 .pfv2-logo { position:relative; display:flex; align-items:center; justify-content:center; width:76px; height:76px; flex:0 0 76px; overflow:hidden; border:0; border-radius:16px; background:var(--cream); color:var(--ink); }
.dash-profile--v2 .pfv2-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dash-profile--v2 .pfv2-logo > span { display:none; font-size:32px; line-height:36px; font-weight:700; }
.dash-profile--v2 .pfv2-logo.is-fallback > span { display:block; }
.dash-profile--v2 .pfv2-identity__copy { display:flex; flex-direction:column; gap:7px; min-width:0; }
.dash-profile--v2 .pfv2-name-row { display:flex; align-items:center; gap:10px; min-width:0; }
.dash-profile--v2 h2.pfv2-company-name { min-width:0; font-size:30px !important; line-height:34px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--ink); overflow-wrap:anywhere; }
.dash-profile--v2 .pfv2-verified { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--brand); }
.dash-profile--v2 .pfv2-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:16px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.dash-profile--v2 .pfv2-meta span { font-family:inherit !important; }
.dash-profile--v2 p.pfv2-hero__description { max-width:680px; font-size:15px !important; line-height:23px !important; font-weight:400; color:var(--soft); }
.dash-profile--v2 .pfv2-inline-empty { display:flex; flex-direction:column; gap:4px; max-width:680px; padding:14px 16px; border:1px dashed var(--dashed); border-radius:10px; background:var(--cream); color:var(--ink); }
.dash-profile--v2 .pfv2-inline-empty span { font-size:13px; line-height:18px; font-weight:700; }
.dash-profile--v2 .pfv2-inline-empty small { font-size:12px; line-height:17px; color:var(--muted); }
.dash-profile--v2 .pfv2-state-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.dash-profile--v2 .pfv2-state { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:999px; background:var(--cream); font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.dash-profile--v2 .pfv2-state > span { width:7px; height:7px; border-radius:50%; background:var(--brand); }
.dash-profile--v2 .pfv2-state.is-private > span { background:var(--disabled); }
.dash-profile--v2 .pfv2-updated { font-size:12px; line-height:17px; color:var(--muted); }

.dash-profile--v2 .pfv2-footprint { display:flex; flex-direction:column; width:36%; min-width:0; padding:30px 32px; border-radius:0; background:var(--ink); }
.dash-profile--v2 .pfv2-footprint__head { display:flex; flex-direction:column; gap:8px; }
.dash-profile--v2 .pfv2-footprint__label { display:flex; align-items:center; gap:8px; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); }
.dash-profile--v2 .pfv2-footprint__label > span { width:7px; height:7px; border-radius:50%; background:var(--brand); }
.dash-profile--v2 .pfv2-footprint h3 { font-size:22px !important; line-height:28px !important; font-weight:700 !important; letter-spacing:-.01em !important; color:#fff; }
.dash-profile--v2 .pfv2-footprint__metrics { display:flex; width:100%; padding-top:24px; }
.dash-profile--v2 .pfv2-metric { display:flex; flex-direction:column; width:50%; min-width:0; gap:5px; }
.dash-profile--v2 .pfv2-metric:first-child { border-right:1px solid #2D2D2D; }
.dash-profile--v2 .pfv2-metric + .pfv2-metric { padding-left:26px; }
.dash-profile--v2 .pfv2-metric > span { font-family:"Roboto Mono",monospace !important; font-size:9px; line-height:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#A7A7A7; }
.dash-profile--v2 .pfv2-metric strong { font-size:36px; line-height:40px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.dash-profile--v2 .pfv2-metric small { font-size:12px; line-height:17px; color:#A7A7A7; }

.dash-profile--v2 .pf-checklist { border-radius:18px; padding:32px 36px; }
.dash-profile--v2 .pf-checklist__title { font-size:30px !important; line-height:36px !important; }

.dash-profile--v2 .pfv2-story { display:flex; gap:58px; width:100%; padding:34px 38px; border:1px solid var(--dashed); border-radius:18px; background:var(--cream); }
.dash-profile--v2 .pfv2-story__heading { display:flex; flex-direction:column; width:280px; flex:0 0 280px; gap:12px; }
.dash-profile--v2 .pfv2-story__heading h2 { font-size:30px !important; line-height:34px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--ink); }
.dash-profile--v2 .pfv2-story__rule { width:36px; height:4px; border-radius:999px; background:var(--brand); }
.dash-profile--v2 .pfv2-story__body { display:flex; flex-direction:column; gap:16px; max-width:820px; min-width:0; }
.dash-profile--v2 .pfv2-story__body p { font-size:15px !important; line-height:24px !important; font-weight:400; color:var(--soft); }
.dash-profile--v2 p.pfv2-story__lead { font-size:20px !important; line-height:28px !important; font-weight:600; letter-spacing:-.01em !important; color:var(--ink); }
.dash-profile--v2 .pfv2-story__empty { display:flex; flex-direction:column; gap:6px; }
.dash-profile--v2 .pfv2-story__empty strong { font-size:18px; line-height:24px; color:var(--ink); }
.dash-profile--v2 .pfv2-story__empty span { font-size:14px; line-height:21px; color:var(--muted); }
.dash-profile--v2 .pfv2-story__empty a { align-self:flex-start; margin-top:4px; font-size:13px; line-height:18px; font-weight:700; color:var(--ink); }

.dash-profile--v2 .pfv2-layout { display:flex; align-items:flex-start; gap:20px; width:100%; }
.dash-profile--v2 .pfv2-evidence { display:flex; flex-direction:column; gap:20px; width:68%; min-width:0; }
.dash-profile--v2 .pfv2-tools { display:flex; flex-direction:column; gap:20px; width:32%; min-width:0; }
.dash-profile--v2 .pfv2-card,.dash-profile--v2 .pfv2-compact-card { display:flex; flex-direction:column; gap:16px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.dash-profile--v2 .pfv2-card { width:100%; padding:26px 30px; }
.dash-profile--v2 .pfv2-card-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.dash-profile--v2 .pfv2-card-head > div:first-child { display:flex; flex-direction:column; gap:7px; min-width:0; }
.dash-profile--v2 .pfv2-card-head h2,.dash-profile--v2 .pfv2-compact-card h2,.dash-profile--v2 .pfv2-contact h2,.dash-profile--v2 .pfv2-share h2 { font-size:22px !important; line-height:27px !important; font-weight:800 !important; letter-spacing:-.01em !important; color:var(--ink); }
.dash-profile--v2 .pfv2-projects .pfv2-card-head h2 { font-size:24px !important; line-height:29px !important; }
.dash-profile--v2 .pfv2-card-head__meta { display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.dash-profile--v2 .pfv2-card-head__meta span { font-family:"Roboto Mono",monospace !important; font-size:9px; line-height:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.dash-profile--v2 .pfv2-card-head__meta a,.dash-profile--v2 .pfv2-card-link { font-size:13px; line-height:17px; font-weight:700; color:var(--ink); }

.dash-profile--v2 .pfv2-project-list { display:flex; flex-direction:column; gap:10px; list-style:none; }
.dash-profile--v2 .pfv2-project-list li { display:flex; align-items:center; width:100%; min-height:58px; padding:9px 16px; gap:14px; border:1px solid var(--border); border-radius:10px; background:var(--page); }
.dash-profile--v2 .pfv2-project-num { display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px; border-radius:8px; background:var(--ink); color:var(--brand); font-family:"Roboto Mono",monospace !important; font-size:11px; line-height:14px; font-weight:700; }
.dash-profile--v2 .pfv2-project-list strong { flex:1 1 auto; min-width:0; font-size:14px; line-height:18px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.dash-profile--v2 .pfv2-project-type { width:76px; flex:0 0 76px; text-align:right; font-family:"Roboto Mono",monospace !important; font-size:9px; line-height:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.dash-profile--v2 .pfv2-empty { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:22px; border:1px dashed var(--dashed); border-radius:10px; background:var(--cream); }
.dash-profile--v2 .pfv2-empty strong { font-size:14px; line-height:19px; font-weight:700; color:var(--ink); }
.dash-profile--v2 .pfv2-empty span { font-size:12px; line-height:18px; color:var(--muted); }
.dash-profile--v2 .pfv2-empty a { margin-top:3px; font-size:12px; line-height:17px; font-weight:700; color:var(--ink); }

.dash-profile--v2 .pfv2-pair { display:flex; gap:20px; width:100%; }
.dash-profile--v2 .pfv2-compact-card { width:50%; min-width:0; padding:26px 28px; }
.dash-profile--v2 .pfv2-service-list { display:flex; flex-wrap:wrap; gap:8px; }
.dash-profile--v2 .pfv2-service-list span { display:inline-flex; padding:7px 11px; border:1px solid var(--border); border-radius:999px; font-size:12px; line-height:16px; font-weight:600; color:var(--ink); }
.dash-profile--v2 .pfv2-compact-empty { display:flex; flex-direction:column; gap:7px; }
.dash-profile--v2 .pfv2-compact-empty span,.dash-profile--v2 .pfv2-compact-card--empty p { font-size:12px !important; line-height:18px !important; color:var(--muted); }
.dash-profile--v2 .pfv2-compact-empty a,.dash-profile--v2 .pfv2-compact-card--empty a { align-self:flex-start; font-size:12px; line-height:17px; font-weight:700; color:var(--ink); }
.dash-profile--v2 .pfv2-hiring { border-color:var(--ink); background:var(--ink); color:#fff; }
.dash-profile--v2 .pfv2-hiring:hover { color:#fff; background:#141414; }
.dash-profile--v2 .pfv2-hiring .pfv2-label { color:var(--brand); }
.dash-profile--v2 .pfv2-hiring__body { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.dash-profile--v2 .pfv2-hiring__body > div { display:flex; flex-direction:column; min-width:0; gap:4px; }
.dash-profile--v2 .pfv2-hiring__body strong { font-size:32px; line-height:36px; font-weight:800; color:#fff; }
.dash-profile--v2 .pfv2-hiring__body div span { font-size:12px; line-height:17px; color:#A7A7A7; overflow-wrap:anywhere; }
.dash-profile--v2 .pfv2-hiring__body > span { flex:0 0 auto; font-size:20px; line-height:22px; font-weight:700; color:var(--brand); }
.dash-profile--v2 .pfv2-compact-card--empty { border-style:dashed; border-color:var(--dashed); background:var(--cream); }

.dash-profile--v2 .pfv2-article { display:flex; align-items:center; width:100%; gap:16px; padding:16px; border-radius:10px; background:var(--cream); color:var(--ink); }
.dash-profile--v2 .pfv2-article:hover { color:var(--ink); background:var(--cream-deep); }
.dash-profile--v2 .pfv2-article__type { display:flex; align-items:center; justify-content:center; width:54px; height:54px; flex:0 0 54px; border-radius:10px; background:var(--brand); font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.dash-profile--v2 .pfv2-article__copy { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; gap:4px; }
.dash-profile--v2 .pfv2-article__copy strong { font-size:15px; line-height:20px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.dash-profile--v2 .pfv2-article__copy time { font-size:12px; line-height:16px; color:var(--muted); }
.dash-profile--v2 .pfv2-article__arrow { width:28px; flex:0 0 28px; text-align:right; font-size:20px; line-height:22px; font-weight:700; }

.dash-profile--v2 .pfv2-contact { padding:26px 28px; gap:18px; }
.dash-profile--v2 .pfv2-contact header,.dash-profile--v2 .pfv2-share header { display:flex; flex-direction:column; gap:6px; }
.dash-profile--v2 .pfv2-contact header p,.dash-profile--v2 .pfv2-share header p { font-size:12px !important; line-height:17px !important; color:var(--muted); }
.dash-profile--v2 .pfv2-contact-list { display:flex; flex-direction:column; }
.dash-profile--v2 .pfv2-contact-list > div { display:flex; width:100%; gap:14px; padding:14px 0; border-top:1px solid var(--border); }
.dash-profile--v2 .pfv2-contact-list > div.is-empty { margin-top:4px; padding:14px; border:1px dashed var(--dashed); border-radius:10px; background:var(--cream); }
.dash-profile--v2 .pfv2-contact-list dt { width:74px; flex:0 0 74px; font-family:"Roboto Mono",monospace !important; font-size:9px; line-height:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.dash-profile--v2 .pfv2-contact-list dd { min-width:0; font-size:13px; line-height:19px; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.dash-profile--v2 .pfv2-contact-list dd a { color:var(--ink); }
.dash-profile--v2 .pfv2-contact-list .is-empty dd a { font-weight:700; }

.dash-profile--v2 .pfv2-share { display:flex; flex-direction:column; gap:16px; width:100%; padding:26px 28px; border:1px solid var(--dashed); border-radius:18px; background:var(--cream); }
.dash-profile--v2 .pfv2-share-row { display:flex; align-items:center; width:100%; min-height:42px; padding:5px 7px 5px 12px; gap:8px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.dash-profile--v2 .pfv2-share-row input { width:100%; min-width:0; padding:0; border:0; outline:0; background:transparent; font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:14px; color:var(--muted); text-overflow:ellipsis; }
.dash-profile--v2 .pfv2-share-row button { display:inline-flex; align-items:center; justify-content:center; height:30px; flex:0 0 auto; padding:0 11px; border:0; border-radius:6px; background:var(--ink); color:var(--brand); font-size:12px; line-height:16px; font-weight:700; cursor:pointer; }
.dash-profile--v2 .pfv2-copy-status { min-height:14px; font-size:11px; line-height:14px; color:var(--muted); }
.dash-profile--v2 .pfv2-share-cta { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px; border-radius:8px; background:var(--ink); color:var(--brand); font-size:13px; line-height:18px; font-weight:700; }
.dash-profile--v2 .pfv2-share-cta:hover { color:var(--brand); background:#1A1A1A; }

.dash-profile--v2 a:focus-visible,.dash-profile--v2 button:focus-visible,.dash-profile--v2 input:focus-visible { outline:3px solid rgba(197,241,84,.8); outline-offset:3px; }

@media (max-width:1180px) {
  .dash-profile--v2 .pfv2-board { padding:38px 32px 64px; }
  .dash-profile--v2 .pfv2-hero { flex-direction:column; }
  .dash-profile--v2 .pfv2-hero__identity,.dash-profile--v2 .pfv2-footprint { width:100%; }
  .dash-profile--v2 .pfv2-layout { flex-direction:column; }
  .dash-profile--v2 .pfv2-evidence,.dash-profile--v2 .pfv2-tools { width:100%; }
  .dash-profile--v2 .pfv2-tools { flex-direction:row; align-items:flex-start; }
  .dash-profile--v2 .pfv2-tools > * { width:50%; }
}
@media (max-width:760px) {
  .dash-profile--v2 .pfv2-board { gap:20px; padding:28px 16px 56px; }
  .dash-profile--v2 .pfv2-page-head { align-items:stretch; flex-direction:column; }
  .dash-profile--v2 h1.pfv2-page-title { font-size:32px !important; line-height:37px !important; }
  .dash-profile--v2 .pfv2-page-actions { width:100%; }
  .dash-profile--v2 .pfv2-page-actions .pfv2-btn { flex:1 1 0; text-align:center; }
  .dash-profile--v2 .pfv2-hero__identity,.dash-profile--v2 .pfv2-footprint { padding:26px 22px; }
  .dash-profile--v2 .pfv2-identity { align-items:flex-start; }
  .dash-profile--v2 .pfv2-logo { width:62px; height:62px; flex-basis:62px; border-radius:14px; }
  .dash-profile--v2 h2.pfv2-company-name { font-size:25px !important; line-height:30px !important; }
  .dash-profile--v2 .pfv2-footprint__metrics { gap:20px; }
  .dash-profile--v2 .pfv2-metric + .pfv2-metric { padding-left:20px; }
  .dash-profile--v2 .pf-checklist { flex-direction:column; padding:26px 22px; }
  .dash-profile--v2 .pfv2-story { flex-direction:column; gap:22px; padding:28px 24px; }
  .dash-profile--v2 .pfv2-story__heading { width:100%; flex-basis:auto; }
  .dash-profile--v2 .pfv2-pair { flex-direction:column; }
  .dash-profile--v2 .pfv2-compact-card { width:100%; }
  .dash-profile--v2 .pfv2-tools { flex-direction:column; }
  .dash-profile--v2 .pfv2-tools > * { width:100%; }
  .dash-profile--v2 .pfv2-card,.dash-profile--v2 .pfv2-compact-card,.dash-profile--v2 .pfv2-contact,.dash-profile--v2 .pfv2-share { padding:24px 20px; }
  .dash-profile--v2 .pfv2-card-head { align-items:flex-start; flex-direction:column; }
  .dash-profile--v2 .pfv2-card-head__meta { width:100%; justify-content:space-between; }
  .dash-profile--v2 .pfv2-project-type { display:none; }
  .dash-profile--v2 .pfv2-hiring__body strong { font-size:28px; line-height:33px; }
  .dash-profile--v2 .pfv2-article { align-items:flex-start; gap:12px; padding:14px; }
  .dash-profile--v2 .pfv2-article__type { width:46px; height:46px; flex-basis:46px; font-size:8px; }
  .dash-profile--v2 .pfv2-contact-list > div { flex-direction:column; gap:5px; }
  .dash-profile--v2 .pfv2-contact-list dt { width:auto; flex-basis:auto; }
}

/* ==========================================================================
   AI Performance Manager — current employer dashboard treatment
   Routes: /aiPmSetup and /employeePerformanceDetails_*
   ========================================================================== */
.dash-ai-pm {
  --apm-ink:#0A0A0A; --apm-lime:#C5F154; --apm-page:#FAFAF7; --apm-cream:#F5F1E8;
  --apm-cream-deep:#F0EBDC; --apm-line:#E5E7EB; --apm-soft:#4B5563;
  --apm-muted:#6B7280; --apm-disabled:#9CA3AF; --apm-danger:#B42318;
  width:100%; padding:0 !important; background:var(--apm-page); color:var(--apm-ink);
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
}
.dash-ai-pm,.dash-ai-pm *,.dash-ai-pm *::before,.dash-ai-pm *::after { box-sizing:border-box; }
.dash-ai-pm section,.dash-ai-pm aside,.dash-ai-pm header { margin:0 !important; }
.dash-ai-pm h1,.dash-ai-pm h2,.dash-ai-pm h3,.dash-ai-pm p,.dash-ai-pm span,.dash-ai-pm small,.dash-ai-pm strong { margin:0; letter-spacing:normal; }
.dash-ai-pm .apm-board { width:min(100%,1500px); margin:0 auto; padding:32px 40px 72px; }
.dash-ai-pm .apm-head { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding:0 0 30px; }
.dash-ai-pm .apm-head__copy { display:flex; flex-direction:column; gap:11px; min-width:0; }
.dash-ai-pm .apm-head__eyebrow { display:flex; align-items:center; gap:10px; }
.dash-ai-pm .apm-head__chip { display:inline-flex; padding:3px 8px; border-radius:4px; background:var(--apm-ink); color:var(--apm-lime); font:600 10px/14px "Roboto Mono",monospace; letter-spacing:.1em; }
.dash-ai-pm .apm-head__crumb,.dash-ai-pm .apm-mono { color:var(--apm-muted); font:600 10px/14px "Roboto Mono",monospace; letter-spacing:.1em; }
.dash-ai-pm h1.apm-head__title { color:var(--apm-ink); font-size:40px !important; line-height:46px !important; font-weight:800 !important; letter-spacing:-.025em !important; }
.dash-ai-pm .apm-head__sub { max-width:660px; color:var(--apm-soft); font-size:15px; line-height:23px; }
.dash-ai-pm .apm-button { display:inline-flex !important; align-items:center; justify-content:center; min-height:42px; width:auto !important; padding:10px 17px !important; border-radius:10px !important; font:600 13px/18px "Roboto",sans-serif !important; text-decoration:none !important; cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.dash-ai-pm .apm-button--primary { border:1px solid var(--apm-ink) !important; background:var(--apm-ink) !important; color:var(--apm-lime) !important; }
.dash-ai-pm .apm-button--secondary { border:1px solid var(--apm-line) !important; background:#fff !important; color:var(--apm-ink) !important; }
.dash-ai-pm .apm-button--secondary:hover { border-color:var(--apm-ink) !important; }
.dash-ai-pm .apm-button:disabled { opacity:.55; cursor:wait; }

.dash-ai-pm .apm-health { display:grid; grid-template-columns:minmax(360px,1fr) minmax(420px,1fr); gap:0; overflow:hidden; border-radius:18px; background:var(--apm-ink); color:#fff; }
.dash-ai-pm .apm-health__score-wrap { display:flex; align-items:center; gap:24px; min-width:0; padding:32px; }
.dash-ai-pm .apm-ring { display:grid; place-items:center; width:128px; height:128px; flex:0 0 128px; border-radius:50%; background:conic-gradient(var(--apm-score-color) calc(var(--apm-score) * 1%),#262626 0); }
.dash-ai-pm .apm-ring__inside { display:flex; flex-direction:column; align-items:center; justify-content:center; width:98px; height:98px; border-radius:50%; background:var(--apm-ink); }
.dash-ai-pm .apm-ring__score { color:#fff; font-size:36px; line-height:39px; font-weight:800; }
.dash-ai-pm .apm-ring__max { color:#9CA3AF; font:500 10px/14px "Roboto Mono",monospace; }
.dash-ai-pm .apm-health__intro { display:flex; flex-direction:column; gap:8px; min-width:0; }
.dash-ai-pm .apm-mono--lime { color:var(--apm-lime); }
.dash-ai-pm h2.apm-health__title { color:#fff; font-size:26px !important; line-height:31px !important; font-weight:800 !important; }
.dash-ai-pm .apm-health__copy { max-width:430px; color:#B7BBC2; font-size:13px; line-height:20px; }
.dash-ai-pm .apm-health__stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-left:1px solid #262626; }
.dash-ai-pm .apm-stat { display:flex; flex-direction:column; justify-content:center; gap:8px; min-height:96px; padding:22px 26px; border-right:1px solid #262626; border-bottom:1px solid #262626; }
.dash-ai-pm .apm-stat:nth-child(3),.dash-ai-pm .apm-stat:nth-child(4) { border-bottom:0; }
.dash-ai-pm .apm-stat__label { color:#9CA3AF; font:500 10px/14px "Roboto Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.dash-ai-pm .apm-stat__value { color:#fff; font-size:21px; line-height:25px; font-weight:700; }
.dash-ai-pm .apm-health__digest { grid-column:1/-1; display:grid; grid-template-columns:130px 1fr; gap:22px; padding:20px 32px; border-top:1px solid #262626; background:#111; }
.dash-ai-pm .apm-health__digest[hidden] { display:none; }
.dash-ai-pm .apm-health__digest .apm-mono { color:var(--apm-lime); }
.dash-ai-pm .apm-health__digest p { color:#D1D5DB; font-size:12px; line-height:19px; white-space:pre-line; }

.dash-ai-pm .apm-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); gap:20px; align-items:start; padding-top:20px; }
.dash-ai-pm .apm-card { min-width:0; padding:28px; border:1px solid var(--apm-line); border-radius:18px; background:#fff; }
.dash-ai-pm .apm-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding-bottom:22px; }
.dash-ai-pm .apm-card__head > div { display:flex; flex-direction:column; gap:8px; }
.dash-ai-pm .apm-card__head--compact { padding-bottom:18px; }
.dash-ai-pm h2.apm-card__title { color:var(--apm-ink); font-size:24px !important; line-height:29px !important; font-weight:800 !important; letter-spacing:-.015em !important; }
.dash-ai-pm .apm-card__sub { max-width:580px; color:var(--apm-muted); font-size:13px; line-height:20px; }
.dash-ai-pm .apm-count { display:inline-flex; align-items:center; min-height:29px; padding:5px 10px; border-radius:999px; background:var(--apm-cream); color:var(--apm-muted); font:600 10px/14px "Roboto Mono",monospace; white-space:nowrap; }
.dash-ai-pm .apm-filters { display:flex; flex-wrap:wrap; gap:7px; padding-bottom:16px; border-bottom:1px solid var(--apm-line); }
.dash-ai-pm .apm-filter { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:7px 11px; border:1px solid var(--apm-line); border-radius:999px; background:#fff; color:var(--apm-soft); font-size:12px; line-height:16px; font-weight:500; cursor:pointer; }
.dash-ai-pm .apm-filter span { color:var(--apm-disabled); font:600 10px/14px "Roboto Mono",monospace; }
.dash-ai-pm .apm-filter.is-active { border-color:var(--apm-ink); background:var(--apm-ink); color:var(--apm-lime); }
.dash-ai-pm .apm-filter.is-active span { color:#fff; }
.dash-ai-pm .apm-findings { display:flex; flex-direction:column; }
.dash-ai-pm .apm-finding { display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:73px; padding:15px 0; border-bottom:1px solid var(--apm-line); color:var(--apm-ink) !important; text-decoration:none !important; }
.dash-ai-pm a.apm-finding:hover .apm-finding__body strong { text-decoration:underline; text-underline-offset:3px; }
.dash-ai-pm .apm-finding__severity { display:inline-flex; justify-content:center; width:72px; padding:5px 7px; border-radius:999px; font:600 9px/12px "Roboto Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.dash-ai-pm .apm-finding__severity--urgent { background:#FEE4E2; color:#B42318; }
.dash-ai-pm .apm-finding__severity--warn { background:#FFF3CD; color:#8A5A00; }
.dash-ai-pm .apm-finding__severity--info { background:var(--apm-cream); color:var(--apm-soft); }
.dash-ai-pm .apm-finding__body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dash-ai-pm .apm-finding__body strong { overflow-wrap:anywhere; color:var(--apm-ink); font-size:14px; line-height:19px; font-weight:600; }
.dash-ai-pm .apm-finding__body small { color:var(--apm-muted); font-size:12px; line-height:16px; }
.dash-ai-pm .apm-finding__action { display:inline-flex; align-items:center; gap:6px; color:var(--apm-ink); font-size:12px; line-height:16px; font-weight:600; white-space:nowrap; }
.dash-ai-pm .apm-finding__action--muted { color:var(--apm-disabled); }
.dash-ai-pm .apm-loading { display:flex; flex-direction:column; gap:10px; padding:25px 0; }
.dash-ai-pm .apm-loading__bar { width:70%; height:12px; border-radius:999px; background:linear-gradient(90deg,#F3F4F6,#E5E7EB,#F3F4F6); background-size:200% 100%; animation:apm-shimmer 1.2s linear infinite; }
.dash-ai-pm .apm-loading__bar--short { width:42%; }
@keyframes apm-shimmer { to { background-position:-200% 0; } }
.dash-ai-pm .apm-empty { display:flex; align-items:flex-start; gap:16px; margin-top:18px; padding:24px; border:1px dashed #D8CFB8; border-radius:14px; background:var(--apm-cream); }
.dash-ai-pm .apm-empty__icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; border:1px solid var(--apm-line); border-radius:10px; background:#fff; color:var(--apm-ink); font-weight:800; }
.dash-ai-pm .apm-empty > div { display:flex; flex-direction:column; gap:5px; }
.dash-ai-pm .apm-empty strong { font-size:15px; line-height:20px; }
.dash-ai-pm .apm-empty p { color:var(--apm-muted); font-size:12px; line-height:18px; }
.dash-ai-pm .apm-empty--error { border-color:#F0B7B0; background:#FFF7F6; }
.dash-ai-pm .apm-link-button { align-self:flex-start; padding:0; border:0; background:transparent; color:var(--apm-ink); font-size:12px; font-weight:700; text-decoration:underline; cursor:pointer; }
.dash-ai-pm .apm-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; }
.dash-ai-pm .apm-pager button { min-height:34px; padding:7px 11px; border:1px solid var(--apm-line); border-radius:8px; background:#fff; color:var(--apm-ink); font-size:12px; font-weight:600; }
.dash-ai-pm .apm-pager button:disabled { opacity:.4; }
.dash-ai-pm .apm-pager span { color:var(--apm-muted); font:500 10px/14px "Roboto Mono",monospace; }

.dash-ai-pm .apm-enable { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0; border-top:1px solid var(--apm-line); border-bottom:1px solid var(--apm-line); cursor:pointer; }
.dash-ai-pm .apm-enable > span:first-child,.dash-ai-pm .apm-check > span { display:flex; flex-direction:column; gap:3px; }
.dash-ai-pm .apm-enable strong,.dash-ai-pm .apm-check strong { color:var(--apm-ink); font-size:13px; line-height:18px; font-weight:600; }
.dash-ai-pm .apm-enable small,.dash-ai-pm .apm-check small { color:var(--apm-muted); font-size:11px; line-height:16px; }
.dash-ai-pm .apm-switch { position:relative; display:inline-flex; width:42px; height:24px; flex:0 0 42px; }
.dash-ai-pm .apm-switch input { position:absolute; opacity:0; }
.dash-ai-pm .apm-switch > span { width:100%; height:100%; border-radius:999px; background:#D1D5DB; transition:background .15s; }
.dash-ai-pm .apm-switch > span::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .15s; }
.dash-ai-pm .apm-switch input:checked + span { background:var(--apm-ink); }
.dash-ai-pm .apm-switch input:checked + span::after { transform:translateX(18px); background:var(--apm-lime); }
.dash-ai-pm .apm-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:18px; }
.dash-ai-pm .apm-field { display:flex; flex-direction:column; gap:7px; }
.dash-ai-pm .apm-field label,.dash-ai-pm .apm-fieldset legend { color:var(--apm-soft); font-size:12px; line-height:16px; font-weight:600; }
.dash-ai-pm .apm-select { width:100%; height:44px; padding:0 38px 0 12px; border:1px solid var(--apm-line); border-radius:10px; background:#fff; color:var(--apm-ink); font-size:13px; outline:none; }
.dash-ai-pm .apm-select:focus { border-color:var(--apm-ink); }
.dash-ai-pm .apm-fieldset { min-width:0; margin:18px 0 0; padding:0; border:0; }
.dash-ai-pm .apm-fieldset legend { margin-bottom:8px; }
.dash-ai-pm .apm-choices { display:flex; flex-direction:column; gap:8px; }
.dash-ai-pm .apm-choice { position:relative; display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:start; gap:10px; width:100%; padding:14px; border:1px solid var(--apm-line); border-radius:11px; background:#fff; color:var(--apm-ink); text-align:left; cursor:pointer; }
.dash-ai-pm .apm-choice.is-active { border-color:var(--apm-ink); background:var(--apm-ink); color:#fff; }
.dash-ai-pm .apm-choice__marker { width:10px; height:10px; margin-top:4px; border-radius:50%; background:#D1D5DB; }
.dash-ai-pm .apm-choice.is-active .apm-choice__marker { background:var(--apm-lime); }
.dash-ai-pm .apm-choice > span:nth-child(2) { display:flex; flex-direction:column; gap:4px; }
.dash-ai-pm .apm-choice strong { color:inherit; font-size:13px; line-height:17px; font-weight:600; }
.dash-ai-pm .apm-choice small { color:var(--apm-muted); font-size:11px; line-height:16px; }
.dash-ai-pm .apm-choice.is-active small { color:#B7BBC2; }
.dash-ai-pm .apm-choice em { color:var(--apm-disabled); font:600 8px/12px "Roboto Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.dash-ai-pm .apm-choice.is-active em { color:var(--apm-lime); }
.dash-ai-pm .apm-watch { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dash-ai-pm .apm-check { display:flex; align-items:flex-start; gap:9px; padding:12px; border:1px solid var(--apm-line); border-radius:10px; background:#fff; cursor:pointer; }
.dash-ai-pm .apm-check input { width:15px; height:15px; margin:2px 0 0; accent-color:var(--apm-ink); flex:0 0 15px; }
.dash-ai-pm .apm-check--reminder { margin-top:18px; background:var(--apm-cream); }
.dash-ai-pm .apm-status { margin-top:14px; padding:11px 13px; border-radius:9px; font-size:12px; line-height:17px; }
.dash-ai-pm .apm-status[hidden] { display:none; }
.dash-ai-pm .apm-status--success { background:#EEF8D6; color:#365314; }
.dash-ai-pm .apm-status--error { background:#FFF0EE; color:var(--apm-danger); }
.dash-ai-pm .apm-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; padding-top:18px; border-top:1px solid var(--apm-line); }
.dash-ai-pm :focus-visible { outline:3px solid rgba(197,241,84,.75); outline-offset:2px; }

@media (max-width:1180px) {
  .dash-ai-pm .apm-health { grid-template-columns:1fr; }
  .dash-ai-pm .apm-health__stats { border-top:1px solid #262626; border-left:0; }
  .dash-ai-pm .apm-layout { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .dash-ai-pm .apm-board { padding:26px 16px 56px; }
  .dash-ai-pm .apm-head { flex-direction:column; align-items:stretch; }
  .dash-ai-pm h1.apm-head__title { font-size:32px !important; line-height:37px !important; }
  .dash-ai-pm .apm-head > .apm-button { align-self:flex-start; }
  .dash-ai-pm .apm-health__score-wrap { align-items:flex-start; flex-direction:column; padding:24px; }
  .dash-ai-pm .apm-ring { width:108px; height:108px; flex-basis:108px; }
  .dash-ai-pm .apm-ring__inside { width:82px; height:82px; }
  .dash-ai-pm .apm-health__stats { grid-template-columns:1fr 1fr; }
  .dash-ai-pm .apm-stat { min-height:86px; padding:18px; }
  .dash-ai-pm .apm-health__digest { grid-template-columns:1fr; gap:8px; padding:19px 24px; }
  .dash-ai-pm .apm-card { padding:22px 18px; }
  .dash-ai-pm .apm-card__head { flex-direction:column; gap:12px; }
  .dash-ai-pm .apm-finding { grid-template-columns:68px minmax(0,1fr); }
  .dash-ai-pm .apm-finding__severity { width:68px; }
  .dash-ai-pm .apm-finding__action { grid-column:2; justify-self:start; }
  .dash-ai-pm .apm-fields,.dash-ai-pm .apm-watch { grid-template-columns:1fr; }
  .dash-ai-pm .apm-actions { flex-direction:column-reverse; }
  .dash-ai-pm .apm-actions .apm-button { width:100% !important; }
}
@media (max-width:430px) {
  .dash-ai-pm .apm-health__stats { grid-template-columns:1fr; }
  .dash-ai-pm .apm-stat { min-height:auto; border-right:0; border-bottom:1px solid #262626 !important; }
  .dash-ai-pm .apm-stat:last-child { border-bottom:0 !important; }
  .dash-ai-pm .apm-empty { flex-direction:column; }
}

.dash-ai-report .air-person { display:flex; align-items:center; gap:18px; padding:24px 28px; border:1px solid var(--apm-line); border-radius:18px; background:#fff; }
.dash-ai-report .air-person__avatar { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; flex:0 0 64px; border-radius:14px; background:var(--apm-lime); color:var(--apm-ink); font:800 19px/24px "Roboto",sans-serif; }
.dash-ai-report .air-person__identity { display:flex; flex:1 1 auto; flex-direction:column; gap:4px; min-width:0; }
.dash-ai-report .air-person__identity h2 { color:var(--apm-ink); font-size:23px !important; line-height:28px !important; font-weight:800 !important; }
.dash-ai-report .air-person__identity p { color:var(--apm-muted); font-size:13px; line-height:18px; }
.dash-ai-report .air-person__meta { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:6px; min-width:150px; padding-left:24px; border-left:1px solid var(--apm-line); }
.dash-ai-report .air-person__meta .apm-mono { grid-column:1/-1; }
.dash-ai-report .air-person__meta strong { color:var(--apm-ink); font-size:30px; line-height:34px; font-weight:800; }
.dash-ai-report .air-person__meta small { color:var(--apm-muted); font-size:12px; }
.dash-ai-report .air-empty { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:20px; padding:62px 28px; border:1px dashed #D8CFB8; border-radius:18px; background:var(--apm-cream); text-align:center; }
.dash-ai-report .air-empty__icon { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; margin-bottom:4px; border:1px solid var(--apm-line); border-radius:12px; background:#fff; color:var(--apm-ink); }
.dash-ai-report .air-empty h2 { color:var(--apm-ink); font-size:25px !important; line-height:30px !important; font-weight:800 !important; }
.dash-ai-report .air-empty p { max-width:520px; color:var(--apm-muted); font-size:13px; line-height:20px; }
.dash-ai-report .air-empty__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; padding-top:8px; }
.dash-ai-report .air-notice { display:flex; align-items:center; gap:14px; margin-top:20px; padding:18px 20px; border:1px solid #F0B7B0; border-radius:14px; background:#FFF7F6; }
.dash-ai-report .air-notice__mark { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px; border-radius:9px; background:#fff; color:var(--apm-danger); font-weight:800; }
.dash-ai-report .air-notice > div { display:flex; flex:1 1 auto; flex-direction:column; gap:3px; }
.dash-ai-report .air-notice strong { color:var(--apm-ink); font-size:14px; }
.dash-ai-report .air-notice p { color:var(--apm-muted); font-size:12px; line-height:18px; }
.dash-ai-report .air-summary { display:grid; grid-template-columns:210px minmax(0,1fr); gap:14px 28px; margin-top:20px !important; padding:32px; border-radius:18px; background:var(--apm-ink); color:#fff; }
.dash-ai-report .air-summary .apm-mono { grid-row:1/3; }
.dash-ai-report .air-summary h2 { color:#fff; font-size:25px !important; line-height:30px !important; font-weight:800 !important; }
.dash-ai-report .air-summary p { max-width:850px; color:#D1D5DB; font-size:14px; line-height:23px; }
.dash-ai-report .air-two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.dash-ai-report .air-card { margin-top:20px !important; padding:28px; border:1px solid var(--apm-line); border-radius:18px; background:#fff; }
.dash-ai-report .air-two-col .air-card { margin-top:0 !important; }
.dash-ai-report .air-card > h2 { margin-top:7px; color:var(--apm-ink); font-size:22px !important; line-height:27px !important; font-weight:800 !important; }
.dash-ai-report .air-list { display:flex; flex-direction:column; gap:0; margin:18px 0 0; padding:0; list-style:none; }
.dash-ai-report .air-list li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; padding:13px 0; border-top:1px solid var(--apm-line); }
.dash-ai-report .air-list li > span { color:var(--apm-disabled); font:600 10px/16px "Roboto Mono",monospace; }
.dash-ai-report .air-list li > p { color:var(--apm-soft); font-size:13px; line-height:19px; }
.dash-ai-report .air-card__empty { margin-top:16px !important; color:var(--apm-muted); font-size:13px; line-height:19px; }
.dash-ai-report .air-insights { display:flex; flex-direction:column; margin-top:18px; }
.dash-ai-report .air-insights article { display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px; padding:17px 0; border-top:1px solid var(--apm-line); }
.dash-ai-report .air-insights article > span { color:var(--apm-disabled); font:600 10px/16px "Roboto Mono",monospace; }
.dash-ai-report .air-insights article > div { display:flex; flex-direction:column; gap:5px; }
.dash-ai-report .air-insights h3 { color:var(--apm-ink); font-size:14px !important; line-height:19px !important; font-weight:600 !important; }
.dash-ai-report .air-insights p { color:var(--apm-muted); font-size:13px; line-height:20px; }
.dash-ai-report .air-suggestions { display:grid; grid-template-columns:260px minmax(0,1fr); gap:30px; margin-top:20px !important; padding:30px; border:1px dashed #D8CFB8; border-radius:18px; background:var(--apm-cream); }
.dash-ai-report .air-suggestions > div { display:flex; flex-direction:column; gap:7px; }
.dash-ai-report .air-suggestions h2 { color:var(--apm-ink); font-size:22px !important; line-height:27px !important; font-weight:800 !important; }
.dash-ai-report .air-suggestions ul { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; counter-reset:air-suggestion; }
.dash-ai-report .air-suggestions li { position:relative; padding-left:24px; color:var(--apm-soft); font-size:13px; line-height:20px; counter-increment:air-suggestion; }
.dash-ai-report .air-suggestions li::before { content:counter(air-suggestion,decimal-leading-zero); position:absolute; left:0; color:var(--apm-disabled); font:600 9px/20px "Roboto Mono",monospace; }
.dash-ai-report .air-history__head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dash-ai-report .air-history__head > div { display:flex; flex-direction:column; gap:7px; }
.dash-ai-report .air-history__head h2 { color:var(--apm-ink); font-size:22px !important; line-height:27px !important; font-weight:800 !important; }
.dash-ai-report .air-table-wrap { overflow-x:auto; margin-top:18px; }
.dash-ai-report .air-table { width:100%; min-width:640px; border-collapse:collapse; }
.dash-ai-report .air-table th { padding:0 14px 12px; border-bottom:1px solid var(--apm-line); color:var(--apm-muted); font:500 10px/14px "Roboto Mono",monospace; letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.dash-ai-report .air-table th:first-child,.dash-ai-report .air-table td:first-child { padding-left:0; }
.dash-ai-report .air-table th:last-child,.dash-ai-report .air-table td:last-child { padding-right:0; text-align:right; }
.dash-ai-report .air-table td { padding:15px 14px; border-bottom:1px solid var(--apm-line); color:var(--apm-soft); font-size:13px; line-height:18px; }
.dash-ai-report .air-table tbody tr:last-child td { border-bottom:0; }
.dash-ai-report .air-table td:first-child { display:flex; flex-direction:column; gap:3px; }
.dash-ai-report .air-table td strong { color:var(--apm-ink); font-weight:600; }
.dash-ai-report .air-table td small { color:var(--apm-muted); font-size:11px; }
.dash-ai-report .air-table a { color:var(--apm-ink) !important; font-weight:600; text-decoration:none !important; white-space:nowrap; }
.dash-ai-report .air-table a:hover { text-decoration:underline !important; text-underline-offset:3px; }

@media (max-width:820px) {
  .dash-ai-report .air-summary,.dash-ai-report .air-suggestions { grid-template-columns:1fr; }
  .dash-ai-report .air-summary .apm-mono { grid-row:auto; }
  .dash-ai-report .air-two-col { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .dash-ai-report .air-person { align-items:flex-start; flex-wrap:wrap; padding:21px; }
  .dash-ai-report .air-person__meta { width:100%; padding:15px 0 0; border-top:1px solid var(--apm-line); border-left:0; }
  .dash-ai-report .air-notice { align-items:flex-start; flex-wrap:wrap; }
  .dash-ai-report .air-notice .apm-button { width:100% !important; }
  .dash-ai-report .air-empty { padding:42px 20px; }
  .dash-ai-report .air-empty__actions { width:100%; }
  .dash-ai-report .air-empty__actions .apm-button { width:100% !important; }
  .dash-ai-report .air-summary,.dash-ai-report .air-card,.dash-ai-report .air-suggestions { padding:23px 20px; }
}

/* ============================================================
   Current Project workspace — detail, task, Kanban, milestone,
   and the dedicated Client shell. Shared F4 primitives only.
   ============================================================ */
.dash-project-workspace {
  --project-brand:#C5F154;
  --project-ink:#0A0A0A;
  --project-cream:#F5F1E8;
  --project-cream-strong:#F0EBDC;
  --project-soft:#4B5563;
  --project-muted:#6B7280;
  --project-disabled:#9CA3AF;
  --project-border:#E5E7EB;
  width:100%;
  color:var(--project-ink);
  font-family:"Roboto",system-ui,sans-serif;
}
.project-workspace-page #page-content-wrapper { box-sizing:border-box; overflow-x:clip; }
.project-workspace-page #myTopnav { max-width:100%; margin-right:0 !important; margin-left:0 !important; }
.dash-project-workspace,
.dash-project-workspace *,
.dash-project-workspace *::before,
.dash-project-workspace *::after { box-sizing:border-box; }
.dash-project-workspace section { margin:0; }
.dash-project-workspace button,
.dash-project-workspace input,
.dash-project-workspace select,
.dash-project-workspace textarea { font:inherit; }
.project-workspace { width:min(calc(100% - 40px),1420px); margin:0 auto; padding:34px 0 64px; }
.project-workspace__hero { overflow:hidden; margin-bottom:18px; border:1px solid var(--project-border); border-radius:20px; background:#fff; }
.project-workspace__eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--project-disabled); font-family:"Roboto Mono",monospace; font-size:10px; line-height:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-workspace__hero > .project-workspace__eyebrow { margin:0; padding:20px 26px 0; }
.project-workspace__eyebrow a { color:var(--project-ink) !important; text-decoration:none !important; }
.project-workspace__hero-row { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding:18px 26px 24px; }
.project-workspace__hero-copy { min-width:0; }
.project-workspace__hero-copy h1,
.project-task-hero h1 { margin:12px 0 10px; color:var(--project-ink); font-size:clamp(30px,3vw,44px); line-height:1.08; font-weight:800; letter-spacing:-.035em; overflow-wrap:anywhere; }
.project-workspace__hero-copy p,
.project-task-hero > div > p { max-width:760px; margin:0; color:var(--project-soft); font-size:15px; line-height:24px; }
.project-workspace__actions { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.project-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border:1px solid var(--project-ink); border-radius:10px; background:var(--project-ink); color:var(--project-brand) !important; font-size:13px; line-height:18px; font-weight:700; text-decoration:none !important; cursor:pointer; }
.project-button:hover { transform:translateY(-1px); }
.project-button:disabled { opacity:.55; cursor:wait; transform:none; }
.project-button--secondary { border-color:var(--project-border); background:#fff; color:var(--project-ink) !important; }
.project-button--lime { border-color:var(--project-brand); background:var(--project-brand); color:var(--project-ink) !important; }
.project-workspace__facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border-top:1px solid var(--project-border); }
.project-workspace__facts > div { min-width:0; padding:17px 22px; border-right:1px solid var(--project-border); }
.project-workspace__facts > div:last-child { border-right:0; }
.project-workspace__facts dt,
.project-detail-list dt,
.client-project-card dt,
.project-card--summary dt,
.project-card--milestone-progress dt { margin:0 0 6px; color:var(--project-disabled); font-family:"Roboto Mono",monospace; font-size:9px; line-height:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-workspace__facts dd,
.project-detail-list dd,
.client-project-card dd,
.project-card--summary dd,
.project-card--milestone-progress dd { margin:0; color:var(--project-ink); font-size:13px; line-height:19px; font-weight:700; overflow-wrap:anywhere; }
.project-workspace__tabs { display:flex; align-items:center; gap:24px; padding:0 26px; border-top:1px solid var(--project-border); }
.project-workspace__tabs a { position:relative; padding:15px 0 14px; color:var(--project-muted) !important; font-size:13px; line-height:18px; font-weight:700; text-decoration:none !important; }
.project-workspace__tabs a[aria-current="page"] { color:var(--project-ink) !important; }
.project-workspace__tabs a[aria-current="page"]::after { position:absolute; right:0; bottom:-1px; left:0; height:3px; border-radius:3px 3px 0 0; background:var(--project-brand); content:""; }
.project-pill { display:inline-flex; align-items:center; min-height:24px; padding:4px 10px; border:1px solid var(--project-border); border-radius:999px; background:#fff; color:var(--project-soft); font-family:"Roboto Mono",monospace; font-size:9px; line-height:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.project-pill--active,
.project-pill--in-progress { border-color:#B4DC48; background:#EFF9D5; color:#365314; }
.project-pill--completed,
.project-pill--done { border-color:#D1D5DB; background:#F3F4F6; color:#374151; }
.project-pill--blocked,
.project-pill--overdue,
.project-pill--cancelled { border-color:#FECACA; background:#FEF2F2; color:#991B1B; }
.project-pill--planning,
.project-pill--not-started,
.project-pill--open,
.project-pill--on-hold { border-color:#DDD6C4; background:var(--project-cream); color:#5E5646; }
.project-priority { color:var(--project-muted); font-family:"Roboto Mono",monospace; font-size:9px; line-height:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.project-priority--high { color:#B42318; }
.project-priority--medium { color:#7A5A00; }
.project-workspace__grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; margin-bottom:18px; }
.project-workspace__validation { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; padding:14px 16px; border:1px solid #FECACA; border-radius:12px; background:#FEF2F2; }
.project-workspace__validation > div { display:flex; flex-direction:column; gap:2px; }
.project-workspace__validation strong { color:#991B1B; font-size:12px; }
.project-workspace__validation span { color:#7F1D1D; font-size:11px; }
.project-workspace__validation button { border:0; background:transparent; color:#991B1B; font-size:11px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.dash-project-workspace .project-card { min-width:0; padding:0; border:1px solid var(--project-border); border-radius:18px; background:#fff; box-shadow:none; }
.project-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; min-height:76px; padding:20px 22px; border-bottom:1px solid var(--project-border); }
.project-card__head > div > span,
.project-card__label,
.project-kanban__intro > div > span,
.client-dashboard__hero > div > span,
.client-project-card > div:first-child > span:first-child { display:block; color:var(--project-disabled); font-family:"Roboto Mono",monospace; font-size:9px; line-height:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.project-card__head h2,
.project-kanban__intro h2 { margin:5px 0 0; color:var(--project-ink); font-size:20px; line-height:26px; font-weight:750; }
.project-card__head > strong { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 9px; border-radius:9px; background:var(--project-cream); color:var(--project-ink); font-family:"Roboto Mono",monospace; font-size:11px; }
.project-card__head > a,
.project-card__head > button { border:0; background:transparent; color:var(--project-ink) !important; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.project-task-list { display:flex; flex-direction:column; }
.project-task-row { display:grid; grid-template-columns:minmax(210px,1fr) auto 108px 68px auto; align-items:center; gap:14px; min-height:72px; padding:13px 20px; border-bottom:1px solid #EEF0F3; }
.project-task-row:last-child { border-bottom:0; }
.project-task-row__identity { display:flex; align-items:center; min-width:0; gap:12px; }
.project-task-row__identity > div { display:flex; flex-direction:column; min-width:0; gap:3px; }
.project-task-row__identity a { overflow:hidden; color:var(--project-ink) !important; font-size:13px; line-height:18px; font-weight:700; text-decoration:none !important; text-overflow:ellipsis; white-space:nowrap; }
.project-task-row__identity span:not(.project-avatar),
.project-task-row__date { color:var(--project-muted); font-size:11px; line-height:16px; }
.project-avatar { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:var(--project-ink); color:var(--project-brand); font-family:"Roboto Mono",monospace; font-size:10px; font-weight:700; }
.project-avatar--soft { background:var(--project-cream); color:var(--project-ink); }
.project-avatar--small { width:30px; height:30px; flex-basis:30px; border-radius:8px; font-size:8px; }
.project-task-row__action { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.project-task-row__action a,
.project-task-row__action button { border:0; background:transparent; color:var(--project-ink) !important; font-size:11px; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.project-card--summary,
.project-card--milestone-progress { align-self:start; padding:24px !important; background:var(--project-ink) !important; color:#fff; }
.project-card--summary .project-card__label,
.project-card--milestone-progress .project-card__label { color:var(--project-brand); }
.project-card--summary h2,
.project-card--milestone-progress h2 { margin:12px 0 20px; color:#fff; font-size:24px; line-height:30px; font-weight:750; }
.project-summary-meter { overflow:hidden; height:7px; margin-bottom:23px; border-radius:999px; background:#303030; }
.project-summary-meter span { display:block; height:100%; border-radius:inherit; background:var(--project-brand); }
.project-card--summary dl,
.project-card--milestone-progress dl { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 0 24px; }
.project-card--summary dt,
.project-card--milestone-progress dt { color:#8B8B8B; }
.project-card--summary dd,
.project-card--milestone-progress dd { color:#fff; }
.project-card--summary .project-button,
.project-card--milestone-progress .project-button { width:100%; }
.project-empty { margin:20px; padding:42px 24px; border:1px dashed #D8CFB8; border-radius:14px; background:var(--project-cream); text-align:center; }
.project-empty > span { color:var(--project-disabled); font-family:"Roboto Mono",monospace; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-empty h3 { margin:8px 0 5px; color:var(--project-ink); font-size:18px; line-height:24px; font-weight:750; }
.project-empty p { max-width:520px; margin:0 auto 16px; color:var(--project-muted); font-size:13px; line-height:20px; }
.project-empty--compact { padding:28px 20px; }
.project-empty--compact p { margin-bottom:0; }
.project-participants { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:20px 22px; }
.project-participants article,
.project-task-people article { display:flex; align-items:center; min-width:0; gap:11px; padding:13px; border:1px solid var(--project-border); border-radius:12px; background:#FAFAF7; }
.project-participants article > div,
.project-task-people article > div { display:flex; flex-direction:column; min-width:0; gap:2px; }
.project-participants strong,
.project-task-people strong { overflow:hidden; color:var(--project-ink); font-size:12px; line-height:17px; text-overflow:ellipsis; white-space:nowrap; }
.project-participants article > div > span,
.project-task-people article > div > span,
.project-task-people small { color:var(--project-muted); font-size:10px; line-height:15px; }
.project-milestones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:20px 22px; }
.project-milestones article { min-width:0; padding:18px; border:1px solid var(--project-border); border-radius:14px; }
.project-milestone__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.project-milestone__head > span:last-child { color:var(--project-muted); font-size:10px; }
.project-milestones h3 { margin:16px 0 7px; color:var(--project-ink); font-size:15px; line-height:21px; font-weight:750; }
.project-milestones p { min-height:40px; margin:0 0 16px; color:var(--project-soft); font-size:12px; line-height:19px; }
.project-milestone__meter { overflow:hidden; height:5px; border-radius:999px; background:#ECEEE8; }
.project-milestone__meter span { display:block; height:100%; border-radius:inherit; background:var(--project-ink); }
.project-milestones footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; color:var(--project-muted); font-size:10px; }
.project-milestones footer a { color:var(--project-ink) !important; font-weight:700; }
.project-workspace__lower-grid,
.project-workspace__task-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.project-simple-list,
.project-activity,
.project-comments,
.project-attachments { margin:0; padding:18px 22px; list-style:none; }
.project-simple-list li { display:flex; align-items:center; gap:11px; min-height:42px; border-bottom:1px solid #EEF0F3; }
.project-simple-list li:last-child { border-bottom:0; }
.project-simple-list li > span { width:8px; height:8px; border-radius:50%; background:var(--project-brand); box-shadow:0 0 0 3px var(--project-ink); }
.project-simple-list strong { font-size:12px; line-height:18px; }
.project-activity li { display:grid; grid-template-columns:12px minmax(0,1fr); gap:12px; padding:0 0 17px; }
.project-activity li:last-child { padding-bottom:0; }
.project-activity li > span { width:9px; height:9px; margin-top:4px; border:2px solid var(--project-ink); border-radius:50%; background:var(--project-brand); }
.project-activity li > div { padding-bottom:15px; border-bottom:1px solid #EEF0F3; }
.project-activity li:last-child > div { padding-bottom:0; border-bottom:0; }
.project-activity strong { display:block; font-size:12px; line-height:17px; }
.project-activity p { margin:3px 0; color:var(--project-soft); font-size:11px; line-height:17px; }
.project-activity time { color:var(--project-disabled); font-family:"Roboto Mono",monospace; font-size:9px; }
.project-card__empty-note { margin:0; padding:24px 22px; color:var(--project-muted); font-size:13px; line-height:20px; }

.project-dialog { width:min(calc(100% - 32px),620px); max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--project-border); border-radius:18px; background:#fff; color:var(--project-ink); box-shadow:0 24px 70px rgba(0,0,0,.22); }
.project-dialog::backdrop { background:rgba(10,10,10,.58); }
.project-dialog > form { display:flex; flex-direction:column; gap:16px; padding:24px; }
.project-dialog__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.project-dialog__head span { color:var(--project-disabled); font-family:"Roboto Mono",monospace; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-dialog__head h2 { margin:5px 0 0; font-size:24px; line-height:30px; font-weight:800; }
.project-dialog__head > button { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:0; border-radius:50%; background:#F3F4F6; color:var(--project-muted); font-size:23px; cursor:pointer; }
.project-dialog label,
.project-comment-form label,
.project-inline-form > label { display:flex; flex-direction:column; gap:7px; color:var(--project-ink); font-size:12px; line-height:17px; font-weight:700; }
.project-dialog input,
.project-dialog select,
.project-dialog textarea,
.project-comment-form textarea,
.project-inline-form select,
.project-kanban__move select { width:100%; min-height:44px; padding:10px 12px; border:1px solid #D1D5DB; border-radius:9px; background:#fff; color:var(--project-ink); font-size:13px; line-height:19px; outline:none; }
.project-dialog textarea,
.project-comment-form textarea { resize:vertical; }
.project-dialog input:focus,
.project-dialog select:focus,
.project-dialog textarea:focus,
.project-comment-form textarea:focus { border-color:var(--project-ink); box-shadow:0 0 0 3px rgba(197,241,84,.35); }
.project-dialog__grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.project-dialog__actions { display:flex; justify-content:flex-end; gap:10px; padding-top:4px; }
.project-form-message { min-height:18px; margin:0; color:var(--project-muted); font-size:12px; line-height:18px; }
.project-form-message.is-error,
.project-inline-error { color:#B42318; }
.project-form-message.is-success { color:#3F6212; }
.project-inline-error { margin:16px 22px 0; padding:10px 12px; border:1px solid #FECACA; border-radius:9px; background:#FEF2F2; font-size:12px; }

.project-task-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:18px; padding:26px; border:1px solid var(--project-border); border-radius:20px; background:#fff; }
.project-task-hero__pills { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.project-blocker { display:grid; grid-template-columns:130px minmax(0,1fr); gap:18px; margin-bottom:18px; padding:17px 20px; border:1px solid #FECACA; border-radius:14px; background:#FEF2F2; }
.project-blocker span { color:#991B1B; font-family:"Roboto Mono",monospace; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-blocker p { margin:0; color:#7F1D1D; font-size:13px; line-height:20px; }
.project-detail-list { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; }
.project-detail-list > div { padding:17px 20px; border-right:1px solid #EEF0F3; border-bottom:1px solid #EEF0F3; }
.project-detail-list > div:nth-child(2n) { border-right:0; }
.project-detail-list > div:nth-last-child(-n+2) { border-bottom:0; }
.project-detail-list a { color:var(--project-ink) !important; }
.project-task-people { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:20px; }
.project-inline-form { margin:0 20px 20px; padding-top:17px; border-top:1px solid var(--project-border); }
.project-inline-form > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.project-inline-form button { min-width:72px; border:1px solid var(--project-ink); border-radius:9px; background:var(--project-ink); color:var(--project-brand); font-size:12px; font-weight:700; }
.project-attachments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.project-attachments a { display:flex; align-items:center; gap:9px; padding:13px; border:1px solid var(--project-border); border-radius:10px; color:var(--project-ink) !important; font-size:12px; font-weight:700; text-decoration:none !important; overflow-wrap:anywhere; }
.project-attachments a span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; border-radius:8px; background:var(--project-brand); }
.project-comments li { display:flex; align-items:flex-start; gap:10px; padding:0 0 15px; margin-bottom:15px; border-bottom:1px solid #EEF0F3; }
.project-comments li:last-child { margin-bottom:0; }
.project-comments li > div { min-width:0; flex:1; }
.project-comments li > div > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.project-comments strong { font-size:11px; }
.project-comments time { color:var(--project-disabled); font-family:"Roboto Mono",monospace; font-size:8px; }
.project-comments p { margin:5px 0 0; color:var(--project-soft); font-size:12px; line-height:19px; overflow-wrap:anywhere; }
.project-comment-form { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:0 22px 22px; padding-top:18px; border-top:1px solid var(--project-border); }
.project-comment-form textarea { width:100%; }

.project-kanban__intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 14px; padding:20px 22px; border:1px solid var(--project-border); border-radius:16px; background:#fff; }
.project-kanban__intro p { margin:5px 0 0; color:var(--project-muted); font-size:13px; }
.project-kanban { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:start; gap:12px; padding:2px 0 16px; }
.project-kanban__column { min-width:0; border:1px solid var(--project-border); border-radius:15px; background:#F7F7F3; }
.project-kanban__column > header { display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:14px 15px; border-bottom:1px solid var(--project-border); }
.project-kanban__column > header h3 { margin:0; font-size:13px; line-height:18px; font-weight:750; }
.project-kanban__column > header span { display:flex; align-items:center; justify-content:center; min-width:25px; height:25px; padding:0 7px; border-radius:8px; background:#fff; font-family:"Roboto Mono",monospace; font-size:9px; }
.project-kanban__cards { min-height:260px; padding:10px; }
.project-kanban__cards.is-over { background:#EEF9D3; }
.project-kanban__card { margin-bottom:10px; padding:14px; border:1px solid var(--project-border); border-top:3px solid #D1D5DB; border-radius:12px; background:#fff; cursor:default; }
.project-kanban__card[draggable="true"] { cursor:grab; }
.project-kanban__card.is-dragging { opacity:.55; }
.project-kanban__card--high { border-top-color:#DC2626; }
.project-kanban__card--medium { border-top-color:#EAB308; }
.project-kanban__card--low { border-top-color:var(--project-brand); }
.project-kanban__card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.project-kanban__card h4 { margin:13px 0 7px; font-size:13px; line-height:18px; font-weight:750; }
.project-kanban__card h4 a { color:var(--project-ink) !important; text-decoration:none !important; }
.project-kanban__card > p { display:-webkit-box; overflow:hidden; margin:0 0 14px; color:var(--project-soft); font-size:11px; line-height:17px; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.project-kanban__meta { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:11px; border-top:1px solid #EEF0F3; color:var(--project-muted); font-size:9px; line-height:14px; }
.project-kanban__goal { margin-top:10px; padding:9px; border-radius:8px; background:var(--project-cream); color:var(--project-soft); font-size:10px; line-height:15px; }
.project-kanban__goal span { display:block; margin-bottom:3px; color:var(--project-disabled); font-family:"Roboto Mono",monospace; font-size:8px; font-weight:700; text-transform:uppercase; }
.project-kanban__move { display:flex; flex-direction:column; gap:5px; margin-top:11px; color:var(--project-muted); font-size:9px; font-weight:700; }
.project-kanban__move select { min-height:36px; padding:7px 9px; font-size:10px; }
.project-kanban__empty { margin:0; padding:20px 8px; color:var(--project-disabled); font-size:11px; line-height:17px; text-align:center; }

.project-workspace__milestone-grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; }
.project-milestone-status-form { padding-top:18px; border-top:1px solid #303030; }
.project-milestone-status-form label { display:flex; align-items:center; gap:9px; margin-bottom:14px; color:#fff; font-size:12px; }
.project-milestone-status-form input { accent-color:var(--project-brand); }
.project-task-list--milestone .project-task-row { grid-template-columns:minmax(210px,1fr) auto 110px auto; }
.project-task-picker { padding:20px 22px; }
.project-task-picker > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.project-task-picker label { display:flex; align-items:flex-start; gap:10px; padding:13px; border:1px solid var(--project-border); border-radius:11px; cursor:pointer; }
.project-task-picker input { margin-top:3px; accent-color:var(--project-ink); }
.project-task-picker label > span { display:flex; flex-direction:column; min-width:0; gap:2px; }
.project-task-picker strong { font-size:11px; line-height:16px; }
.project-task-picker small { color:var(--project-muted); font-size:9px; line-height:14px; }

.client-workspace-shell { margin:0; background:#F7F7F3; color:#0A0A0A; font-family:"Roboto",system-ui,sans-serif; }
.client-shell__header { position:sticky; z-index:30; top:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; min-height:72px; padding:12px max(24px,calc((100vw - 1420px)/2)); border-bottom:1px solid #E5E7EB; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.client-shell__brand img { display:block; width:auto; height:34px; object-fit:contain; }
.client-shell__nav { display:flex; align-items:center; justify-content:center; gap:8px; }
.client-shell__nav a { padding:9px 13px; border-radius:9px; color:#6B7280 !important; font-size:13px; font-weight:700; text-decoration:none !important; }
.client-shell__nav a[aria-current="page"] { background:#0A0A0A; color:#C5F154 !important; }
.client-shell__identity { display:flex; align-items:center; gap:12px; }
.client-shell__identity > span { max-width:200px; overflow:hidden; color:#4B5563; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.client-shell__identity form { margin:0; }
.client-shell__identity button { min-height:36px; padding:8px 12px; border:1px solid #E5E7EB; border-radius:9px; background:#fff; color:#0A0A0A; font-size:11px; font-weight:700; cursor:pointer; }
.client-shell__menu { display:none; width:40px; height:40px; padding:10px; border:1px solid #E5E7EB; border-radius:9px; background:#fff; }
.client-shell__menu > span:not(.visually-hidden) { display:block; height:2px; margin:3px 0; border-radius:3px; background:#0A0A0A; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.client-shell__main { min-height:calc(100vh - 72px); }
.client-dashboard { width:min(calc(100% - 40px),1420px); margin:0 auto; padding:34px 0 64px; }
.client-dashboard__hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:18px; padding:30px; border-radius:20px; background:#0A0A0A; color:#fff; }
.client-dashboard__hero > div { max-width:820px; }
.client-dashboard__hero > div > span { color:#C5F154; }
.client-dashboard__hero h1 { margin:10px 0 8px; color:#fff; font-size:clamp(32px,4vw,48px); line-height:1.05; font-weight:800; letter-spacing:-.035em; }
.client-dashboard__hero p { margin:0; color:#C7C7C7; font-size:14px; line-height:22px; }
.client-dashboard__hero .project-button { border-color:#C5F154; background:#C5F154; color:#0A0A0A !important; }
.client-dashboard__hero--compact { background:#F0EBDC; color:#0A0A0A; }
.client-dashboard__hero--compact > div > span { color:#6B7280; }
.client-dashboard__hero--compact h1 { color:#0A0A0A; }
.client-dashboard__hero--compact p { color:#4B5563; }
.client-dashboard__metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.client-dashboard__metrics article { padding:20px 22px; border:1px solid #E5E7EB; border-radius:16px; background:#fff; }
.client-dashboard__metrics span { display:block; color:#6B7280; font-family:"Roboto Mono",monospace; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.client-dashboard__metrics strong { display:block; margin-top:10px; font-size:30px; line-height:34px; font-weight:800; }
.client-dashboard > .project-card + .project-card { margin-top:18px; }
.client-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:20px 22px; }
.client-project-card { display:flex; flex-direction:column; min-width:0; padding:18px; border:1px solid #E5E7EB; border-radius:14px; background:#fff; }
.client-project-card--invite { background:#FAFAF7; }
.client-project-card > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.client-project-card h3 { margin:17px 0 7px; font-size:16px; line-height:22px; font-weight:750; overflow-wrap:anywhere; }
.client-project-card > p { min-height:42px; margin:0 0 15px; color:#4B5563; font-size:12px; line-height:19px; }
.client-project-card dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 17px; padding-top:14px; border-top:1px solid #EEF0F3; }
.client-project-card__actions { display:flex; align-items:center; gap:8px; margin-top:auto; }
.client-project-card__actions form { flex:1; margin:0; }
.client-project-card__actions button { width:100%; }
.client-project-card__open { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:15px; border-top:1px solid #EEF0F3; color:#0A0A0A !important; font-size:12px; font-weight:700; text-decoration:none !important; }
.client-project-list { display:flex; flex-direction:column; }
.client-project-list article { display:grid; grid-template-columns:minmax(0,1fr) 120px auto; align-items:center; gap:18px; min-height:82px; padding:14px 22px; border-bottom:1px solid #EEF0F3; }
.client-project-list article:last-child { border-bottom:0; }
.client-project-list h3 { margin:6px 0 2px; font-size:14px; }
.client-project-list h3 a { color:#0A0A0A !important; text-decoration:none !important; }
.client-project-list p { margin:0; color:#6B7280; font-size:11px; }
.client-project-list time { color:#6B7280; font-size:11px; }
.client-project-list article > a { color:#0A0A0A !important; font-size:11px; font-weight:700; }

@media (max-width:1180px) {
  .project-participants { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .project-milestones,
  .client-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-task-picker > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-kanban { grid-template-columns:1fr; }
  .project-kanban__cards { min-height:0; }
}
@media (max-width:980px) {
  .project-workspace__grid,
  .project-workspace__task-grid,
  .project-workspace__milestone-grid { grid-template-columns:1fr; }
  .project-card--summary,
  .project-card--milestone-progress { order:-1; }
  .project-participants { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-workspace__facts { grid-template-columns:1fr 1fr; }
  .project-workspace__facts > div:nth-child(2) { border-right:0; }
  .project-workspace__facts > div:nth-child(-n+2) { border-bottom:1px solid var(--project-border); }
  .client-shell__header { padding-right:20px; padding-left:20px; }
}
@media (max-width:720px) {
  .project-workspace,
  .client-dashboard { width:min(calc(100% - 28px),1420px); padding-top:22px; }
  .project-workspace__hero-row,
  .project-task-hero,
  .project-kanban__intro,
  .client-dashboard__hero { align-items:flex-start; flex-direction:column; padding:22px; }
  .project-workspace__actions,
  .project-workspace__actions .project-button,
  .project-task-hero > .project-button,
  .project-kanban__intro > .project-button,
  .client-dashboard__hero > .project-button { width:100%; }
  .project-workspace__facts,
  .project-workspace__lower-grid,
  .project-workspace__task-grid,
  .project-participants,
  .project-milestones,
  .project-task-people,
  .project-attachments,
  .project-task-picker > div,
  .client-dashboard__metrics,
  .client-project-grid { grid-template-columns:1fr; }
  .project-workspace__facts > div { border-right:0; border-bottom:1px solid var(--project-border); }
  .project-workspace__facts > div:last-child { border-bottom:0; }
  .project-task-row,
  .project-task-list--milestone .project-task-row { grid-template-columns:minmax(0,1fr) auto; gap:9px 12px; padding:15px; }
  .project-task-row__identity { grid-column:1 / -1; }
  .project-task-row__date { align-self:center; }
  .project-task-row__action { justify-content:flex-end; }
  .project-dialog__grid { grid-template-columns:1fr; }
  .project-dialog__actions { flex-direction:column-reverse; }
  .project-dialog__actions .project-button { width:100%; }
  .project-blocker { grid-template-columns:1fr; gap:6px; }
  .project-detail-list { grid-template-columns:1fr; }
  .project-detail-list > div { border-right:0; border-bottom:1px solid #EEF0F3 !important; }
  .project-detail-list > div:last-child { border-bottom:0 !important; }
  .project-kanban { grid-template-columns:1fr; }
  .project-kanban__cards { min-height:0; }
  .client-shell__header { grid-template-columns:auto auto 1fr; gap:10px; }
  .client-shell__menu { display:block; }
  .client-shell__nav { position:absolute; top:64px; right:14px; left:14px; display:none; align-items:stretch; flex-direction:column; padding:10px; border:1px solid #E5E7EB; border-radius:12px; background:#fff; box-shadow:0 14px 32px rgba(0,0,0,.12); }
  .client-shell__nav.is-open { display:flex; }
  .client-shell__identity { justify-content:flex-end; }
  .client-shell__identity > span { display:none; }
  .client-project-list article { grid-template-columns:1fr auto; }
  .client-project-list time { display:none; }
}
@media (max-width:420px) {
  .project-workspace,
  .client-dashboard { width:min(calc(100% - 20px),1420px); }
  .project-workspace__hero > .project-workspace__eyebrow { padding-right:18px; padding-left:18px; }
  .project-workspace__hero-row,
  .project-task-hero,
  .project-kanban__intro,
  .client-dashboard__hero { padding:18px; }
  .project-card__head { padding:17px; }
  .project-card--summary,
  .project-card--milestone-progress { padding:20px !important; }
  .project-comments,
  .project-simple-list,
  .project-activity { padding-right:17px; padding-left:17px; }
  .project-comment-form { margin-right:17px; margin-left:17px; }
  .project-dialog > form { padding:20px 18px; }
  .client-shell__brand img { height:30px; }
}

/* September UI audit: Achievement/PIP/Goal details and Team Leader workspace. */
.dash-audit {
  width:100%; min-width:0; max-width:1280px; margin:0 auto; padding:32px 28px 64px;
  color:#0A0A0A; background:#FAFAF7; font-family:"Roboto",sans-serif;
}
.dash-audit, .dash-audit *, .dash-audit *::before, .dash-audit *::after { box-sizing:border-box; }
.dash-audit [hidden] { display:none !important; }
.dash-audit h1, .dash-audit h2, .dash-audit h3, .dash-audit p, .dash-audit label,
.dash-audit input, .dash-audit select, .dash-audit textarea, .dash-audit button, .dash-audit a {
  font-family:"Roboto",sans-serif !important; text-transform:none; letter-spacing:normal;
}
.dash-audit h1 { margin:14px 0 12px; font-size:40px; line-height:1.15; font-weight:800; letter-spacing:-.02em; color:#0A0A0A; }
.dash-audit h2 { margin:0; font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.01em; color:#0A0A0A; }
.dash-audit h3 { margin:0 0 8px; font-size:14px; line-height:1.3; font-weight:600; color:#0A0A0A; }
.dash-audit h1, .dash-audit h2, .dash-audit h3 { overflow-wrap:anywhere; }
.dash-audit p { margin:0; font-size:14px; line-height:1.6; font-weight:400; color:#4B5563; overflow-wrap:anywhere; }
.dash-audit__header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:28px; }
.dash-audit__header > div { min-width:0; }
.dash-audit__header p { max-width:650px; }
.dash-audit__eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.dash-audit .dash-audit__chip, .dash-audit .dash-audit__meta, .dash-audit .dash-audit__label {
  font-family:"Roboto Mono",monospace !important; font-size:10px; line-height:1.4; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.dash-audit__chip { display:inline-flex; background:#0A0A0A; color:#C5F154; padding:4px 8px; border-radius:4px; }
.dash-audit__meta, .dash-audit__label { color:#6B7280; }
.dash-audit__card { min-width:0; display:flex; flex-direction:column; gap:18px; padding:28px; margin-bottom:24px; background:#fff; border:1px solid #E5E7EB; border-radius:18px; box-shadow:none; }
.dash-audit__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.dash-audit__grid > .dash-audit__card { margin-bottom:0; }
.dash-audit__grid + .dash-audit__card, .dash-audit__grid + .dash-audit__grid { margin-top:24px; }
.dash-audit__grid--stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:24px; }
.dash-audit__stat { padding:22px 24px; gap:16px; }
.dash-audit__stat strong { font-size:44px; line-height:1; font-weight:800; letter-spacing:-.02em; }
.dash-audit__row, .dash-audit__toolbar, .dash-audit__actions { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.dash-audit__row > div { min-width:0; }
.dash-audit__person { display:flex; align-items:center; gap:16px; }
.dash-audit__avatar { display:grid; place-items:center; flex-shrink:0; width:64px; height:64px; background:#F5F1E8; border:1px solid #E5E7EB; border-radius:50%; font-size:22px; font-weight:700; }
.dash-audit__skills { display:flex; gap:8px; flex-wrap:wrap; }
.dash-audit__tag { display:inline-flex; padding:5px 10px; background:#F0EBDC; border-radius:999px; font-size:13px; font-weight:500; }
.dash-audit__status { display:inline-flex; align-items:center; gap:6px; width:fit-content; padding:5px 10px; background:#0A0A0A; color:#C5F154; border-radius:999px; font-family:"Roboto Mono",monospace; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.dash-audit__status::before { content:""; width:6px; height:6px; flex-shrink:0; background:currentColor; border-radius:50%; }
.dash-audit__status--muted { background:#fff; color:#6B7280; border:1px solid #E5E7EB; }
.dash-audit .dash-audit__button {
  display:inline-flex; justify-content:center; align-items:center; gap:8px; width:auto; max-width:none; min-height:40px;
  padding:11px 18px; border:1px solid #0A0A0A; border-radius:10px; background:#0A0A0A; color:#C5F154;
  font-size:14px; line-height:18px; font-weight:500; letter-spacing:normal; text-decoration:none; cursor:pointer;
}
.dash-audit .dash-audit__button:hover { background:#1A1A1A; color:#C5F154; text-decoration:none; }
.dash-audit .dash-audit__button--ghost { border-radius:999px; background:transparent; color:#0A0A0A; }
.dash-audit .dash-audit__button--ghost:hover { background:#F5F1E8; color:#0A0A0A; }
.dash-audit .dash-audit__button:disabled { cursor:default; background:#E5E7EB; border-color:#E5E7EB; color:#6B7280; }
.dash-audit a:focus-visible, .dash-audit button:focus-visible, .dash-audit input:focus-visible,
.dash-audit select:focus-visible, .dash-audit textarea:focus-visible, .dash-audit summary:focus-visible { outline:2px solid #0A0A0A; outline-offset:3px; }
.dash-audit__form { display:flex; flex-direction:column; gap:24px; }
.dash-audit__form .dash-audit__card { margin-bottom:0; }
.dash-audit__field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.dash-audit__field label { font-size:13px; font-weight:500; color:#0A0A0A; margin:0; }
.dash-audit input:not([type="hidden"]):not([type="checkbox"]), .dash-audit select, .dash-audit textarea {
  width:100%; min-width:0; height:48px; padding:0 14px; margin:0; border:1px solid #E5E7EB; border-radius:10px;
  color:#0A0A0A; background:#fff; font-size:15px; line-height:22px; font-weight:400; box-shadow:none;
}
.dash-audit textarea { height:auto; min-height:120px; padding:14px; resize:vertical; }
.dash-audit input[readonly] { background:#FAFAF7; }
.dash-audit input[type="file"] { display:block !important; pointer-events:auto !important; position:static !important; width:100% !important; height:auto !important; inset:auto !important; opacity:1 !important; visibility:visible !important; min-height:48px; padding:12px !important; }
.dash-audit input[type="file"]::file-selector-button { margin-right:12px; padding:8px 12px; border:0; border-radius:8px; background:#0A0A0A; color:#C5F154; font-family:"Roboto",sans-serif; cursor:pointer; }
.dash-audit input::placeholder, .dash-audit textarea::placeholder { color:#9CA3AF; font-weight:400; }
.dash-audit__table-wrap { max-width:100%; overflow-x:auto; }
.dash-audit__table { width:100%; min-width:650px; border-collapse:collapse; box-shadow:none; }
.dash-audit__table th { padding:0 16px 14px 0; border-bottom:1px solid #E5E7EB; color:#6B7280; text-align:left; font-family:"Roboto Mono",monospace; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.dash-audit__table td { padding:16px 16px 16px 0; border-bottom:1px solid #E5E7EB; font-size:14px; line-height:20px; vertical-align:middle; }
.dash-audit__table td:last-child { padding-right:0; }
.dash-audit__table .dash-audit__actions { justify-content:flex-start; gap:8px; flex-wrap:nowrap; }
.dash-audit__table .dash-audit__button { font-size:13px; padding:8px 16px; border-radius:8px; white-space:nowrap; }
.dash-audit__toolbar input[type="search"] { max-width:320px; }
.dash-audit__pagination { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dash-audit__pagination button { width:36px; height:36px; border:1px solid #E5E7EB; border-radius:8px; background:white; color:#0A0A0A; font-size:13px; }
.dash-audit__pagination button[aria-current="page"] { background:#0A0A0A; color:#C5F154; }
.dash-audit__empty, .dash-audit__notice { padding:24px; border:1px dashed #D8CFB8; border-radius:14px; background:#F5F1E8; }
.dash-audit__empty { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.dash-audit__notice { font-size:14px; line-height:22px; color:#0A0A0A; }
.dash-audit__copy { white-space:pre-line; overflow-wrap:anywhere; }
.dash-audit__list { margin:0; padding-left:20px; color:#4B5563; font-size:14px; line-height:1.6; }
.dash-audit__list li + li { margin-top:8px; }
.dash-audit__rating { display:flex; flex-direction:column; gap:10px; padding:16px 0; border-top:1px solid #F0EBDC; }
.dash-audit__rating:first-of-type { border-top:0; padding-top:0; }
.dash-audit__details { padding:18px 0; border-top:1px solid #F0EBDC; }
.dash-audit__details:first-of-type { border-top:0; padding-top:0; }
.dash-audit__details summary { font-size:14px; font-weight:600; cursor:pointer; }
.dash-audit__details p { margin-top:14px; }
.dash-audit__progress { width:100%; height:8px; background:#F3F4F6; border-radius:999px; overflow:hidden; }
.dash-audit__progress > span { display:block; height:100%; background:#C5F154; border-radius:999px; }
.dash-audit__filters { display:flex; gap:8px; flex-wrap:wrap; }
.dash-audit__filters button { padding:8px 12px; border:1px solid #E5E7EB; border-radius:10px; color:#6B7280; background:#fff; font-size:13px; font-weight:500; }
.dash-audit__filters button[aria-pressed="true"] { border-color:#0A0A0A; color:#C5F154; background:#0A0A0A; }
.dash-audit__goal-list { display:flex; flex-direction:column; gap:18px; }
.dash-audit__goal { display:flex; flex-direction:column; gap:14px; padding:24px; border:1px solid #E5E7EB; border-radius:14px; }
.dash-audit__dialog { width:min(700px,calc(100vw - 32px)); min-width:0; max-width:calc(100vw - 32px); max-height:85vh; padding:28px; border:1px solid #E5E7EB; border-radius:18px; background:#fff; color:#0A0A0A; }
.dash-audit__dialog::backdrop { background:rgba(10,10,10,.55); }
.dash-audit__dialog > div, .dash-audit__dialog > p, .dash-audit__dialog > ul { margin-bottom:18px; }
.dash-audit__files { display:flex; flex-wrap:wrap; gap:10px; }
.dash-audit__files > div { padding:12px; border:1px solid #E5E7EB; border-radius:10px; font-size:13px; }
.dash-audit__files button { border:0; color:#0A0A0A; background:transparent; text-decoration:underline; font-size:12px; padding:6px; }
@media(max-width:900px) {
  .dash-audit__grid--stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .dash-audit { padding:24px 16px 48px; }
  .dash-audit h1 { font-size:30px; }
  .dash-audit__header { flex-direction:column; gap:18px; }
  .dash-audit__card { padding:22px 18px; }
  .dash-audit__grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .dash-audit__grid--stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .dash-audit__stat { padding:18px 14px; }
  .dash-audit__stat strong { font-size:34px; }
  .dash-audit__row { align-items:flex-start; }
  .dash-audit__toolbar { align-items:stretch; }
  .dash-audit__toolbar input[type="search"] { max-width:none; }
  .dash-audit__goal { padding:18px; }
  .dash-audit__dialog { padding:22px 18px; }
}

/* PIP detail: evidence filenames remain within the existing audit cards. */
.dash-pipdetail .dash-audit__list a { overflow-wrap:anywhere; }

/* Employee Request Credits — migrated from the legacy inline style. */

  .request-credits-v2 {
    --inkqe-lime: #C5F154;
    --inkqe-black: #0A0A0A;
    --inkqe-muted: #58627a;
    --inkqe-soft: #f7f8fa;
    --inkqe-border: #dfe4ea;
    --inkqe-text: #0A0A0A;

    width: 100%;
    min-height: calc(100vh - 90px);
    padding: 42px 42px 72px;
    background: #f7f8fa;
    color: var(--inkqe-text);
    font-family: inherit;
  }

  .request-credits-v2 *,
  .request-credits-v2 *::before,
  .request-credits-v2 *::after {
    box-sizing: border-box;
  }

  .request-credits-v2__wrap {
    max-width: 1180px;
    margin: 0 auto;
  }

  .request-credits-v2__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 44px;
  }

  .request-credits-v2__hero,
  .request-credits-v2__credit-card,
  .request-credits-v2__card {
    background: #fff;
    border: 1px solid var(--inkqe-border);
    border-radius: 18px;
  }

  .request-credits-v2__hero {
    padding: 42px 44px;
  }

  .request-credits-v2__eyebrow-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
  }

  .request-credits-v2__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--inkqe-lime);
    color: var(--inkqe-black);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
  }

  .request-credits-v2__eyebrow {
    color: #9aa1b5;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
  }

  .request-credits-v2__title {
    margin: 0 0 14px;
    color: var(--inkqe-black);
    font-size: 34px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.055em;
  }

  .request-credits-v2__subtitle {
    margin: 0;
    max-width: 720px;
    color: #33415c;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
  }

  .request-credits-v2__credit-card {
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 180px;
  }

  .request-credits-v2__credit-card span {
    color: var(--inkqe-black);
    font-size: 15px;
    font-weight: 800;
  }

  .request-credits-v2__credit-card strong {
    margin-top: 10px;
    color: var(--inkqe-black);
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .request-credits-v2__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
  }

  .request-credits-v2__card {
    padding: 34px 36px;
  }

  .request-credits-v2__section-head {
    margin-bottom: 28px;
  }

  .request-credits-v2__section-title {
    margin: 14px 0 8px;
    color: var(--inkqe-black);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .request-credits-v2__section-copy {
    margin: 0;
    color: #4b5872;
    font-size: 15px;
    line-height: 1.5;
  }

  .request-credits-v2__options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
  }

  .request-credits-v2__option {
    min-height: 84px;
    padding: 18px 14px;
    border: 1px solid var(--inkqe-border);
    border-radius: 16px;
    background: #fff;
    color: var(--inkqe-black);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.04em;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
  }

  .request-credits-v2__option:hover,
  .request-credits-v2__option:focus {
    border-color: var(--inkqe-black);
    background: #fbfff3;
    outline: none;
    transform: translateY(-1px);
  }

  .request-credits-v2__bulk {
    width: 100%;
    min-height: 54px;
    border: 1px solid var(--inkqe-black);
    border-radius: 999px;
    background: var(--inkqe-black);
    color: var(--inkqe-lime);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    margin-bottom: 24px;
  }

  .request-credits-v2__field {
    margin-top: 12px;
  }

  .request-credits-v2__field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    color: var(--inkqe-black);
    font-size: 13px;
    font-weight: 800;
  }

  .request-credits-v2__field small {
    color: #9aa1b5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .request-credits-v2__input {
    width: 100%;
    height: 52px;
    border: 1px solid var(--inkqe-border);
    border-radius: 12px;
    padding: 0 16px;
    background: #fff;
    color: var(--inkqe-black);
    font-size: 15px;
    font-weight: 700;
  }

  .request-credits-v2__dynamic {
    margin-top: 16px;
  }

  .request-credits-v2__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
  }

  .request-credits-v2__notice {
    margin-top: 24px;
    scroll-margin-top: 100px;
    font-family: "Roboto", sans-serif;
  }

  .request-credits-v2__notice[hidden] { display: none !important; }
  .request-credits-v2__notice:focus-visible {
    outline: 2px solid var(--inkqe-black);
    outline-offset: 4px;
  }
  .request-credits-v2__notice .dash-billing-gate__chip {
    justify-self: start;
    font-family: "Roboto Mono", monospace !important;
  }
  .request-credits-v2__notice h2 {
    font-family: "Roboto", sans-serif !important;
    letter-spacing: -0.025em;
    font-weight: 700;
  }
  .request-credits-v2__notice p { font-family: "Roboto", sans-serif !important; }
  .request-credits-v2__notice .request-credits-v2__back {
    min-height: 44px;
    padding: 0 18px;
    background: transparent;
    color: var(--inkqe-black);
    font-family: "Roboto", sans-serif !important;
    font-size: 13px;
  }

  .request-credits-v2__submit,
  .request-credits-v2__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 12px;
    border: 1px solid var(--inkqe-black);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
  }

  .request-credits-v2__submit {
    background: var(--inkqe-black);
    color: var(--inkqe-lime);
  }

  .request-credits-v2__back {
    background: #fff;
    color: var(--inkqe-black);
  }

  .request-credits-v2__side {
    display: grid;
    gap: 18px;
  }

  .request-credits-v2__info {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--inkqe-border);
    border-radius: 18px;
  }

  .request-credits-v2__info h3 {
    margin: 0 0 12px;
    color: var(--inkqe-black);
    font-size: 19px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.035em;
  }

  .request-credits-v2__info p {
    margin: 0;
    color: #4b5872;
    font-size: 14px;
    line-height: 1.55;
  }

  .request-credits-v2__info-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
  }

  .request-credits-v2__info-list li {
    display: flex;
    gap: 10px;
    color: #2f3a52;
    font-size: 13px;
    line-height: 1.45;
  }

  .request-credits-v2__info-list span {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--inkqe-lime);
    color: var(--inkqe-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
  }

  @media (max-width: 1100px) {
    .request-credits-v2__top,
    .request-credits-v2__grid {
      grid-template-columns: 1fr;
    }

    .request-credits-v2__options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .request-credits-v2 {
      padding: 24px 18px 48px;
    }

    .request-credits-v2__hero,
    .request-credits-v2__card {
      padding: 28px 22px;
    }

    .request-credits-v2__title {
      font-size: 28px;
    }

    .request-credits-v2__options {
      grid-template-columns: 1fr;
    }

    .request-credits-v2__actions {
      flex-direction: column;
      align-items: stretch;
    }

    .request-credits-v2__submit,
    .request-credits-v2__back {
      width: 100%;
    }
  }

/* Keep the entire credit page on the editorial type scale. */
.request-credits-v2 { background:#FAFAF7; font-family:"Roboto",sans-serif; }
.request-credits-v2 h1, .request-credits-v2 h2, .request-credits-v2 h3, .request-credits-v2 p,
.request-credits-v2 button, .request-credits-v2 input, .request-credits-v2 label, .request-credits-v2 a,
.request-credits-v2 li, .request-credits-v2 strong, .request-credits-v2 span {
  font-family:"Roboto",sans-serif !important;
}
.request-credits-v2 .request-credits-v2__pill, .request-credits-v2 .request-credits-v2__eyebrow,
.request-credits-v2 .request-credits-v2__field small, .request-credits-v2 .dash-billing-gate__chip {
  font-family:"Roboto Mono",monospace !important; font-weight:600; letter-spacing:.1em;
}
.request-credits-v2__pill { border-radius:4px; color:#C5F154; background:#0A0A0A; font-size:10px; min-height:24px; padding:4px 8px; }
.request-credits-v2__eyebrow { font-size:11px; font-weight:500; }
.request-credits-v2__title { font-size:40px; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
.request-credits-v2__section-title { font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.01em; }
.request-credits-v2__info h3 { font-size:22px; line-height:1.2; font-weight:800; letter-spacing:-.01em; }
.request-credits-v2__option { font-weight:600; letter-spacing:normal; }
.request-credits-v2__credit-card strong { font-size:44px; font-weight:800; letter-spacing:-.02em; }
.request-credits-v2__credit-card span, .request-credits-v2__field label { font-weight:500; }
.request-credits-v2__bulk, .request-credits-v2__submit, .request-credits-v2__back { font-size:14px; font-weight:500; letter-spacing:normal; }
.request-credits-v2__back { color:#0A0A0A; }
.request-credits-v2__input { font-weight:400; letter-spacing:normal; background:#fff; }
@media(max-width:600px) { .request-credits-v2 { padding:24px 16px 48px; } .request-credits-v2__title { font-size:30px; } }

/* Emerging Talent edit profile typography. Keep the legacy Poppins rules
   outside this view while matching the current Roboto/Roboto Mono system. */
.asp-edit-page h1,
.asp-edit-page h2,
.asp-edit-page p,
.asp-edit-page label,
.asp-edit-page input,
.asp-edit-page select,
.asp-edit-page textarea,
.asp-edit-page button,
.asp-edit-page a,
.asp-edit-page small,
.asp-edit-page span {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.asp-edit-page .asp-pill-dark,
.asp-edit-page .asp-kicker-text,
.asp-edit-page .asp-section-label,
.asp-edit-page .asp-required {
  font-family: "Roboto Mono", "Roboto", monospace !important;
}