/*
 Template Name: Canvey
 Author: Denis.P
 File: Main Style css
 */
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /* ==============
   General
 ===================*/
 
/* Global typography baseline */
body {
  font-family: 'Roboto', sans-serif;
  /*color: #5b636d;
  font-size: 17px;*/
}

/* ==============
   Feature Section Typography
   Usage: add .cv-feature-section to the parent container,
   then use <h2> for title, <h4> for sub-headings, <p> for body text.
=================== */
.cv-feature-section h2 {
  font-size: 32px;
  font-weight: bold;
  color: #000000;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
    line-height: 40px;
}

.cv-feature-section h2:has(+ h4) {
  margin-bottom: 18px;
}

.cv-feature-section h4 {
  font-size: 20px;
  font-weight: 500;
  color: #666666;
  margin-bottom: 0.75rem;
}

.cv-feature-section h2 + h4 {
  margin-top: 0;
  margin-bottom: 18px;
}

.cv-feature-section p {
  font-size: 17px;
  color: #666666;
  line-height: 1.6;
}

.cv-feature-section strong {
  color: #666666;
}

/* ==============
   Workforce Pulse Cards
   Shared by engage_signal + exit_signal
=================== */
.workforce-pulse {
  max-width: 100%;
  animation: fadeInUp 0.6s ease-out;
}

.pulse-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pulse-header--stacked {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.pulse-header--stacked h2 {
  margin-bottom: 0;
}

.pulse-subtitle {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #6B7280;
  line-height: 1.45;
  max-width: 36rem;
}

.pulse-accent {
  width: 4px;
  height: 32px;
  background: linear-gradient(180deg, #10B981 0%, #3B82F6 100%);
  border-radius: 2px;
}

.pulse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.pulse-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pulse-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.pulse-card.urgent { border: 2px solid #FCA5A5; }
.pulse-card.warning { border: 2px solid #FCD34D; }
.pulse-card.stable { border: 2px solid #6EE7B7; }
.pulse-card.monitor { border: 2px solid #FB923C; }
.pulse-card.silent { border: 2px solid #D1D5DB; }

.card-bg-gradient {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
}

.urgent .card-bg-gradient { background: radial-gradient(circle, #FEE2E2 0%, transparent 70%); }
.warning .card-bg-gradient { background: radial-gradient(circle, #FEF3C7 0%, transparent 70%); }
.stable .card-bg-gradient { background: radial-gradient(circle, #D1FAE5 0%, transparent 70%); }
.monitor .card-bg-gradient { background: radial-gradient(circle, #FED7AA 0%, transparent 70%); }
.silent .card-bg-gradient { background: radial-gradient(circle, #F3F4F6 0%, transparent 70%); }

.workforce-pulse .card-content {
  position: relative;
  z-index: 1;
}

.workforce-pulse .card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: none !important;
  background-color: rgb(255 255 255 / 3%) !important;
}

.card-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

.urgent .card-icon { background: #EF4444; }
.warning .card-icon { background: #F59E0B; }
.stable .card-icon { background: #10B981; }
.monitor .card-icon { background: #F97316; }
.silent .card-icon { background: #9CA3AF; }

.card-count {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: 'Space Grotesk', sans-serif;
}

.urgent .card-count { color: #EF4444; }
.warning .card-count { color: #F59E0B; }
.stable .card-count { color: #10B981; }
.monitor .card-count { color: #F97316; }
.silent .card-count { color: #6B7280; }

.card-label {
  font-size: 16px;
  font-weight: 500;
  color: #4B5563;
  line-height: 1.4;
}

.card-status {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.workforce-pulse .pulse-card.urgent .card-label { color: #EF4444 !important; }
.card-status--urgent { color: #EF4444; }
.workforce-pulse .pulse-card.warning .card-label { color: #D97706 !important; }
.card-status--warning { color: #D97706; }
.workforce-pulse .pulse-card.stable .card-label { color: #059669 !important; }
.card-status--stable { color: #059669; }
.workforce-pulse .pulse-card.monitor .card-label { color: #EA580C !important; }
.card-status--monitor { color: #EA580C; }
.workforce-pulse .pulse-card.silent .card-label { color: #9CA3AF !important; }
.card-status--silent { color: #6B7280; }

.pulse-footer {
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
  border-radius: 12px;
  padding: 16px 20px;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.pulse-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 12rem;
}

.pulse-footer-updated {
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
  white-space: nowrap;
  flex-shrink: 0;
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3bc850;
  flex-shrink: 0;
  animation: pulse-animation 2s ease-in-out infinite;
}

.footer-text {
  font-size: 14px;
  color: #6B7280;
  font-weight: 500;
  margin: 0;
}

.footer-link {
  color: #3bc850;
  text-decoration: underline;
  text-decoration-color: #3bc850;
  text-underline-offset: 2px;
  cursor: pointer;
}

.footer-link:hover {
  color: #46cc5a;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse-animation {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

.pulse-card:nth-child(1) { animation: scaleIn 0.5s ease-out 0s both; }
.pulse-card:nth-child(2) { animation: scaleIn 0.5s ease-out 0.1s both; }
.pulse-card:nth-child(3) { animation: scaleIn 0.5s ease-out 0.2s both; }
.pulse-card:nth-child(4) { animation: scaleIn 0.5s ease-out 0.3s both; }

@media (max-width: 768px) {
  .pulse-grid { grid-template-columns: 1fr; }
  .card-count { font-size: 28px; }
}
.btn-wd-200 {
  width: 200px;
}

.bg-convey-green {
  background-color: #3bc850!important;
}

.badge-convey-green {
    background-color: #3bc850!important;
    color: white;
}

.text-convey-green {
  color: #3bc850!important;
}

.bg-light-grey {
  background-color: #b5b3b3!important;
}

.bg-darker-grey {
  background-color: #828181!important;
}
.bg-light-black {
  background-color: #444444!important;
}
.bg-rich-red {
  background-color: #ba4a4b!important;
}

.bg-emerald {
  background-color: #3BC850!important;;
  border: 1px solid #3BC850!important;;
}

.bg-emerald:hover {
  background-color: #066510!important;;
  border: 1px solid #066510!important;;
}

.color-black-light {
  color: #666666;
}

.disable-point-event {
    pointer-events: none;
}

.card-custom-padding {
  padding-bottom: 7px;
  padding-top: 7px;
}

.custom-padding-top {
  padding-top: 20px;
}

.custom-padding-btop {
  padding-top: 11px;
  padding-bottom: 0px;
}

.no-border-table {
  border-collapse: collapse;
  width: 100%;
}

.no-border-table th, td{
  padding: 8px;
  text-align: left;
  border-bottom: 0px solid #ddd;
}

.display-inline {
  display: inline-block;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  grid-gap: 20px;
}

.grid-wrapper #action_board {
  grid-row: 1;
  grid-column: 1 / 4;
  text-align: left;
}

.grid-wrapper > div {
  border: 1px solid #cccccc;
  padding: 10px 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.credit-card-p-div {
  border-color: white;
  border-radius: 16px;
  background: #4c5849;
}

.credit-card-c-div {
  border-radius: 12px;
  background: #dadad4;
}

.btn-buy-credit {
  border-radius: 8px;
  background: #314273;
  color: white;
}

.color-dimgrey {
  color: dimgrey;
}

.search-result-p {
  border-left-style: solid;
  border-color: #dfdfdf;
  border-width: 2px;
  padding: 8px;
}

.box-shadow-note {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

.search-result-fp {
  padding-left: 20px!important;
  border-color:white;
}

.num-green-circle {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  padding: 1px;
  background: #fff;
  border: 4px solid #00FF00;
  color: #00FF00;
  text-align: center;
  font: 35px Arial, sans-serif;
  font-weight: bold;
}

.line-height-50 {
  line-height: 50px!important;
}

.line-height-40 {
  line-height: 40px!important;
}

.valign-init {
  vertical-align: initial!important;
}

.bg-custom-grey {
  background: #f2f5f7;
}

table > thead > tr > th {
  color: #3C4959 !important;
}

.transform-13{
transform: scale(1.3);
}

.circle-text{
  font-size: 25px !important;
  line-height: 40px !important;
  width: 200px !important;
  height: 200px !important;
}

.alert-convey-success{
  background-color: #3bc850!important;
  color: #ffffff!important;
}
.alert-convey-warning{
  background-color: #ffbb44!important;
  color: #ffffff!important;
}
.alert-convey-danger{
  background-color: #ba4a4b!important;
  color: #ffffff!important;
}

.alertify .dialog div >nav >button {
  background-color: #3bc850!important;
  color: #ffffff!important;
}

.alertify-logs > .success {
    background-color: #3bc850!important;
}

.page-link {
    color: #212529 !important;
}

.page-item.active .page-link {
    background-color: #3BC850 !important;
    border-color: #3BC850 !important;
    color: white !important;
}


.nav-pills .nav-link.active {
    background-color: #3BC850 !important;
}

.no-bg {
    background-color: #ffffff00;
    border: none;
}
.btn-border {
    border-radius: 5px;
}

.btn-move-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 50px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #777777;
    color: white;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 10px;
}

.btn-move-top:hover {
    background-color: #908d8d;
}

#form_overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #FFFFFF;
    display: none;
}

.form_overlay_message{
    text-align: center;
    position: relative;
    top: 25%;
}

.form_overlay_message > span{
    color: #403d3d;
    font-size: 35px;
    /*font-weight: 600;*/
}

.disable-input-label {
    border: solid 1px #ced4da;
    border-radius: .25rem;
    padding: 0 0.75rem;
}

.invite-icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #ffffff;
    line-height: 25px;
    overflow: hidden;
    border: 5px solid #ffffff;
    border-radius: 10%;
    -webkit-box-shadow: 0 0 3px #656363;
    box-shadow: 0 0 3px #656363;
    -webkit-transition: all .3s;
    transition: all .3s;
    padding-bottom: 25px;
}

.country-class:hover {
    cursor: pointer;
}

li.float-none:hover {
    cursor: pointer;
}

a.downloadable-tag:hover {
    color: #3BC850;
}

.notification-div {
  background-image: url('../images/polite_request.png');
  background-repeat: no-repeat;
  background-size: 400px 200px;
  position:fixed;
  width: 400px;
  height: 200px;
  bottom: 0px;
  right: 0;
  transition: all .5s ease-in;
  z-index: 999;
  margin: 1px;
}

.notification-div.hide {
  transform: translateX(+101%);
}

.search-option {
  padding: 10px;
  border-radius: 40px;
  text-align: center;
  background: gray;
  color: white;
}

.search-option-wrapper {
  border: solid 2px #bdbdbd;
  border-radius: 45px;
  padding: 6px;
}

.business-area .business-footer-2x {
  padding-top: 48px;
}

.footer-links-container {
  width: 100%;
  text-align: center;
}

.footer-links-container ul {
  margin: 10px auto;
  line-height: 1.4;
  padding-left: 0;
}

.footer-links-container ul li {
  display: inline;
  text-align: center;
}

.footer-links-container a {
  font-size: 16px;
  color: #333333;
}

.footer-links-container a:hover {
  color: #3cc951;
}

.radius-10 {
    border-radius: 10px !important;
}

.border-info {
    border-left: 5px solid  #0dcaf0 !important;
}
.border-danger {
    border-left: 5px solid  #fd3550 !important;
}
.border-success {
    border-left: 5px solid #3bc750 !important;
}
.border-warning {
    border-left: 5px solid  #ffc107 !important;
}

.stats-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: .25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
}
.bg-gradient-scooter {
    background: #17ead9;
    background: -webkit-linear-gradient(
        45deg
        , #17ead9, #6078ea)!important;
    background: linear-gradient(
        45deg
        , #17ead9, #6078ea)!important;
}
.widgets-icons-2 {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    font-size: 27px;
    border-radius: 10px;
}
.rounded-circle {
    border-radius: 50%!important;
}
.text-white {
    color: #fff!important;
}
.ms-auto {
    margin-left: auto!important;
}
.bg-gradient-bloody {
    background: #f54ea2;
    background: -webkit-linear-gradient(
        45deg
        , #f54ea2, #ff7676)!important;
    background: linear-gradient(
        45deg
        , #f54ea2, #ff7676)!important;
}

.bg-gradient-ohhappiness {
    background: #00b09b;
    background: -webkit-linear-gradient(
        45deg
        , #1bef3a, #21672a)!important;
    background: linear-gradient(
        45deg
        , #1bef3a, #21672a)!important;
}

.bg-gradient-blooker {
    background: #ffdf40;
    background: -webkit-linear-gradient(
        45deg
        , #ffdf40, #ff8359)!important;
    background: linear-gradient(
        45deg
        , #ffdf40, #ff8359)!important;
}

.status-poster {
    /*width: 800px;*/

    position: relative;

    display: grid;
    grid-template-columns: repeat(2, 1fr);;
}

.status-poster .status-step-block-wrapper {
    padding: 20px;
    display: block;
    height: 100%;
}

.status-poster .status-step-block-wrapper:nth-child(1) .status-step-block,
.status-poster .status-step-block-wrapper:nth-child(3) .status-step-block {
    padding-right: 60px;
}

.status-poster .status-step-block-wrapper:nth-child(2) .status-step-block,
.status-poster .status-step-block-wrapper:nth-child(4) .status-step-block {
    padding-left: 60px;
}

.status-poster .status-step-block {
    /*background-color: darkred;*/
    border-radius: 25px;
    color: white;
    font-size: 1.1vw;
    height: 100%;

    padding: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.status-step-block .step-block-header {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.status-step-block .step-block-content {
    text-align: center;
}

.status-step-block .step-block-content p {
    margin: 0;
}

.step-block-header .header-icon-wrapper {
    width: 30px;
}

.header-icon-wrapper img {
    width: 100%;
}


.status-poster .progress-circle-wrapper {
    border-radius: 50%;
    width: 190px;
    height: 190px;
    background-color: white;

    padding: 20px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
}

.progress-circle-wrapper .progress-circle {
    color: white;
    font-weight: bold;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.progress-circle span:first-child {
    font-size: 35px;
    margin-bottom: 5px;
}

.progress-circle span:last-child {
    font-size: 25px;
}

.btn-width-100 {
    width: 100px;
}

.swal-header {
    border-color: #3bc850!important;
    color: #3bc850!important;
}

b, strong {
    font-weight: bolder!important;
}

.text-indent-1 {
    text-indent: 1rem!important;
}

p.question-check {
    display: inline-block;
}

.question-title[contenteditable]:empty:before {
    content: 'Type Option Here';
    display: inline-block;
}

.question-title[contenteditable]:empty:focus::before {
    content: 'Type Option Here';
}

td.details-control {
    background: url('../images/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../images/details_close.png') no-repeat center center;
}

td.green-check-tick::before {
    content: "\2714";
    color: #3bc850!important;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.record-content-border-danger {
    border: 2px solid #fd3550 !important;
    border-radius: 4px;
    padding: 5px;
}

.user-level-player-card {
    font-family: Arial, sans-serif;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    row-gap: 8px;
}

.user-level-insider-name {
    font-size: 22px;
    font-weight: 500;
    color: #111;
    margin-top: 8px;
    margin-bottom: 6px;
    line-height: 1.2;
}

.user-level-assists {
    color: gray;
    font-size: 14px;
}

.user-level-bars {
    display: flex;
    margin-top: 0;
    gap: clamp(4px, 1.4vw, 8px);
    width: 100%;
    max-width: min(392px, 100%);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    padding: 0 0.5rem;
}

.user-level-bar-parent {
    flex: 1 1 0;
    min-width: 0;
}

.user-level-bar {
    width: 100%;
    min-width: 0;
    min-height: clamp(26px, 7vw, 32px);
    /*aspect-ratio: 12 / 4;*/
    border-radius: 6px;
    background-color: #e5e5e5;
    color: #d4d4d4;
    font-size: clamp(7px, 0.18rem + 1.4vw, 11px);
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: clamp(0px, 0.06em, 0.5px);
    padding: 2px clamp(1px, 0.6vw, 4px);
    white-space: nowrap;
    box-sizing: border-box;
}

/*.bar.newbie {
    background-color: #b28704;
}

.bar.silver {
    background-color: #999999;
}

.bar.gold {
    background-color: #ffc107;
}

.bar.diamond {
    background-color: #e0e0e0;
}*/

.user-level-bars .user-level-active {
    outline-style: solid !important;
    /*outline-width: 3px !important;*/
    /*outline-offset: 3px;*/
}

.user-newbie-level-active {
    background-color: #3b82f6!important;
    color: #fff!important;
    font-weight: 700;
    /*outline: 3px solid #2f5597!important;*/
    /*outline-offset: 3px;*/
}

.user-silver-level-active {
    background-color: #9ca3af!important;
    color: #fff!important;
    font-weight: 700;
    /*outline: 3px solid #999999!important;*/
    /*outline-offset: 3px;*/
}

.user-gold-level-active {
    background-color: #d4af37!important;
    color: #fff!important;
    font-weight: 700;
    /*outline: 3px solid #ffc000!important;*/
    /*outline-offset: 3px;*/
}

.user-diamond-level-active {
    background-color: #0D0D0F!important;
    color: #fff!important;
    font-weight: 700;
}

.user-level-bar.user-level-newbie.past-level {
    background-color: #3b82f6!important;
    color: #fff!important;
}

.user-level-bar.user-level-silver.past-level {
    background-color: #9ca3af!important;
    color: #fff!important;
}

.user-level-bar.user-level-gold.past-level {
    background-color: #d4af37!important;
    color: #fff!important;
}

/* Shared insider-level arrow + message styling
   Use CSS vars for page-specific sizing overrides. */
.arrow-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--insider-arrow-gap, 6px);
}

.arrow-body {
    width: var(--insider-arrow-size, 12px);
    height: var(--insider-arrow-size, 12px);
    background-color: #3bc850;
}

.arrow-head {
    width: 0;
    height: 0;
    border-left: var(--insider-arrow-size, 12px) solid transparent;
    border-right: var(--insider-arrow-size, 12px) solid transparent;
    border-bottom: var(--insider-arrow-size, 12px) solid #3bc850;
}

.level-information-msg {
    display: inline-block;
    text-align: center;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    color: #404040;
    font-size: 15px;
    line-height: 1.6;
}

.level-information-msg-parent {
    height: var(--insider-msg-height, 2em);
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    padding-top: 6px;
    text-align: center;
}

/*.user-level-bar.user-level-newbie {
    background-color: #2f5597!important;
    color: white!important;
    font-weight: 500;
}

.user-level-bar.user-level-silver {
    background-color: #999999!important;
    color: white!important;
    font-weight: 500;
}

.user-level-bar.user-level-gold {
    background-color: #ffc000!important;
    color: white!important;
    font-weight: 500;
}

.user-level-bar.user-level-diamond {
    background-color: #000000!important;
    color: white!important;
    font-weight: 500;
}*/

.item-wrapper {
    position: relative;
    border-radius: 4px;
    background: white;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
    margin: 12px;
    padding: 12px;

}

.item-img {
    width: 100%;
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

.item-img:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.checked-using {
    position: absolute;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 4%;
    right: 4%;
    font-size: 20px;
    color: white;
    background-color: #3bc850;
    padding: 10px;
    border-radius: 50%;
}

.magnifying-glass {
    position: absolute;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: -3%;
    right: -2%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: white;
    background-color: #3bc850;
    padding: 10px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container:hover .magnifying-glass {
    opacity: 1;

}

.magnifying-glass:hover {
    cursor: pointer;
}

/* ==========================================
   BENEFIT LIST ITEM WITH GREEN TICK ICON
   ========================================== */

.benefit-list-item {
    position: relative;
    padding-left: 36px;
    margin-bottom: 15px;
    color: #5b636d;
    font-size: 16px;
    line-height: 1.4;
}

.benefit-list-item::before {
    content: "";
    background-image: var(--benefit-tick-image, url('../images/green_tick.png'));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px 24px;
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    top: 0;
}

/* Career Memory "Ask Question" box (Memory tab, subscribers only).
   Sits in a centre-aligned column, so the control itself is left-aligned and
   width-capped to keep it readable rather than stretching the full column. */
.cm-ask {
    width: 100%;
    max-width: 520px;
    margin: 4px auto 0;
    text-align: left;
}

.cm-ask-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #5b636d;
}

.cm-ask-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.cm-ask-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 15px;
    color: #3c4959;
    background-color: #fff;
}

.cm-ask-input:focus {
    outline: none;
    border-color: #3bc850;
    box-shadow: 0 0 0 2px rgba(59, 200, 80, 0.18);
}

.cm-ask-btn {
    flex: 0 0 auto;
    padding: 9px 18px;
    border: 0;
    border-radius: 4px;
    background-color: #3bc850;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.cm-ask-btn:hover:not(:disabled) {
    background-color: #2fa84f;
}

.cm-ask-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

.cm-ask-answer {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid #3bc850;
    background-color: #f6f8f6;
    border-radius: 0 4px 4px 0;
    color: #5b636d;
    font-size: 15px;
    line-height: 1.5;
}

.cm-ask-answer.is-pending {
    color: #8a939d;
    font-style: italic;
}

.cm-ask-answer.is-notice {
    border-left-color: #e0a12c;
    background-color: #fdf7ee;
    color: #6b563a;
}

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

.tick-accent-green {
    --benefit-tick-image: url('../images/green_tick.png');
}

.tick-accent-amber {
    --benefit-tick-image: url('../images/amber_tick.png');
}

.tick-accent-blue {
    --benefit-tick-image: url('../images/blue_tick.png');
}

/* Risk Reduction Infrastructure — subscribed side column callout */
.foresight-stronger-together {
    border: 1px solid #D97706;
    border-radius: 8px;
    padding: 16px 18px;
    margin-top: 8px;
    text-align: center;
}

.foresight-stronger-together-title {
    font-weight: 700;
    font-size: 16px;
    color: #111;
    margin: 0 0 10px 0;
}

.foresight-stronger-together-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #5b636d;
}

.foresight-stronger-together-accent {
    color: #D97706;
    font-weight: 600;
}

/* Subscribe column — savings accent matches infrastructure menu brand */
.foresight-brand-accent-amber .foresight-savings-accent {
    color: #D97706 !important;
}

.foresight-brand-accent-blue .foresight-savings-accent {
    color: #6FB6E8 !important;
}

.foresight-brand-accent-green .foresight-savings-accent {
    color: #3BC850 !important;
}

/* ==========================================
   HORIZONTAL NAV – MEGA TWO-COLUMN DROPDOWN
   ========================================== */

/* Green-highlighted product name suffix */
.text-brand {
    color: #3BC850 !important;
}

#topnav .navigation-menu > li.nav-menu-saferef > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-saferef:hover > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-saferef > a:hover > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-saferef.active > a > .nav-menu-label-accent {
    color: #D97706 !important;
}

#topnav .navigation-menu > li.nav-menu-career > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-career:hover > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-career > a:hover > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-career.active > a > .nav-menu-label-accent {
    color: #3BC850 !important;
}

#topnav .navigation-menu > li.nav-menu-foresight > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-foresight:hover > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-foresight > a:hover > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-foresight.active > a > .nav-menu-label-accent {
    color: #D97706 !important;
}

#topnav .navigation-menu > li.nav-menu-reputation > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-reputation:hover > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-reputation > a:hover > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-reputation.active > a > .nav-menu-label-accent {
    color: #6FB6E8 !important;
}

#topnav .navigation-menu > li.nav-menu-saferef > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-career > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-foresight > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-reputation > a > .nav-menu-toplink-text {
    color: #516277 !important;
}

#topnav .navigation-menu > li.nav-menu-saferef:hover > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-saferef > a:hover > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-career:hover > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-career > a:hover > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-foresight:hover > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-foresight > a:hover > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-reputation:hover > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-reputation > a:hover > .nav-menu-toplink-text {
    color: #3c4959 !important;
}

#topnav .navigation-menu > li.nav-menu-saferef.active > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-career.active > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-foresight.active > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-reputation.active > a > .nav-menu-toplink-text {
    color: #516277 !important;
}

/* TopDown: teal "Down" accent, and keep "Top" neutral on hover/active */
#topnav .navigation-menu > li.nav-menu-topdown > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-topdown:hover > a > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-topdown > a:hover > .nav-menu-label-accent,
#topnav .navigation-menu > li.nav-menu-topdown.active > a > .nav-menu-label-accent {
    color: #009688 !important;
}
#topnav .navigation-menu > li.nav-menu-topdown > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-topdown.active > a > .nav-menu-toplink-text {
    color: #516277 !important;
}
#topnav .navigation-menu > li.nav-menu-topdown:hover > a > .nav-menu-toplink-text,
#topnav .navigation-menu > li.nav-menu-topdown > a:hover > .nav-menu-toplink-text {
    color: #3c4959 !important;
}

/* Two-column megamenu layout */
@media (min-width: 992px) {
    #topnav .navigation-menu > li .submenu.mega-two-col {
        display: flex !important;
        flex-direction: row;
        width: 480px;
        min-height: 300px;
        padding: 0;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }

    #topnav .navigation-menu > li .submenu.mega-two-col > li:first-child {
        width: 50%;
        padding: 15px 0;
        background: #ffffff;
    }

    #topnav .navigation-menu > li .submenu.mega-two-col > li:first-child > ul {
        list-style: disc;
        padding-left: 35px;
        margin: 0;
    }

    #topnav .navigation-menu > li .submenu.mega-two-col > li:first-child > ul > li {
        list-style: disc;
        color: #333;
    }

    #topnav .navigation-menu > li .submenu.mega-two-col > li:first-child > ul > li > a {
        padding: 6px 10px 6px 0;
        color: #333;
        font-size: 16px;
    }

    #topnav .navigation-menu > li .submenu.mega-two-col > li:first-child > ul > li > a:hover {
        color: #3BC850;
    }

    #topnav .navigation-menu > li.nav-menu-amber .submenu.mega-two-col > li:first-child > ul > li > a:hover {
        color: #D97706;
    }

    #topnav .navigation-menu > li.nav-menu-blue .submenu.mega-two-col > li:first-child > ul > li > a:hover {
        color: #6FB6E8;
    }

    #topnav .navigation-menu > li.nav-menu-amber .submenu.mega-two-col .text-brand {
        color: #D97706 !important;
    }

    #topnav .navigation-menu > li.nav-menu-blue .submenu.mega-two-col .text-brand {
        color: #6FB6E8 !important;
    }

    /* Tagline column — default green; amber/blue per infrastructure group */
    #topnav .navigation-menu > li .submenu.mega-two-col > li.mega-tagline {
        width: 50%;
        background-color: #3BC850;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #topnav .navigation-menu > li.nav-menu-amber .submenu.mega-two-col > li.mega-tagline {
        background-color: #D97706;
    }

    #topnav .navigation-menu > li.nav-menu-blue .submenu.mega-two-col > li.mega-tagline {
        background-color: #6FB6E8;
    }

    .mega-tagline-content {
        padding: 20px 25px;
        text-align: center;
    }

    .mega-tagline-content p {
        color: #ffffff;
        font-size: 20px;
        margin: 0 0 8px 0;
        line-height: 1.4;
    }

    .mega-tagline-content p.mega-tagline-figure {
        font-size: 30px;
        font-weight: 700;
        margin: 14px 0 0 0;
        line-height: 1.1;
    }

    .mega-tagline-content p.mega-tagline-figure-sub {
        font-size: 17px;
        margin: 2px 0 0 0;
    }

    .mega-tagline-content ul {
        list-style: disc!important;
        padding-left: 20px;
        margin: 8px 0 0 0;
        text-align: left;
    }

    .mega-tagline-content ul li {
        color: #ffffff;
        font-size: 18px;
        line-height: 1.6;
    }

    /* Prevent hover color override on tagline items */
    #topnav .navigation-menu > li:hover .mega-tagline a,
    #topnav .navigation-menu > li:hover .mega-tagline p,
    #topnav .navigation-menu > li:hover .mega-tagline li {
        color: #ffffff;
    }

    /* Hover visibility overrides for megamenu */
    #topnav .navigation-menu > li.has-submenu:hover > .submenu.mega-two-col {
        visibility: visible;
        opacity: 1;
        margin-top: 0;
        display: flex !important;
    }
}

/* ==============
   Intro Row Layout
   Two-column flex layouts used across business pages
   (insight, engage_signal, exit_signal, direct-connect,
    endorse_me, past_track, trust_tag, team_fit, search, search-credits)
=================== */
.intro-row {
    display: flex;
    gap: 20px;
    flex-direction: row;
    background: #f2f5f7;
}

/* Left column — default flex: 7 (introduction tabs) */
.intro-col-main {
    flex: 7;
    background: white;
}

/* Modifier — flex: 9 (content / data tabs) */
.intro-col-main.intro-col-wide {
    flex: 9;
}

/* Right / side column — flex: 6 */
.intro-col-side {
    flex: 6;
    background: white;
}

/* Narrower side column — flex: 4 (search, search-credits) */
.intro-col-side.intro-col-narrow {
    flex: 4;
}

/* Card body border inside intro rows */
.intro-card-body {
    border-color: rgb(242 245 247);
}

/* Mobile: stack the megamenu columns vertically */
@media (max-width: 991px) {
    #topnav .navigation-menu > li .submenu.mega-two-col > li.mega-tagline {
        display: none;
    }

    #topnav .navigation-menu > li .submenu.mega-two-col > li:first-child > ul {
        list-style: disc;
        padding-left: 35px;
    }

    #topnav .navigation-menu > li .submenu.mega-two-col > li:first-child > ul > li {
        list-style: disc;
    }
}

/* ==============
   Article Flex Container & Dashboard Cards
   Shared by business & citizen index pages
=================== */
.article-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.article-flex-container .article-card-wrapper {
    flex: 0 0 calc(33.333% - 14px);
    min-width: 0;
    display: flex;
}

.article-flex-container .article-card-wrapper > .card {
    width: 100%;
}

.article-flex-container.m-b-20 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: stretch;
}

.article-flex-container.m-b-20 > .article-card-wrapper {
    min-width: 0;
    display: flex;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1) {
    grid-column: 3;
    grid-row: 1;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) > .card {
    background: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
    border-top: 4px solid #22c55e;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card {
    min-height: 500px;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card .dc-title .dc-title-main {
    color: rgba(255, 255, 255, 0.9);
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card .dc-body.dc-body-center {
    justify-content: center;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card .dc-score {
    margin: 18px 0 12px;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card .dc-score .dc-score-value {
    font-size: 150px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card .dc-score .dc-score-max {
    font-size: 62px;
    color: #22c55e;
    font-weight: 400;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card .dc-score-updated {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card .dc-link a {
    color: rgba(255, 255, 255, 0.95);
    border-color: transparent;
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2) .dashboard-card .dc-link a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 991px) {
    .article-flex-container .article-card-wrapper {
        flex: 0 0 calc(50% - 10px);
    }

    .article-flex-container.m-b-20 {
        display: flex;
        flex-wrap: wrap;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1),
    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(2),
    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 575px) {
    .article-flex-container .article-card-wrapper {
        flex: 0 0 100%;
    }
}

/* Dashboard summary cards */
.dashboard-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 25px;
}

@media (max-width: 1199px) {
    .dashboard-card {
        padding: 14px;
    }
}

.dashboard-card .dc-title {
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.25;
}

.dashboard-card .dc-title .dc-title-main {
    font-weight: 500;
    color: #666;
}

.dashboard-card .dc-title .dc-title-sub {
    font-weight: 500;
    color: #3BC850;
}

.dashboard-card .dc-title .dc-title-accent {
    font-weight: 500;
    color: #3BC850;
}

.dashboard-card .dc-body {
    flex: 1;
    min-width: 0;
}

.dashboard-card .dc-body.dc-body-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dashboard-card .dc-score {
    text-align: center;
    margin: 10px 0 15px;
}

.dashboard-card .dc-score .dc-score-value {
    font-size: 100px;
    font-weight: 500;
    color: #333;
    line-height: 1;
}

.dashboard-card .dc-score .dc-score-max {
    font-size: 45px;
    font-weight: 400;
    color: #666;
}

.dashboard-card .dc-link {
    text-align: center;
    margin-top: auto;
    padding-top: 4px;
}

.dashboard-card .dc-link a {
    color: #22c55e;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.dashboard-card .dc-link a::after {
    content: '\2192';
    font-size: 14px;
    transition: transform 0.3s ease;
}

.dashboard-card .dc-link a:hover {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.2);
    transform: translateY(-2px);
}

.dashboard-card .dc-link a:hover::after {
    transform: translateX(4px);
}

.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1) .dashboard-card,
.article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card {
    border-top: 4px solid #22c55e;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

@media (max-width: 1200px) {
    /* Tighten side dashboard cards so content does not clip */
    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1) .dashboard-card,
    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card {
        padding: 12px;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1) .dashboard-card .dc-title .dc-title-main,
    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1) .dashboard-card .dc-title .dc-title-accent,
    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card .dc-title .dc-title-main,
    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card .dc-title .dc-title-accent {
        font-size: 20px;
        line-height: 1.2;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1) .dashboard-card .user-level-insider-name {
        font-size: 18px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1) .dashboard-card .user-level-bars {
        gap: 4px;
        padding: 0 0.25rem;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(1) .dashboard-card .level-information-msg {
        font-size: 13px;
        line-height: 1.35;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card .dc-badge-grid {
        gap: 8px 6px;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card .dc-badge .badge-img {
        max-width: 58px;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card .dc-link.dc-link-split {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card .dc-link.dc-link-split .dc-link-left,
    .article-flex-container.m-b-20 > .article-card-wrapper:nth-child(3) .dashboard-card .dc-link.dc-link-split .dc-link-right {
        margin: 0;
    }
}

/* ==============
   Subscription Modal & Plan Cards
=================== */
.sub-plan-card {
    flex: 1;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 25px;
    background: white;
}
.sub-plan-featured {
    background: #3BC850;
    border-color: #3BC850;
    color: white;
}
.sub-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.sub-feature-list li {
    padding: 5px 0;
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sub-feature-list-light li {
    color: rgba(255, 255, 255, 0.9);
}
.sub-tick {
    color: #3BC850;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.sub-extra-usage {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: auto;
}

/* ==============
   Business Admin Dashboard Redesign
   Scoped to business index summary cards
=================== */
.admin-dashboard-section {
    --dashboard-grey-100: #f5f5f5;
    --dashboard-grey-300: #d4d4d4;
    --dashboard-grey-600: #525252;
    --dashboard-grey-700: #404040;
    --dashboard-grey-800: #262626;
    --dashboard-green: #22c55e;
    --dashboard-green-dark: #16a34a;
    --dashboard-red: #ef4444;
    max-width: 1400px;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: 0.85fr 1.6fr 0.85fr;
    gap: 32px;
    align-items: start;
    position: relative;
    animation: adminDashboardFadeIn 0.8s ease-out;
}

.admin-dashboard-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(34, 197, 94, 0.3) 5%,
        rgba(34, 197, 94, 0.4) 50%,
        rgba(34, 197, 94, 0.3) 95%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
    transform: translateY(-1.5px);
}

.admin-dashboard-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 10px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.admin-dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 20px 60px rgba(0, 0, 0, 0.1);
}

.admin-dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dashboard-green) 0%, #10b981 50%, var(--dashboard-green-dark) 100%);
    border-radius: 16px 16px 0 0;
}

.admin-dashboard-score-card {
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.15);
}

.admin-dashboard-score-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.18);
}

.admin-dashboard-card-header {
    margin-bottom: 24px;
    text-align: center;
}

.admin-dashboard-card-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--dashboard-grey-700);
    line-height: 1.4;
    letter-spacing: 0.2px;
}

.admin-dashboard-card-title-emphasis {
    display: block;
    font-size: 32px;
    font-weight: 600;
    color: var(--dashboard-green);
    margin-top: 2px;
    letter-spacing: -0.5px;
}

.admin-dashboard-card--foresight .admin-dashboard-card-title-emphasis {
    color: #D97706;
}

.admin-dashboard-card--career .admin-dashboard-card-title-emphasis {
    color: var(--dashboard-green);
}

.admin-dashboard-product-list,
.admin-dashboard-stats-list {
    list-style: none;
    padding: 0;
}

.admin-dashboard-product-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--dashboard-grey-100);
    transition: all 0.2s ease;
}

.admin-dashboard-product-item:last-child {
    border-bottom: none;
}

.admin-dashboard-product-item:hover {
    padding-left: 8px;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.03) 0%, transparent 100%);
}

.admin-dashboard-product-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--dashboard-grey-300);
    border-radius: 50%;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--dashboard-grey-300);
    transition: all 0.2s ease;
}

.admin-dashboard-product-checkbox.checked {
    border-color: var(--dashboard-green);
    background: var(--dashboard-green);
}

.admin-dashboard-product-checkbox.checked::after {
    content: '\2713';
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.admin-dashboard-product-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--dashboard-grey-700);
    flex: 1;
    min-width: 0;
}

.admin-dashboard-product-trailing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.admin-dashboard-product-risk-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.admin-dashboard-product-warning {
    width: 20px;
    height: 20px;
    background: var(--dashboard-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    margin-right: 10px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    animation: adminDashboardWarningPulse 2s ease-in-out infinite;
}

.admin-dashboard-score-label {
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
}

.admin-dashboard-score-label span {
    color: var(--dashboard-green);
    font-weight: 700;
}

.admin-dashboard-score-display {
    position: relative;
}

.admin-dashboard-score-value {
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    position: relative;
    z-index: 1;
    animation: adminDashboardScoreReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.admin-dashboard-score-denominator {
    font-size: 56px;
    color: var(--dashboard-green);
    font-weight: 300;
}

.admin-dashboard-score-ring {
    display: none;
}

.admin-dashboard-stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--dashboard-grey-100);
    transition: all 0.2s ease;
}

.admin-dashboard-stat-item:last-child {
    border-bottom: none;
}

.admin-dashboard-stat-item:hover {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.02) 0%, transparent 100%);
    padding-left: 8px;
}

.admin-dashboard-stat-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--dashboard-grey-700);
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.admin-dashboard-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--dashboard-green);
    letter-spacing: -0.5px;
    min-width: 50px;
    text-align: right;
}

.admin-dashboard-stat-action-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--dashboard-green);
    text-decoration: underline;
    margin-left: 4px;
    white-space: nowrap;
}

.admin-dashboard-stat-action-link:hover {
    color: #1e9e47;
}

.admin-dashboard-card-footer {
    text-align: center;
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-dashboard-score-card .admin-dashboard-card-footer {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-dashboard-footer-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--dashboard-green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.admin-dashboard-footer-link::after {
    content: '\2192';
    font-size: 14px;
    transition: transform 0.3s ease;
}

.admin-dashboard-footer-link:hover {
    color: var(--dashboard-green);
    background: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.2);
    transform: translateY(-2px);
}

.admin-dashboard-footer-link:hover::after {
    transform: translateX(4px);
}

.admin-dashboard-card--foresight .admin-dashboard-footer-link {
    color: var(--dashboard-grey-700);
}

.admin-dashboard-card--foresight .admin-dashboard-footer-link:hover {
    color: var(--dashboard-grey-800);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

.admin-dashboard-card--career .admin-dashboard-footer-link {
    color: var(--dashboard-grey-700);
}

.admin-dashboard-card--career .admin-dashboard-footer-link:hover {
    color: var(--dashboard-grey-800);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

.admin-dashboard-score-card .admin-dashboard-footer-link {
    color: rgba(255, 255, 255, 0.9);
}

.admin-dashboard-score-card .admin-dashboard-footer-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

@keyframes adminDashboardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes adminDashboardScoreReveal {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes adminDashboardWarningPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

@media (max-width: 1200px) {
    .admin-dashboard-section {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .admin-dashboard-score-card {
        order: -1;
    }
}

/* Business endorsements modal: employee dropdown section headers (Select2 + optgroups) */
.select2-dropdown.skill-endorsement-employee-dropdown .select2-results__group {
    color: #7a95b0;
    font-weight: 600;
    font-size: 0.875rem;
}

.saferef-vault-kicker {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #333;
    padding: 12px 14px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid rgba(9, 17, 27, 0.08);
    box-shadow: 0 1px 3px rgba(9, 17, 27, 0.06);
}

.saferef-vault-line {
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .saferef-vault-line {
        text-align: left;
    }
}

.saferef-kicker-brand {
    color: #3bc850 !important;
    font-weight: 600;
    text-decoration: none;
}

.saferef-kicker-brand:hover,
.saferef-kicker-brand:focus {
    color: #2ea043 !important;
    text-decoration: underline;
}

.saferef-learn-more {
    color: #3bc850 !important;
    text-decoration: underline;
    cursor: pointer;
}

.saferef-learn-more:hover,
.saferef-learn-more:focus {
    color: #2ea043 !important;
    text-decoration: underline;
}

.saferef-kicker-meta {
    color: #333;
    font-weight: 400;
}

.saferef-vault-empty {
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}

.saferef-vault-empty a {
    color: #3bc850;
    font-weight: 600;
    text-decoration: underline;
}

.saferef-vault-empty a:hover {
    color: #2ea043;
}

/* Citizen sidebar vertical rhythm.
   Nine links across three groups overflowed the viewport on smaller screens, so
   the last item (Career Memory) sat below the fold and needed a scroll. Tighter
   per-item padding brings the whole menu into view. Scoped to the citizen sidebar
   so the business/advisor/HRIS sidebars keep the theme's default spacing.
   The .menu-title overrides need !important because style.css sets its padding
   and margin-top with !important; longhand top/bottom here leaves the theme's
   25px horizontal padding intact.
   The 69px head start drops the first link (Home) onto the same line as the top
   of the page's first content panel, so the menu and the content begin together
   instead of the menu riding high against the topbar. With the tightened item
   padding above, Career Memory still clears a 600px-tall viewport. */
.citizen-side-menu #sidebar-menu {
    padding-top: 69px;
    padding-bottom: 12px;
}

.citizen-side-menu #sidebar-menu > ul > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.citizen-side-menu #sidebar-menu .menu-title {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 4px !important;
}

/* CV-builder permission-step checkboxes (Career Record Statement / SafeRef inclusion / Cover Letter).
   Defensive, high-priority styling so the visible box always renders even if the inline
   partial CSS is dropped or a theme rule resets native checkboxes. */
#create_cv_modal input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    box-sizing: border-box !important;
    border: 2px solid #adb5bd !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px #d5dae0 !important;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
    margin: 0 2px 0 0;
}

#create_cv_modal input[type="checkbox"]:checked {
    background: #3BC850 !important;
    border-color: #3BC850 !important;
    box-shadow: none !important;
}

#create_cv_modal input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#create_cv_modal input[type="checkbox"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
}

/* Explainer tab screenshots (BlindSpot, SilentLoss). Centred, capped to the
   column width, with a light frame so they read as UI examples. */
.explainer-figure {
    margin: 0.25rem 0 1.25rem;
    text-align: center;
}

/* Fixed 80% width so every screenshot occupies the same column space
   regardless of its natural pixel size. */
.explainer-figure img {
    display: block;
    width: 80%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid #e3e6e8;
    border-radius: 4px;
}

@media (max-width: 767.98px) {
    .explainer-figure img {
        width: 100%;
    }
}

/* ============================================================================
   RecordHub builder modals - "Add a New Record" and "Add a New Template".

   A shared skin applied by putting `rh-builder-modal` on the modal root. Both
   dialogs are two-pane builders: you fill a form on the left and watch the
   document assemble itself in a preview on the right, so they get the same
   chrome - header strip, split body, tinted action bar.

   It lives here rather than in the page's own @section('css') because that
   block is emitted BEFORE bootstrap.min.css in head.blade.php, so anything
   written there loses to Bootstrap at equal specificity. convey.css loads
   after both Bootstrap and the theme, which is what lets these rules restyle
   .modal-content and .form-control without a wall of !important.

   Everything is scoped to .rh-builder-modal. No other modal in the app is
   touched. ========================================================== */

.rh-builder-modal .modal-dialog {
    max-width: 1240px;
    width: calc(100% - 3rem);
    margin: 1.75rem auto;
}

.rh-builder-modal .modal-content {
    border: none;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(16, 34, 22, 0.22);
    overflow: hidden;
}

/* ---- Header strip ---- */
.rh-builder-modal .rh-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e3e6e9;
}

.rh-builder-modal .rh-builder-heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.rh-builder-modal .rh-builder-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d2a22;
}

/* Names the area the record lands in, so the dialog is self-identifying when
   it is opened from a tab the user has scrolled away from. */
.rh-builder-modal .rh-builder-pill {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    background: #f0f2f4;
    color: #5c6b63;
}

.rh-builder-modal .rh-builder-close {
    background: #f0f2f4;
    border: none;
    color: #3d4a43;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 1;
}

.rh-builder-modal .rh-builder-close:hover { background: #e0e4e7; }

/* ---- Split body ---- */
.rh-builder-modal .rh-builder-grid {
    display: grid;
    grid-template-columns: 512px minmax(340px, 1fr);
    align-items: stretch;
}

.rh-builder-modal .rh-builder-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The tinted band of "which record, for whom" selects that sit above the
   questions and govern everything below them. */
.rh-builder-modal .rh-builder-fields {
    padding: 16px 24px 14px;
    border-bottom: 1px solid #e6ebe8;
    background: #fbfcfc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rh-builder-modal .rh-builder-field {
    display: grid;
    grid-template-columns: 170px 1fr;
    align-items: center;
    gap: 14px;
}

.rh-builder-modal .rh-builder-field > label {
    font-size: 13.5px;
    font-weight: 500;
    color: #3d4a43;
    text-align: right;
    margin: 0;
}

.rh-builder-modal .rh-builder-field-control { min-width: 0; }

.rh-builder-modal .rh-builder-prompt {
    padding: 12px 24px 6px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #3d4a43;
}

/* Fixed-height scroller: the question list is unbounded (a template can carry
   any number), and without this the dialog grows until the action bar is off
   screen. scrollbar-gutter keeps the fields from shifting sideways when the
   bar appears. */
.rh-builder-modal .rh-builder-scroll {
    height: 272px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 8px 24px 14px;
}

.rh-builder-modal .rh-builder-scroll--tall { height: 405px; }

/* ---- Preview pane ---- */
.rh-builder-modal .rh-builder-side {
    background: #f4f6f7;
    border-left: 1px solid #dde3e6;
    padding: 14px 24px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.rh-builder-modal .rh-builder-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rh-builder-modal .rh-builder-side-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3d4a43;
}

.rh-builder-modal .rh-builder-expand {
    font-family: inherit;
    font-size: 11.5px;
    color: #3d4a43;
    background: #ffffff;
    border: 1px solid #cfd8d3;
    border-radius: 5px;
    padding: 4px 9px;
    cursor: pointer;
}

.rh-builder-modal .rh-builder-expand:hover { border-color: #3bc850; color: #14601f; }

.rh-builder-modal .rh-builder-preview {
    flex: 1 1 auto;
    min-height: 0;
    background: #e9edee;
    border: 1px solid #dde3e6;
    border-radius: 8px;
    overflow: hidden;
    padding: 14px;
    box-sizing: border-box;
}

.rh-builder-modal .rh-builder-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* No ground of its own: the page inside is the white surface, and a white
       frame behind it read as a second sheet stacked on the first. */
    background: transparent;
    display: block;
}

/* Fullscreen paints its own backdrop; without this the page sheet keeps its
   14px inset and floats on it. */
.rh-builder-modal .rh-builder-preview:fullscreen {
    padding: 0;
    border-radius: 0;
    border: none;
    background: #e9edee;
}

/* ---- Action bar ---- */
.rh-builder-modal .rh-builder-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: #f4f6f7;
    border-top: 1px solid #dde3e6;
}

.rh-builder-modal .rh-builder-note {
    font-size: 12px;
    color: #8a978f;
}

.rh-builder-modal .rh-builder-actions {
    display: flex;
    gap: 10px;
}

.rh-builder-modal .rh-builder-btn-ghost,
.rh-builder-modal .rh-builder-btn-grey,
.rh-builder-modal .rh-builder-btn-primary {
    font-family: inherit;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

.rh-builder-modal .rh-builder-btn-ghost {
    font-weight: 500;
    color: #3d4a43;
    background: #ffffff;
    border: 1px solid #cfd8d3;
    padding: 8px 16px;
}

.rh-builder-modal .rh-builder-btn-ghost:hover { border-color: #9fb3a6; }

.rh-builder-modal .rh-builder-btn-grey {
    font-weight: 500;
    color: #ffffff;
    background: #8a978f;
    border: 1px solid #8a978f;
    padding: 8px 22px;
}

.rh-builder-modal .rh-builder-btn-grey:hover { background: #77857d; border-color: #77857d; }

.rh-builder-modal .rh-builder-btn-primary {
    font-weight: 600;
    color: #ffffff;
    background: #3bc850;
    border: 1px solid #3bc850;
    padding: 8px 22px;
}

.rh-builder-modal .rh-builder-btn-primary:hover { background: #2fa84f; border-color: #2fa84f; }

/* ---- Controls ----
   One input treatment across native fields and select2's rendered box, so the
   three header selects match the question fields they govern. */
.rh-builder-modal .form-control,
.rh-builder-modal .rh-builder-scroll input[type="text"],
.rh-builder-modal .rh-builder-scroll input[type="date"],
.rh-builder-modal .rh-builder-scroll textarea,
.rh-builder-modal .select2-container--default .select2-selection--single {
    font-size: 13.5px;
    color: #1d2a22;
    background: #ffffff;
    border: 1px solid #cfd8d3;
    border-radius: 6px;
    height: auto;
    box-shadow: none;
}

.rh-builder-modal .form-control,
.rh-builder-modal .rh-builder-scroll input[type="text"],
.rh-builder-modal .rh-builder-scroll input[type="date"],
.rh-builder-modal .rh-builder-scroll textarea {
    padding: 9px 11px;
}

.rh-builder-modal .form-control:focus,
.rh-builder-modal .rh-builder-scroll input:focus,
.rh-builder-modal .rh-builder-scroll textarea:focus {
    border-color: #3bc850;
    box-shadow: none;
}

.rh-builder-modal .select2-container { width: 100% !important; }

.rh-builder-modal .select2-container--default .select2-selection--single {
    padding: 4px 2px;
}

.rh-builder-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 22px;
    color: #1d2a22;
    padding-left: 9px;
}

.rh-builder-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

.rh-builder-modal .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #3bc850;
}

#create_cv_modal .cv-postcode-field {
    position: relative;
}

#create_cv_modal #cv_postcode ~ .select2-container {
    width: 100% !important;
}

#create_cv_modal #cv_postcode ~ .select2-container .select2-selection--single {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 40px;
    padding: 8px 2px;
}

#create_cv_modal .cv-postcode-field .select2-dropdown {
    min-width: 0 !important;
    width: 100% !important;
}

.rh-builder-modal textarea { resize: vertical; }

/* ---- Step rail (template builder) ----
   The markup stays a <ul> of <li id="template_record_tab_N">: the wizard JS
   adds and removes active/completed on those elements and reads them back to
   decide which step to save, so only the paint changes here. */
.rh-builder-modal .rh-builder-steps {
    padding: 14px 24px 12px;
    border-bottom: 1px solid #e6ebe8;
    background: #fbfcfc;
}

.rh-builder-modal .template-record-sub-tab {
    margin: 0;
    padding: 0;
    text-align: center;
}

.rh-builder-modal .template-record-sub-tab li {
    font-size: 13.5px !important;
    font-weight: 500;
    color: #5c6b63;
    border-bottom: none;
}

.rh-builder-modal .template-record-sub-tab li.active {
    font-weight: 600;
}

/* The underline belongs to the label, not the list item - the item also holds
   the ">" separator, so a border there ran on past the word. */
.rh-builder-modal .template-record-sub-tab li span {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

.rh-builder-modal .template-record-sub-tab li.active span {
    color: #1f7a3a !important;
    text-decoration: none;
    border-bottom-color: #3bc850;
}

.rh-builder-modal .template-record-sub-tab li:not(:last-of-type)::after {
    content: ">";
    color: #a3aeaa;
    font-weight: 400;
    margin: 0 10px;
    border: none;
    padding-bottom: 2px;
}

/* The theme boxes and independently scrolls each wizard step; the outer
   scroller owns that now, so the steps flow instead. */
.rh-builder-modal div[id^="template_record_step_"] {
    border: none;
    padding: 0;
    margin: 0;
    height: auto;
    overflow: visible;
}

.rh-builder-modal .step-title {
    color: #1d2a22 !important;
    font-size: 19px !important;
    font-weight: 600 !important;
}

/* On a laptop the 512px form column plus a readable preview no longer fit
   side by side; stack them so neither is squeezed below usefulness. */
@media (max-width: 1199.98px) {
    .rh-builder-modal .rh-builder-grid { grid-template-columns: 1fr; }
    .rh-builder-modal .rh-builder-side { border-left: none; border-top: 1px solid #dde3e6; }
    .rh-builder-modal .rh-builder-preview { height: 360px; }
}

/* ============================================================================
   TeamFit builder dialogs - "Build a new TeamFit CV" and "Edit Your Cover
   Letter" - brought onto the same design as the RecordHub builders above.

   These two already carried a bespoke look of their own, ~45 rules scoped
   `#create_cv_modal ...` in the citizen styles partial. That partial is emitted
   from @section('css'), which head.blade.php prints at line 4 - BEFORE
   convey.css at line 23. So repeating a selector here beats it on source order
   without needing !important or editing the original block, and reverting is a
   matter of deleting this section.
   ========================================================================= */

#create_cv_modal .modal-dialog,
#create_cover_letter_modal .modal-dialog {
    max-width: 1240px;
    width: calc(100% - 3rem);
}

#create_cv_modal .cv-modal-shell,
#create_cover_letter_modal .modal-content {
    border: none;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(16, 34, 22, 0.22);
    overflow: hidden;
}

/* ---- Header strip ---- */
#create_cv_modal .cv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e3e6e9;
}

/* The title was centred across the full width; the design left-aligns it and
   puts the close chip on the right. */
#create_cv_modal .cv-modal-header .modal-title {
    width: auto;
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d2a22;
}

#create_cv_modal .cv-modal-close {
    position: static;
    transform: none;
    background: #f0f2f4;
    border: none;
    color: #3d4a43;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin: 0;
    opacity: 1;
    text-shadow: none;
}

#create_cv_modal .cv-modal-close:hover { background: #e0e4e7; }

/* ---- Step rails ----
   The CV rail keeps its <li id="template_record_tab_N"> markup, because the
   wizard toggles active/completed on those and reads them back to decide which
   step to save. Only the paint changes. */
#create_cv_modal .cv-modal-category-nav,
#create_cover_letter_modal .cl-step-nav {
    padding: 12px 20px 11px;
    margin: 0;
    background: #fbfcfc;
    border-bottom: 1px solid #e6ebe8;
    text-align: center;
}

/* The wizard column no longer carries side padding, so the rail no longer has
   to reach back out through it. */
#create_cv_modal #cv_build_main_div .cv-modal-category-nav {
    padding: 12px 20px 11px;
    margin: 0;
}

#create_cv_modal .cv-modal-category-nav li,
#create_cover_letter_modal .cl-step-nav li {
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 500;
    color: #4a5a52;
    padding: 2px 5px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

#create_cv_modal .cv-modal-category-nav li.active,
#create_cover_letter_modal .cl-step-nav li.active {
    font-weight: 700;
    border-bottom-color: #3bc850;
}

/* The original rule paints this green and underlines the text itself, both with
   !important - so these have to carry it too, and the text underline has to be
   removed for the rail to draw its own. */
#create_cv_modal .cv-modal-category-nav li.active span,
#create_cover_letter_modal .cl-step-nav li.active span {
    color: #1f7a3a !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

#create_cv_modal .cv-modal-category-nav li.completed span {
    color: #1f7a3a !important;
}

#create_cv_modal .cv-modal-close {
    width: 30px !important;
    flex: 0 0 auto;
}


/* A pipe between steps rather than the theme's chevron. It sits inside the
   <li>, so it has to be given back the panel colour or the active step's
   underline runs on through it. */
/* The underline lives on the label now, so the separator no longer needs a
   matching border to mask it - that mask was the stray line under the rail,
   and its padding was pushing the pipe off the text baseline. */
#create_cv_modal .cv-modal-category-nav li:not(.d-none):not(:last-child)::after,
#create_cover_letter_modal .cl-step-nav li:not(:last-child)::after {
    content: "|";
    color: #c3ccd2;
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    margin: 0 0 0 4px;
    padding: 0;
    border: none;
    align-self: center;
}

/* ---- Preview panes ---- */
#create_cv_modal .cv-modal-preview,
#create_cover_letter_modal .cl-preview-col {
    background: #f4f6f7;
    border-left: 1px solid #dde3e6;
    padding: 14px 24px 16px 20px;
    gap: 10px;
}

#create_cv_modal .rh-builder-side-head,
#create_cover_letter_modal .rh-builder-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

#create_cv_modal .rh-builder-side-title,
#create_cover_letter_modal .rh-builder-side-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3d4a43;
}

#create_cv_modal .rh-builder-expand,
#create_cover_letter_modal .rh-builder-expand {
    font-family: inherit;
    font-size: 11.5px;
    color: #3d4a43;
    background: #ffffff;
    border: 1px solid #cfd8d3;
    border-radius: 5px;
    padding: 4px 9px;
    cursor: pointer;
}

#create_cv_modal .rh-builder-expand:hover,
#create_cover_letter_modal .rh-builder-expand:hover {
    border-color: #3bc850;
    color: #14601f;
}

#create_cv_modal .cv-preview-mock-scroll,
#create_cover_letter_modal .cl-preview-col > .d-flex {
    background: #e9edee;
    border: 1px solid #dde3e6;
    border-radius: 8px;
    overflow: hidden;
    padding: 14px;
}

#create_cv_modal .cv-preview-mock-scroll:fullscreen,
#preview_cover_letter_iframe:fullscreen {
    padding: 0;
    border: none;
    border-radius: 0;
    background: #e9edee;
}

/* ---- Action bar ----
   Now a strip across the whole dialog rather than a row under the form column,
   so the step counter sits opposite the buttons. */
#create_cv_modal .rh-builder-footer,
#create_cover_letter_modal .rh-builder-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: #f4f6f7;
    border-top: 1px solid #dde3e6;
    flex: 0 0 auto;
}

#create_cv_modal .rh-builder-note,
#create_cover_letter_modal .rh-builder-note {
    font-size: 12px;
    color: #8a978f;
}

#create_cv_modal .rh-builder-actions,
#create_cover_letter_modal .rh-builder-actions {
    display: flex;
    gap: 10px;
}

#create_cv_modal .cv-modal-btn-close.rh-builder-btn-grey,
#create_cover_letter_modal .rh-builder-btn-grey {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    background: #8a978f;
    border: 1px solid #8a978f;
    border-radius: 6px;
    padding: 8px 22px;
    min-width: 0;
    flex: 0 0 auto;
}

#create_cv_modal .cv-modal-btn-close.rh-builder-btn-grey:hover,
#create_cover_letter_modal .rh-builder-btn-grey:hover {
    background: #77857d;
    border-color: #77857d;
    color: #ffffff;
}

#create_cv_modal .cv-modal-btn-primary.rh-builder-btn-primary,
#create_cover_letter_modal .rh-builder-btn-primary {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: #3bc850;
    border: 1px solid #3bc850;
    border-radius: 6px;
    padding: 8px 22px;
    flex: 0 0 auto;
}

#create_cv_modal .cv-modal-btn-primary.rh-builder-btn-primary:hover,
#create_cover_letter_modal .rh-builder-btn-primary:hover {
    background: #2fa84f;
    border-color: #2fa84f;
    color: #ffffff;
}

/* ---- Controls and step copy ---- */
#create_cv_modal .step-title,
#create_cover_letter_modal .step-title {
    color: #1d2a22;
    font-size: 19px;
    font-weight: 600;
}

#create_cv_modal .form-control,
#create_cover_letter_modal .form-control {
    font-size: 13.5px;
    color: #1d2a22;
    background: #ffffff;
    border: 1px solid #cfd8d3;
    border-radius: 6px;
    height: auto;
    padding: 9px 11px;
    box-shadow: none;
}

#create_cv_modal .form-control:focus,
#create_cover_letter_modal .form-control:focus {
    border-color: #3bc850;
    box-shadow: none;
}

/* The address block drew its own box; the step pane is the boundary now. */
#create_cover_letter_modal #cl_step_pane_1 > .mt-1 {
    border: none !important;
    padding: 0 !important;
}

#create_cover_letter_modal #create_cover_letter_modal_body > .col-md-8 > form > .card-body > .w-100 {
    border: none;
}

/* ---- TeamFit builders: matching the mockups more closely -------------------
   Three gaps against the supplied design, all traceable to rules in the citizen
   styles partial that this file has to out-rank:
     * the step rail was rendering at 16px because that rule carries !important;
     * step copy inherited the theme's 16px/#666 .col-form-label instead of the
       design's 13px/#5c6b63;
     * the employment list is a DataTable, so it needs the DataTable wrappers
       styled rather than a bare <table>.
   ------------------------------------------------------------------------ */

/* The mockups are set in Inter Tight. Pulled in for these two dialogs only so
   the rest of the app keeps Roboto and no other page pays for the font. */
#create_cv_modal,
#create_cover_letter_modal {
    -webkit-font-smoothing: antialiased;
}

/* ---- Step rail ---- */
#create_cv_modal .cv-modal-category-nav li,
#create_cover_letter_modal .cl-step-nav li {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0;
}

#create_cv_modal .cv-modal-category-nav li.active,
#create_cover_letter_modal .cl-step-nav li.active {
    font-weight: 700 !important;
}

/* The design gives finished steps no special colour - only the step you are on
   is picked out - so completed reads the same as the rest. */
#create_cv_modal .cv-modal-category-nav li.completed span {
    color: #4a5a52 !important;
    font-weight: 500 !important;
}

#create_cv_modal .cv-modal-category-nav li:not(.d-none):not(:last-child)::after,
#create_cover_letter_modal .cl-step-nav li:not(:last-child)::after {
    font-size: 11.5px !important;
    margin: 0 6px;
}

/* ---- Step copy ----
   The theme's .col-form-label is 16px/#666 everywhere; the design sets running
   copy at 13px and field labels at 13.5px. .step-title keeps its own size. */
#create_cv_modal .card-body label.col-form-label:not(.step-title),
#create_cv_modal .card-body p,
#create_cover_letter_modal .card-body label.col-form-label:not(.step-title),
#create_cover_letter_modal .card-body p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: #5c6b63;
}

/* Field labels sit above the running-copy rule, which carries a :not() and so
   out-ranks a plainer selector - these have to match it class for class. */
#create_cv_modal .card-body label.col-form-label.question-color:not(.step-title),
#create_cv_modal .card-body label.col-form-label[for]:not(.step-title),
#create_cover_letter_modal .card-body label.col-form-label.question-color:not(.step-title),
#create_cover_letter_modal .card-body label.col-form-label[for]:not(.step-title) {
    font-size: 13.5px;
    /* .question-color pins the colour with !important theme-wide, so matching the
       design ink needs the same weapon here. */
    font-weight: 500 !important;
    color: #3d4a43 !important;
}

#create_cv_modal .card-body .cv-final-touch-option label.col-form-label[for] {
    font-weight: 400 !important;
}

#create_cv_modal .step-title,
#create_cover_letter_modal .step-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #1d2a22 !important;
}

#create_cv_modal .cv-modal-muted-copy,
#create_cv_modal .text-muted,
#create_cover_letter_modal .text-muted {
    font-size: 13px;
    color: #5c6b63;
}

/* ---- Employment / education / training lists ----
   A single rounded card with a tinted head, rather than the theme's full-grid
   bordered table. DataTables splits the head and body into separate tables, so
   the rounding has to be applied to the scroll wrappers. */
#create_cv_modal .dataTables_wrapper {
    border: 1px solid #dde3e6;
    border-radius: 8px;
    overflow: hidden;
}

#create_cv_modal .dataTables_scroll,
#create_cv_modal .dataTables_scrollHead,
#create_cv_modal .dataTables_scrollBody {
    border: none;
}

/* The design shows no sideways scroll - the three columns are sized to fit. */
#create_cv_modal .dataTables_scrollBody,
#create_cv_modal .dataTables_scrollHead {
    overflow-x: hidden !important;
}

#create_cv_modal .dataTables_wrapper table.table {
    margin: 0 !important;
    border: none;
    /* The widths on the <th>s are the layout: fixed makes the browser use them
       as given instead of sizing each column to its longest cell, so the
       heading and the row beneath it always line up. */
    table-layout: fixed;
    width: 100% !important;
}

/* If DataTables does split the table in two, both halves have to fill the
   wrapper and use the fixed layout, or the header is laid out against a
   different total width from the body and every divider lands in a slightly
   different place. */
#create_cv_modal .dataTables_scroll,
#create_cv_modal .dataTables_scrollHead,
#create_cv_modal .dataTables_scrollBody,
#create_cv_modal .dataTables_scrollHeadInner {
    width: 100% !important;
}

#create_cv_modal .dataTables_scrollHeadInner table.table,
#create_cv_modal .dataTables_scrollBody table.table {
    width: 100% !important;
    table-layout: fixed;
}

/* Fixed layout will not shrink a long word to fit, so let one break. */
#create_cv_modal .dataTables_wrapper table.table th,
#create_cv_modal .dataTables_wrapper table.table td {
    overflow-wrap: anywhere;
}

/* ---- Column widths, stated where DataTables cannot overwrite them ----
   DataTables measures each column on draw and writes the result back as an
   inline width on the <th>, which threw away the widths the markup asked for
   and left the heading and the row under it sized differently. Inline beats a
   stylesheet, so these have to answer with !important; with table-layout:fixed
   above, the header row then sets the width of every column beneath it. */
#create_cv_modal #employment_history_table_wrapper table th:nth-child(1) { width: 50% !important; }
#create_cv_modal #employment_history_table_wrapper table th:nth-child(2) { width: 20% !important; }
#create_cv_modal #employment_history_table_wrapper table th:nth-child(3) { width: 30% !important; }

#create_cv_modal #education_table_wrapper table th:nth-child(1) { width: 50% !important; }
#create_cv_modal #education_table_wrapper table th:nth-child(2) { width: 20% !important; }
#create_cv_modal #education_table_wrapper table th:nth-child(3) { width: 30% !important; }

#create_cv_modal #hobby_table_wrapper table th:nth-child(1) { width: 50% !important; }
#create_cv_modal #hobby_table_wrapper table th:nth-child(2) { width: 20% !important; }
#create_cv_modal #hobby_table_wrapper table th:nth-child(3) { width: 30% !important; }

#create_cv_modal #reference_table_wrapper table th:nth-child(1) { width: 50% !important; }
#create_cv_modal #reference_table_wrapper table th:nth-child(2) { width: 20% !important; }
#create_cv_modal #reference_table_wrapper table th:nth-child(3) { width: 30% !important; }

#create_cv_modal #training_table_wrapper table th:nth-child(1) { width: 40% !important; }
#create_cv_modal #training_table_wrapper table th:nth-child(2) { width: 24% !important; }
#create_cv_modal #training_table_wrapper table th:nth-child(3) { width: 8% !important; }
#create_cv_modal #training_table_wrapper table th:nth-child(4) { width: 13% !important; }
#create_cv_modal #training_table_wrapper table th:nth-child(5) { width: 15% !important; }

#create_cv_modal #skill_table_wrapper table th:nth-child(1) { width: 36% !important; }
#create_cv_modal #skill_table_wrapper table th:nth-child(2) { width: 28% !important; }
#create_cv_modal #skill_table_wrapper table th:nth-child(3) { width: 8% !important; }
#create_cv_modal #skill_table_wrapper table th:nth-child(4) { width: 13% !important; }
#create_cv_modal #skill_table_wrapper table th:nth-child(5) { width: 15% !important; }

#create_cv_modal .dataTables_wrapper table.table th {
    background: #eef2f0;
    font-size: 12px;
    font-weight: 600;
    color: #3d4a43;
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid #dde3e6;
    border-left: 1px solid #dde3e6;
}

#create_cv_modal .dataTables_wrapper table.table th:first-child { border-left: none; }

#create_cv_modal .dataTables_wrapper table.table td {
    font-size: 13px;
    color: #1d2a22;
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid #e6ebe8;
    border-left: 1px solid #e6ebe8;
    vertical-align: middle;
}

#create_cv_modal .dataTables_wrapper table.table td:first-child { border-left: none; }

/* Both stay on one line: the box beside its label, and the two icons beside
   each other, rather than wrapping the way a plain cell would. */
#create_cv_modal .cv-hide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: #5c6b63;
    cursor: pointer;
    white-space: nowrap;
}

#create_cv_modal .cv-hide-toggle input { margin: 0; }

#create_cv_modal .cv-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

#create_cv_modal .dataTables_wrapper table.table tbody tr:last-child td { border-bottom: none; }

/* Zebra by row rather than the theme's striped fill, so the tint matches. */
#create_cv_modal .dataTables_wrapper table.table.table-striped tbody tr:nth-of-type(odd),
#create_cv_modal .dataTables_wrapper table.table tbody tr:nth-of-type(odd) { background: #ffffff; }

#create_cv_modal .dataTables_wrapper table.table tbody tr:nth-of-type(even) { background: #fbfcfc; }

/* Row actions: small, quiet, and the delete the only thing in red. */
#create_cv_modal .dataTables_wrapper table.table td a,
#create_cv_modal .dataTables_wrapper table.table td i {
    font-size: 12.5px;
    color: #5c6b63;
}

#create_cv_modal .dataTables_wrapper table.table td .fa-trash,
#create_cv_modal .dataTables_wrapper table.table td .fa-trash-o,
#create_cv_modal .dataTables_wrapper table.table td a.text-danger,
#create_cv_modal .dataTables_wrapper table.table td a.text-danger i {
    color: #d13c33;
}

#create_cv_modal .dataTables_wrapper table.table td .fa-arrow-up,
#create_cv_modal .dataTables_wrapper table.table td .fa-arrow-down,
#create_cv_modal .dataTables_wrapper table.table td .fa-long-arrow-up,
#create_cv_modal .dataTables_wrapper table.table td .fa-long-arrow-down {
    font-size: 13px;
    color: #5c6b63;
}

/* "Verified" reads as a quiet qualifier on the employer, not a second heading. */
#create_cv_modal .dataTables_wrapper table.table td small,
#create_cv_modal .dataTables_wrapper table.table td .text-convey-green {
    font-size: 11px;
    color: #1f7a3a;
}

/* ---- Buttons inside a step (Add Employment Entry and friends) ---- */
#create_cv_modal .card-body .bg-emerald {
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 5px;
    padding: 8px 14px;
}

/* ---- TeamFit builders: bringing the CV dialog onto the mockup exactly ------
   Three real mismatches, found by measuring rather than by eye:

     * the split was 820/420, not the design's 512/728 - which is why the step
       rail packed nine labels onto its first line instead of seven, and why the
       preview looked cramped;
     * the active underline sat on the <li>, so it ran under the label AND the
       separator that follows it, reading off-centre and too wide. It belongs on
       the label alone;
     * the font stack still named Roboto ahead of the generic fallbacks.
   ------------------------------------------------------------------------ */

/* Set on descendants, not just the root: the theme names Roboto directly on
   label/.col-form-label and friends, so inheritance from the dialog never
   reaches them. <i> is skipped so icon fonts keep their glyphs. */
#create_cv_modal,
#create_cv_modal *:not(i),
#create_cover_letter_modal,
#create_cover_letter_modal *:not(i) {
    font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
}

/* Same exception as the RecordHub builders below: icons drawn on a <span>
   rather than an <i> lose their icon font to the rule above and render as
   empty boxes, so they are given it back by name. */
#create_cv_modal .fa,
#create_cover_letter_modal .fa { font-family: 'FontAwesome'; }

#create_cv_modal .mdi,
#create_cover_letter_modal .mdi { font-family: 'Material Design Icons'; }

/* Matched on a whole class name rather than [class*="ion-"], which would also
   catch Bootstrap's .position-relative and friends. */
#create_cv_modal [class^="ion-"],
#create_cv_modal [class*=" ion-"],
#create_cover_letter_modal [class^="ion-"],
#create_cover_letter_modal [class*=" ion-"] { font-family: 'Ionicons'; }

/* The pane's own inset, per the design. */
#create_cv_modal .cv-modal-preview {
    padding: 14px 24px 16px 20px;
}

/* ---- The split ---- */
#create_cv_modal .cv-modal-body-grid {
    display: grid;
    grid-template-columns: 512px minmax(340px, 1fr);
    align-items: stretch;
}

#create_cv_modal .cv-modal-left-stack {
    min-width: 0;
    width: auto;
    flex: none;
}

#create_cv_modal .cv-modal-preview {
    width: auto;
    max-width: none;
    flex: none;
    min-width: 0;
}

@media (min-width: 1200px) {
    #create_cv_modal .cv-modal-preview {
        width: auto;
        max-width: none;
        flex: none;
    }
}

/* Below the design's width the two panes stop fitting side by side. */
@media (max-width: 1199.98px) {
    #create_cv_modal .cv-modal-body-grid { grid-template-columns: 1fr; }
}

/* ---- Step rail ----
   Laid out as the design has it: a centred wrapping row with an even gap, each
   label carrying its own underline. */
#create_cv_modal .cv-modal-category-nav,
#create_cv_modal #cv_build_main_div .cv-modal-category-nav,
#create_cover_letter_modal .cl-step-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 4px;
    padding: 12px 20px 11px;
    /* Full-bleed across the form column. The rail used to reach back out through
       the wizard column's 1rem side padding; that padding is gone - it moved
       inside the scroller so the scrollbar could sit on the column border - so
       the rail is simply the full width now. */
    width: 100%;
    margin: 0;
    line-height: 1.5;
}

#create_cv_modal .cv-modal-category-nav li,
#create_cover_letter_modal .cl-step-nav li {
    display: inline-flex;
    align-items: center;
    /* 4px rather than the mockup's 5px: Inter Tight renders these eleven
       labels a few pixels wider here, and the reclaimed 14px is what keeps
       Skills on the first line where the design has it. */
    padding: 2px 4px;
    border-bottom: none;
}

/* The underline goes on the label, not the row item - otherwise it stretches
   under the separator too and stops looking centred. */
#create_cv_modal .cv-modal-category-nav li span,
#create_cover_letter_modal .cl-step-nav li span {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

#create_cv_modal .cv-modal-category-nav li.active span,
#create_cover_letter_modal .cl-step-nav li.active span {
    border-bottom-color: #3bc850;
}

#create_cv_modal .cv-modal-category-nav li:not(.d-none):not(:last-child)::after,
#create_cover_letter_modal .cl-step-nav li:not(:last-child)::after {
    content: "|";
    color: #c3ccd2;
    font-size: 11.5px !important;
    font-weight: 400;
    margin: 0 0 0 4px;
    padding: 0;
    border: none;
}

/* ---- Employment / education / training lists ---- */

/* The design sets the step out as a column with an even 14px rhythm, so the
   Add button is not left sitting on the table. */
#create_cv_modal .dataTables_wrapper { margin-top: 14px; }

#create_cv_modal .card-body .bg-emerald { margin-bottom: 0; }

/* Row actions, at the design's weights. */
#create_cv_modal .dataTables_wrapper table.table td a,
#create_cv_modal .dataTables_wrapper table.table td a i,
#create_cv_modal .dataTables_wrapper table.table td i {
    font-size: 12.5px;
    color: #5c6b63;
}

#create_cv_modal .dataTables_wrapper table.table td .fa-arrow-up,
#create_cv_modal .dataTables_wrapper table.table td .fa-arrow-down,
#create_cv_modal .dataTables_wrapper table.table td .fa-long-arrow-up,
#create_cv_modal .dataTables_wrapper table.table td .fa-long-arrow-down,
#create_cv_modal .dataTables_wrapper table.table td .fa-angle-up,
#create_cv_modal .dataTables_wrapper table.table td .fa-angle-down {
    font-size: 13px;
    color: #5c6b63;
}

#create_cv_modal .dataTables_wrapper table.table td .fa-trash,
#create_cv_modal .dataTables_wrapper table.table td .fa-trash-o,
#create_cv_modal .dataTables_wrapper table.table td a.text-danger,
#create_cv_modal .dataTables_wrapper table.table td a.text-danger i {
    font-size: 12.5px;
    color: #d13c33;
}

/* Final Touches options all start on the same left edge.
   The step is a centred flex column, so each option shrank to its own content
   width and mx-auto then re-centred it - the short "online profile" row ended
   up indented ~90px further in than the two long ones above it. Giving them a
   common width lets max-width and mx-auto centre the group instead of each
   row individually. */
#create_cv_modal .cv-final-touch-option {
    width: 100%;
}

/* Final Touches checkboxes sit on the FIRST line of their label.
   Centring them across the whole label put the box between lines one and two
   on the two options that wrap. Top-aligning alone is not enough either: the
   label is a .col-form-label, so its box starts 7px above the text and the
   first line box is 21.6px tall around 16px of glyphs.
   Offset = label padding-top (7px) + half the line box (10.8px) - half the
   control (9px) ~= 8px, which lands the control's centre on the first line's
   centre. */
#create_cv_modal .cv-final-touch-option input[type="checkbox"] {
    margin-top: 8px;
    flex: 0 0 auto;
}

/* ---- Cover letter builder: the design's proportions ----
   The dialog was still on the old col-md-8 / col-md-4 split with a bordered
   box around the fields. The mockup uses the same 512px form column as the CV
   builder, no inner box, and a 158px label column. */
#create_cover_letter_modal .modal-body.row {
    display: grid;
    grid-template-columns: 512px minmax(340px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}

#create_cover_letter_modal .modal-body.row > .col-md-8,
#create_cover_letter_modal .modal-body.row > .col-md-4 {
    max-width: none;
    flex: none;
    width: auto;
    min-width: 0;
}

#create_cover_letter_modal .modal-body.row > .col-md-8 {
    padding: 0 !important;
}

/* The step panes own the scrolling; the dialog's height decides their room. */
#create_cover_letter_modal #final_question_step > .w-100 {
    border: none !important;
    padding: 18px 24px 20px !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

/* Label / control columns, per the mockup. */
#create_cover_letter_modal .cl-step-pane .w-100.d-flex,
#create_cover_letter_modal .cl-field-row {
    display: grid !important;
    grid-template-columns: 158px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

#create_cover_letter_modal .cl-step-pane .w-100.d-flex > label,
#create_cover_letter_modal .cl-field-row > label {
    max-width: none;
    flex: none;
    width: auto;
    text-align: left;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#create_cover_letter_modal .cl-step-pane .w-100.d-flex > div,
#create_cover_letter_modal .cl-field-row > div {
    max-width: none;
    flex: none;
    width: auto;
    min-width: 0;
}

@media (max-width: 1199.98px) {
    #create_cover_letter_modal .modal-body.row { grid-template-columns: 1fr; grid-template-rows: auto; }
}

/* The cover letter rail is a .rh-builder-steps wrapper around a .cl-step-nav
   list, and both were given the tinted band's padding and bottom border - so
   it drew twice, which is the stray line under the tabs. The list owns it. */
#create_cover_letter_modal .rh-builder-steps {
    padding: 0;
    border-bottom: none;
    background: transparent;
}

/* Sign Off / Letter steps: the design spaces each block evenly and keeps the
   label column aligned with the Addressed To step above it. */
#create_cover_letter_modal .cl-step-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#create_cover_letter_modal .cl-step-pane > .step-title {
    margin: 0;
}

#create_cover_letter_modal .cl-field-row {
    margin-bottom: 0;
}

/* ---- NextHire: Your Vacancies / Your Next Hires visual edits ---- */

/* The pre-post reminder used the theme's amber ink, which is too pale to read
   against the amber panel. Darker text, panel unchanged. */
#next_hire_page .nh-settings-alert,
.nh-settings-alert {
    color: #3d2f00;
}

.nh-settings-alert strong {
    color: #2b2200;
}

/* Manage actions read green like the rest of the business area, with delete
   left red so the destructive one still stands apart. */
.nh-manage-cell a:not(.text-danger) {
    color: #3BC850;
}

.nh-manage-cell a:not(.text-danger):hover {
    color: #14601f;
    text-decoration: underline;
}

/* ---- Create / Edit Vacancy ----
   The dialog now carries the whole vacancy - the four questions that belong to
   it, then the position's matching criteria - so the left side scrolls instead
   of running the modal off the bottom of the screen. The read-only summary of
   the position that used to sit here is gone: those fields are in the form now,
   and editable. */
#create_vacancy_modal .nh-vacancy-scroll {
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 10px;
}

/* Slim rounded bar, as elsewhere in the redesigned dialogs. */
#create_vacancy_modal .nh-vacancy-scroll::-webkit-scrollbar { width: 10px; }
#create_vacancy_modal .nh-vacancy-scroll::-webkit-scrollbar-thumb { background: #c3ccd2; border-radius: 6px; }
#create_vacancy_modal .nh-vacancy-scroll::-webkit-scrollbar-track { background: transparent; }

/* The criteria come from the positions modal, where every row is a right
   aligned label beside its control. Kept, so the two read the same. */
#create_vacancy_modal .nh-note { font-size: 14px; line-height: 1.5; color: #6c757d; }
#create_vacancy_modal .nh-group-heading { font-size: 14px; }
#create_vacancy_modal .form-text,
#create_vacancy_modal small.form-text { font-size: 13px; line-height: 1.45; }
#create_vacancy_modal .custom-control-label { font-size: 14px; }

/* ============================================================================
   NextHire Applications modal (the ATS board) - Clive's redesign.
   Same chrome vocabulary as the RecordHub and TeamFit builders above.
   ========================================================================= */

.nh-apps-modal .modal-dialog { max-width: 1240px; width: calc(100% - 3rem); }

.nh-apps-modal .modal-content {
    border: none;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(16, 34, 22, 0.22);
    overflow: hidden;
}

.nh-apps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e3e6e9;
}

.nh-apps-heading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nh-apps-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #1d2a22; }
.nh-apps-sep { color: #a3aeaa; }
.nh-apps-vacancy { font-size: 20px; font-weight: 500; color: #3d4a43; }

.nh-apps-ref {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    background: #f0f2f4;
    color: #5c6b63;
}

.nh-apps-close {
    background: #f0f2f4;
    border: none;
    color: #3d4a43;
    width: 30px; height: 30px;
    border-radius: 6px;
    font-size: 16px; line-height: 1;
    cursor: pointer; padding: 0; opacity: 1;
}

.nh-apps-close:hover { background: #e0e4e7; }

/* Tab strip sits in its own tinted band, spanning the dialog. It is a plain
   <ul class="nav"> rather than nav-pills: the app-wide
   `.nav-pills .nav-link.active { background-color:#3BC850 !important }` painted
   a green lozenge behind the active tab and no amount of specificity here beat
   it cleanly. Bootstrap's tab behaviour keys off [data-toggle], not the class,
   so dropping nav-pills costs nothing. */
.nh-apps-modal .modal-body { padding: 0; }

.nh-apps-modal .nh-apps-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 24px;
    list-style: none;
    background: #f4f6f7;
    border-bottom: 1px solid #dde3e6;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.nh-apps-modal .nh-apps-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    color: #4a5a52;
    padding: 14px;
    white-space: nowrap;
}

.nh-apps-modal .nh-apps-tabs .nav-link:hover { color: #14601f; }

.nh-apps-modal .nh-apps-tabs .nav-link.active {
    background: transparent;
    color: #14601f;
    font-weight: 600;
    border-bottom-color: #3bc850;
}

.nh-apps-modal .nh-tab-count {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: #dfe5e8;
    color: #3d4a43;
}

.nh-apps-modal .nh-apps-tabs .nav-link.active .nh-tab-count {
    background: #3bc850;
    color: #ffffff;
}

/* Board column / detail split, per the design. */
.nh-apps-modal .nh-apps-grid {
    display: grid;
    grid-template-columns: 512px minmax(340px, 1fr);
    align-items: start;
}

.nh-apps-modal .nh-apps-main {
    padding: 14px 18px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.nh-apps-modal .nh-apps-side {
    padding: 14px 24px 16px 20px;
    background: #f4f6f7;
    border-left: 1px solid #dde3e6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    align-self: stretch;
}

.nh-apps-modal .nh-apps-hint { font-size: 12.5px; color: #66756c; }

/* ---- Received / Removed list ----
   A card with its own scroller and a heading row that stays put, rather than a
   bordered table. Three columns only - the row itself is the control now, and
   what you can do with the applicant is offered in the strip underneath. */
.nh-apps-modal .nh-list-card {
    border: 1px solid #dde3e6;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.nh-apps-modal .nh-list-scroll {
    flex: 1 1 auto;
    min-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

.nh-apps-modal .nh-list-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 96px 104px;
    background: #eef2f0;
    border-bottom: 1px solid #dde3e6;
}

.nh-apps-modal .nh-list-head > div {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5c6b63;
    padding: 8px 12px;
}

.nh-apps-modal .nh-list-head > div:nth-child(2) { padding: 8px; }
.nh-apps-modal .nh-list-head .nh-list-right { text-align: right; }

.nh-apps-modal .nh-list-row {
    display: grid;
    grid-template-columns: 1fr 96px 104px;
    align-items: center;
    border-bottom: 1px solid #eef1f0;
    background: #ffffff;
    cursor: pointer;
}

.nh-apps-modal .nh-list-row:hover { background: #f3f8f4; }
.nh-apps-modal .nh-list-row.is-selected { background: #eef7f1; }
.nh-apps-modal .nh-list-row.is-selected .nh-list-name { font-weight: 700; }

.nh-apps-modal .nh-list-name {
    font-size: 13px;
    font-weight: 500;
    color: #1d2a22;
    padding: 9px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nh-apps-modal .nh-list-date { font-size: 12.5px; color: #66756c; padding: 9px 8px; }
.nh-apps-modal .nh-list-match { padding: 9px 12px; text-align: right; }

.nh-apps-modal .nh-match-pill {
    display: inline-block;
    min-width: 44px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
    padding: 2px 8px;
}

/* The three bands the design uses: 80+ reads as a strong match, 60+ as worth a
   look, below that as neutral rather than as a failure. */
.nh-apps-modal .nh-match-pill.is-hot  { color: #14601f; background: #dcefe1; }
.nh-apps-modal .nh-match-pill.is-warm { color: #6b4413; background: #f6e6d3; }
.nh-apps-modal .nh-match-pill.is-cool { color: #5c6b63; background: #eef1f0; }

/* Not in the mockup, but the "new" state is a real feature - an application
   whose CV has never been opened. Kept as a quiet tag on the name. */
.nh-apps-modal .nh-list-new {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #14601f;
    background: #dcefe1;
    border-radius: 9px;
    padding: 1px 6px;
    vertical-align: 1px;
}

.nh-apps-modal .nh-list-empty {
    padding: 22px 12px;
    text-align: center;
    font-size: 12.5px;
    color: #8a978f;
}

/* ---- Document viewer ---- */
.nh-doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.nh-doc-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3d4a43;
}

.nh-doc-head-actions { display: flex; align-items: center; }

.nh-doc-expand {
    font-family: inherit;
    font-size: 11.5px;
    color: #3d4a43;
    background: #ffffff;
    border: 1px solid #cfd8d3;
    border-radius: 5px;
    padding: 4px 9px;
    cursor: pointer;
}

.nh-doc-expand:hover { border-color: #3bc850; color: #14601f; }

/* A segmented control: one tinted trough, five equal segments, the active one
   lifted out in white. The design gives it no outer border. */
.nh-doc-tabs {
    display: flex;
    gap: 4px;
    background: #e6ebe8;
    border: none;
    border-radius: 7px;
    padding: 3px;
    margin-bottom: 0;
}

.nh-doc-tab {
    flex: 1;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #5c6b63;
    background: transparent;
    border: none;
    border-radius: 5px;
    padding: 7px 4px;
    cursor: pointer;
}

.nh-doc-tab:hover { color: #14601f; }

.nh-doc-tab.active {
    background: #ffffff;
    color: #14601f;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 34, 22, 0.12);
}

.nh-doc-viewer {
    position: relative;
    background: #e9edee;
    border: 1px solid #dde3e6;
    border-radius: 8px;
    padding: 14px;
    height: 58vh;
    min-height: 320px;
    box-sizing: border-box;
}

.nh-doc-viewer iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
    background: transparent;
    display: block;
}

.nh-doc-viewer:fullscreen { padding: 0; border-radius: 0; border: none; }

/* The Notes tab is text this dialog already holds rather than a fetched file,
   so it is drawn as a sheet in the same frame the documents render in. */
.nh-doc-notes {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    border-radius: 4px;
    padding: 24px 26px;
    box-sizing: border-box;
}

.nh-doc-notes-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #2b2f2c;
    margin: 0 0 10px;
}

.nh-doc-notes-body {
    font-size: 11px;
    line-height: 1.6;
    color: #3d4a43;
    margin: 0;
    white-space: pre-wrap;
}

.nh-doc-notes-empty {
    font-size: 11px;
    color: #8c9490;
    margin: 0;
}

.nh-note-card {
    background: #fff;
    border: 1px solid #dde3e6;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(16, 34, 22, .08);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    box-sizing: border-box;
}

.nh-note-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nh-note-name { font-size: 15px; font-weight: 600; color: #1d2a22; }

.nh-note-acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.nh-note-act {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nh-note-act-add { color: #1f7a3a; }
.nh-note-act-add:hover { color: #14601f; }
.nh-note-act-remove { color: #d13c33; }
.nh-note-act-remove:hover { color: #b32e26; }
.nh-note-act-return { color: #d97706; }
.nh-note-act-return:hover { color: #b45309; }

.nh-note-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 18px;
    padding: 6px 14px;
    background: #f4f6f7;
    border-radius: 6px;
    white-space: nowrap;
}

.nh-note-fact-key { font-size: 12px; color: #8a978f; }
.nh-note-fact-val { font-size: 12.5px; font-weight: 600; color: #1d2a22; }

.nh-note-field { display: flex; flex-direction: column; gap: 6px; }

.nh-note-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a978f;
    margin: 0;
}

.nh-note-date-row { display: flex; gap: 8px; }

.nh-note-date {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    color: #1d2a22;
    background: #fff;
    border: 1px solid #cfd8d3;
    border-radius: 6px;
    padding: 7px 10px;
}

.nh-note-date:focus { border-color: #3bc850; outline: none; }

.nh-note-add-date {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #3bc850;
    border: 1px solid #3bc850;
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.nh-note-add-date:hover { background: #2fa84f; border-color: #2fa84f; }

.nh-note-dates { display: flex; flex-wrap: wrap; gap: 6px 8px; }

.nh-note-date-chip {
    font-size: 12.5px;
    font-weight: 500;
    color: #1d2a22;
    background: #f3f8f4;
    border: 1px solid #c7e2ce;
    border-radius: 12px;
    padding: 3px 10px;
    white-space: nowrap;
}

.nh-note-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    resize: vertical;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: #1d2a22;
    background: #fff;
    border: 1px solid #cfd8d3;
    border-radius: 6px;
    padding: 9px 11px;
    outline: none;
}

.nh-note-text:focus { border-color: #3bc850; }

.nh-note-saved { display: none; font-size: 11.5px; color: #1f7a3a; align-self: flex-end; }

.nh-note-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.nh-note-guide {
    background: #f3f8f4;
    border: 1px solid #c7e2ce;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #2c3a32;
    text-align: center;
}

.nh-note-ref {
    align-self: flex-end;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: #66756c;
}

.nh-doc-card {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f4f5;
    border-radius: 4px;
    padding: 24px;
    box-sizing: border-box;
}

.nh-doc-card-inner {
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #3d4a43;
    background: #fff;
    border: 1px solid #e2e8e4;
    border-radius: 6px;
    padding: 16px 22px;
}

.nh-doc-card-inner a {
    color: #3BC850;
    font-weight: 600;
    text-decoration: underline;
}

.nh-doc-card-inner a:hover,
.nh-doc-card-inner a:focus {
    color: #2f9f40;
    text-decoration: underline;
}

/* Sits over the frame until a document is chosen, so the pane is never a
   blank white rectangle with no explanation. */
.nh-doc-empty {
    position: absolute;
    inset: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: #ffffff;
    border-radius: 4px;
    font-size: 13px;
    color: #8a978f;
}

/* ---- Action bar ---- */
.nh-apps-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: #f4f6f7;
    border-top: 1px solid #dde3e6;
}

.nh-apps-updated { font-size: 12px; color: #8a978f; }
.nh-apps-actions { display: flex; gap: 10px; }

.nh-apps-btn-ghost {
    font-size: 13px; font-weight: 500;
    color: #3d4a43; background: #ffffff;
    border: 1px solid #cfd8d3; border-radius: 6px; padding: 8px 18px;
}

.nh-apps-btn-ghost:hover { border-color: #9fb3a6; }

.nh-apps-btn-primary {
    font-size: 13px; font-weight: 600;
    color: #ffffff; background: #3bc850;
    border: 1px solid #3bc850; border-radius: 6px; padding: 8px 18px;
}

.nh-apps-btn-primary:hover { background: #2fa84f; border-color: #2fa84f; color: #ffffff; }

@media (max-width: 1199.98px) {
    .nh-apps-modal .nh-apps-grid { grid-template-columns: 1fr; }
    .nh-apps-modal .nh-apps-side { border-left: none; border-top: 1px solid #dde3e6; }
}

/* ---- ATS board: per-column colour, and the selected-applicant strip ---- */

/* Each stage gets its own tint and accent, so the eye can tell how far along a
   column is without reading the heading. */
.nh-apps-modal #nh_board { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; }

.nh-apps-modal #nh_board .nh-board-col {
    flex: 0 0 182px;
    border-radius: 8px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.nh-apps-modal #nh_board .nh-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    font-size: 10px;
    letter-spacing: 0.05em;
    line-height: 1.25;
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nh-apps-modal #nh_board .nh-col-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    padding: 1px 7px;
    color: inherit;
}

.nh-apps-modal #nh_board .nh-board-head .badge {
    background: rgba(255,255,255,0.65); border-radius: 10px; padding: 1px 7px; font-weight: 700;
}
.nh-apps-modal #nh_board .nh-board-drop {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.nh-apps-modal .nh-apps-main { display: flex; flex-direction: column; }
.nh-apps-modal .nh-apps-main > .tab-content { flex: 1 1 auto; min-height: 0; }
.nh-apps-modal .nh-apps-main > .tab-content > #apps_shortlist.active {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nh-apps-modal .nh-apps-main > .tab-content > .tab-pane.active {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.nh-apps-modal #nh_board { align-items: stretch; flex: 1 1 auto; min-height: 0; }

.nh-apps-modal #nh_board [data-stage="potential"]            { background: #f2f9f4; border-color: #cfe7d7; }
.nh-apps-modal #nh_board [data-stage="potential"] .nh-board-head  { background: #dcefe3; color: #1f6b3a; }
.nh-apps-modal #nh_board [data-stage="phone_interview"]      { background: #f1f7fc; border-color: #cfe0ef; }
.nh-apps-modal #nh_board [data-stage="phone_interview"] .nh-board-head { background: #dbeaf7; color: #1d5a86; }
.nh-apps-modal #nh_board [data-stage="invited_for_interview"] { background: #fdf6ee; border-color: #f0dfc8; }
.nh-apps-modal #nh_board [data-stage="invited_for_interview"] .nh-board-head { background: #f8e9d4; color: #8a5a1c; }
.nh-apps-modal #nh_board [data-stage="offer_made"]           { background: #f8f4fd; border-color: #e2d6f2; }
.nh-apps-modal #nh_board [data-stage="offer_made"] .nh-board-head { background: #ebe0f8; color: #5c3a8c; }
.nh-apps-modal #nh_board [data-stage="offer_accepted"]       { background: #f0faf3; border-color: #c6e6d2; }
.nh-apps-modal #nh_board [data-stage="offer_accepted"] .nh-board-head { background: #d3f0dd; color: #14601f; }

/* Cards sit white on the tint, with the column's accent down the left edge. */
.nh-apps-modal #nh_board .nh-board-drop > * {
    background: #ffffff; border: 1px solid #dbe2e6; border-left: 3px solid #cfd8d3;
    border-radius: 6px; padding: 8px 10px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(16, 34, 22, 0.06);
}

.nh-apps-modal #nh_board .nh-board-drop > *:hover {
    border-color: #9fb3a6;
    box-shadow: 0 3px 8px rgba(16, 34, 22, 0.12);
}

.nh-apps-modal .nh-card-name { font-size: 13px; font-weight: 600; color: #1d2a22; }
.nh-apps-modal .nh-card-meta { font-size: 11px; color: #7d8b83; margin-top: 2px; }

/* Only the two columns that hold a booking offer these, per the design. */
.nh-apps-modal .nh-card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.nh-apps-modal .nh-card-links a {
    font-size: 11px;
    font-weight: 500;
    color: #1f7a3a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nh-apps-modal .nh-card-links a:hover { color: #14601f; }
.nh-apps-modal #nh_board [data-stage="potential"] .nh-board-drop > *            { border-left-color: #3bc850; }
.nh-apps-modal #nh_board [data-stage="phone_interview"] .nh-board-drop > *      { border-left-color: #3d8fc6; }
.nh-apps-modal #nh_board [data-stage="invited_for_interview"] .nh-board-drop > *{ border-left-color: #d99b3c; }
.nh-apps-modal #nh_board [data-stage="offer_made"] .nh-board-drop > *           { border-left-color: #8a5cc6; }
.nh-apps-modal #nh_board [data-stage="offer_accepted"] .nh-board-drop > *       { border-left-color: #1f7a3a; }

/* ---- Selected applicant, under whichever list is open ---- */
.nh-applicant-strip {
    border: 1px solid #dde3e6;
    border-radius: 8px;
    background: #fbfcfc;
    padding: 12px 14px;
}

.nh-applicant-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.nh-applicant-lines {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nh-applicant-line { display: flex; align-items: baseline; gap: 8px; }
.nh-applicant-key { font-size: 13px; color: #8a978f; }
.nh-applicant-name { font-size: 15px; font-weight: 600; color: #1d2a22; }
.nh-applicant-assoc { font-size: 14px; font-weight: 500; color: #1d2a22; }

.nh-applicant-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.nh-applicant-progress,
.nh-applicant-restore,
.nh-applicant-remove {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.nh-applicant-progress,
.nh-applicant-restore { color: #1f7a3a; }

.nh-applicant-progress:hover,
.nh-applicant-restore:hover { color: #14601f; }

.nh-applicant-remove { color: #d13c33; }
.nh-applicant-remove:hover { color: #b32e26; }
.nh-applicant-more { display: inline-block; margin-top: 8px; font-size: 12px; color: #1f7a3a; }
.nh-applicant-detail { margin-top: 10px; border-top: 1px solid #eef1f2; padding-top: 10px; }

/* Document tabs are inert until an applicant is picked. */
.nh-doc-tabs.is-disabled { opacity: 0.55; }
.nh-doc-tabs.is-disabled .nh-doc-tab { cursor: not-allowed; }

/* ---- Builder scrollbars, and where the preview scroll belongs ----
   The mockups use a slim rounded scrollbar throughout. Scoped to the builder
   dialogs so the rest of the app keeps the browser default. */
.rh-builder-modal *::-webkit-scrollbar,
#create_cv_modal *::-webkit-scrollbar,
#create_cover_letter_modal *::-webkit-scrollbar,
.nh-apps-modal *::-webkit-scrollbar { height: 10px; width: 10px; }

.rh-builder-modal *::-webkit-scrollbar-thumb,
#create_cv_modal *::-webkit-scrollbar-thumb,
#create_cover_letter_modal *::-webkit-scrollbar-thumb,
.nh-apps-modal *::-webkit-scrollbar-thumb { background: #c3ccd2; border-radius: 6px; }

.rh-builder-modal *::-webkit-scrollbar-track,
#create_cv_modal *::-webkit-scrollbar-track,
#create_cover_letter_modal *::-webkit-scrollbar-track,
.nh-apps-modal *::-webkit-scrollbar-track { background: #eef1f2; border-radius: 6px; }

/* The grey surround scrolls, not the frame inside it - so the bar runs down the
   pane edge instead of hard against the page. The frame reports its own height
   (see templates_pdf/partials/preview-page-frame). */
.rh-builder-modal .rh-builder-preview {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    /* height:0 + flex-grow: the pane takes the space the form column defines and
       no more. Without it the auto-height frame inside pushed the pane - and the
       whole dialog - to the full length of the document. */
    height: 0;
    flex: 1 1 auto;
    min-height: 260px;
}

.rh-builder-modal .rh-builder-side { min-height: 0; }

.rh-builder-modal .rh-builder-preview iframe {
    height: auto;
    min-height: 100%;
    display: block;
    background: transparent;
}

/* ---- Keep scrolling inside the dialog ----
   Reaching the end of a scroller inside a modal used to hand the gesture on to
   the page behind it, so the backdrop crept up under the dialog. `contain` stops
   the chain at the element; `none` on the dialog itself catches gestures that
   start over a non-scrolling part of it. */
.rh-builder-modal .rh-builder-scroll,
.rh-builder-modal .rh-builder-preview,
#create_cv_modal .cv-preview-mock-scroll,
#create_cv_modal #final_question_step > .w-100,
#create_cv_modal .dataTables_scrollBody,
#create_cover_letter_modal #final_question_step > .w-100,
#create_cover_letter_modal .cl-preview-col > .d-flex,
.nh-apps-modal .nh-doc-viewer,
.nh-apps-modal #nh_board,
.nh-apps-modal .nh-board-drop,
.nh-apps-modal .modal-body {
    overscroll-behavior: contain;
}

/* overscroll-behavior only applies to elements that actually scroll, so putting
   it on .modal-dialog did nothing - the scrolling element is .modal itself. */
.rh-builder-modal.modal,
#create_cv_modal.modal,
#create_cover_letter_modal.modal,
.nh-apps-modal.modal {
    overscroll-behavior: contain;
}

/* Bootstrap pins the body, but on this theme the document element is the
   scroller - so a gesture over a non-scrolling part of the dialog still moved
   the page underneath. The class is toggled on show/hide. */
html.rh-modal-lock,
html.rh-modal-lock body {
    overflow: hidden !important;
}

/* Bootstrap already pins the body while a modal is open, but only when it owns
   the scroll. This makes the intent explicit for the redesigned dialogs. */
body.modal-open {
    overflow: hidden !important;
}

/* ---- Template builder left column: the design's type scale, section by section.
   Values taken straight from "Add New Template Modal.dc.html" so the built modal
   and the mockup agree. Scoped to the dialog; nothing else shifts. ---- */

#create_template_modal .rh-builder-scroll {
    padding: 16px 24px 18px;
    text-align: center;
}

/* "Template Name:" / "Template Type:" / "Template Questions:" */
#create_template_modal .step-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #1d2a22 !important;
    line-height: 1.3 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
}

/* The explanatory line under each step title. */
#create_template_modal #template_record_step_1 > label.col-form-label:not(.step-title):not([for]),
#create_template_modal .card-body > .col-form-label:not(.step-title):not([for]),
#create_template_modal .card-body > div.col-form-label {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #5c6b63 !important;
    max-width: 400px;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block;
    text-wrap: pretty;
}

/* "Step 1. …", "Step 2. …", "Step 3. …" */
#create_template_modal label.col-form-label[for] {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #3d4a43 !important;
    line-height: 1.4 !important;
    margin: 10px 0 6px !important;
    padding: 0 !important;
}

#create_template_modal #record_type,
#create_template_modal #record_description {
    font-size: 13.5px !important;
    color: #1d2a22;
    border: 1px solid #cfd8d3;
    border-radius: 6px;
    padding: 9px 11px !important;
    height: auto !important;
}

#create_template_modal #record_description {
    min-height: 74px;
    line-height: 1.5 !important;
    text-align: left;
    resize: vertical;
}

#create_template_modal #record_type:focus,
#create_template_modal #record_description:focus {
    border-color: #3bc850;
    box-shadow: none;
}

/* "(view our default Templates)" */
#create_template_modal .text-convey-green,
#create_template_modal a.text-convey-green {
    font-size: 12.5px !important;
    color: #1f7a3a !important;
}

/* The A/B/C/D usage choices. */
#create_template_modal #template_record_step_1 .d-block label.col-form-label,
#create_template_modal #mode_radio label.col-form-label {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #1d2a22 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* "Types Explained…" and its two definitions. */
#create_template_modal #mode_radio .row label.col-form-label {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #5c6b63 !important;
}

/* The RecordHub builders are drawn in Inter Tight, like the TeamFit ones.
   Set on descendants because the theme names Roboto directly on label,
   .col-form-label and friends, so inheritance never reaches them. <i> is
   skipped so icon fonts keep their glyphs. */
.rh-builder-modal,
.rh-builder-modal *:not(i) {
    font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
}

/* ...but an icon is not always an <i>. The effort rating is drawn with
   <span class="fa fa-star">, and the rule above out-ranks FontAwesome's own
   `.fa { font: ... FontAwesome }`, so the glyphs came out as empty boxes.
   Naming the icon classes after it hands those elements their font back. */
.rh-builder-modal .fa { font-family: 'FontAwesome'; }

.rh-builder-modal .mdi { font-family: 'Material Design Icons'; }

/* Matched on a whole class name rather than [class*="ion-"], which would also
   catch Bootstrap's .position-relative and friends. */
.rh-builder-modal [class^="ion-"],
.rh-builder-modal [class*=" ion-"] { font-family: 'Ionicons'; }

/* The Applications modal is drawn in the same face as the other redesigned
   dialogs; it was still inheriting the theme's Roboto. Same icon exception as
   above - the board and the tab strip both carry <span class="fa ...">. */
.nh-apps-modal,
.nh-apps-modal *:not(i) {
    font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
}

.nh-apps-modal .fa { font-family: 'FontAwesome'; }

.nh-apps-modal .mdi { font-family: 'Material Design Icons'; }

.nh-apps-modal [class^="ion-"],
.nh-apps-modal [class*=" ion-"] { font-family: 'Ionicons'; }

/* ---- Citizen builders: feedback round ---- */

/* 1. The title bar was the theme's grey; the design has it white, matching the
      cover letter dialog. */
#create_cv_modal .cv-modal-header {
    background: #ffffff !important;
}

/* 2. The dialog changed height between steps - 556px on Version and Final
      Touches against 664px elsewhere - because each step sized itself. Giving
      the step region one height keeps the frame still and lets long steps
      scroll, as the design does. */
#create_cv_modal #cv_build_main_div #cv_form {
    height: 405px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

/* The gap the References step already had, applied to every step: without it
   the fields and tables run right up against the column's scrollbar.

   The inset lives here rather than on the wizard column, so the scroller spans
   the full width and its bar sits on the column's right border instead of
   floating 1rem inside it. Left is the wider of the two because the right has
   the bar itself standing in the same role. */
#create_cv_modal #cv_build_main_div #cv_form > .card-body {
    padding-left: 1.4rem;
    padding-right: 0.8rem;
}

/* 3. Even gutters. Bootstrap's offset/col padding left more air down the left of
      the step content than the right. */
/* Even gutters on the step content, but NOT inside the DataTables wrappers -
   flattening their rows collapsed the table layout and left stray columns
   down each side of the employment list. */
#create_cv_modal #cv_form > .card-body > .row {
    margin-left: 0;
    margin-right: 0;
}

#create_cv_modal #cv_form > .card-body > .row > [class*="offset-"] {
    margin-left: 0 !important;
}

/* 4. The cover letter dialog: an upper bound only, so the body can flex.
      Side-by-side layout only; stacked, the two columns need their own height. */
@media (min-width: 1200px) {
    #create_cover_letter_modal #create_cover_letter_modal_body {
        max-height: 470px;
    }
}

/* The cover letter viewer: grey surround, one white sheet inside it, and the
   scroll bar on the surround - the same arrangement as the RecordHub previews.
   The frame used to paint its own white ground and shadow, which read as an
   extra wrapper between the two. */
#create_cover_letter_modal .cl-preview-box {
    background: #e9edee;
    border: 1px solid #dde3e6;
    border-radius: 8px;
    padding: 14px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

#create_cover_letter_modal .cl-preview-box iframe {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

#create_cover_letter_modal .cl-preview-box iframe {
    /* height comes from the page, sized to the letter's own length */
    min-height: 100%;
    flex: none !important;
    display: block;
}

/* Full screen on the letter viewer: the surround fills the display and keeps
   the scrolling, so a letter longer than the screen can still be read. */
#create_cover_letter_modal .cl-preview-box:fullscreen {
    border: none;
    border-radius: 0;
    padding: 24px;
    background: #e9edee;
    overflow-y: auto !important;
}

#create_cover_letter_modal .cl-preview-box:fullscreen iframe {
    max-width: 900px;
    margin: 0 auto;
}

/* DataTables measures column widths when it initialises, which for these steps
   happens while the step is still hidden - so it sizes to zero and the table
   renders as a narrow stub with empty gutters either side. Forcing full width
   makes the layout independent of when it was measured. */
#create_cv_modal .dataTables_wrapper,
#create_cv_modal .dataTables_scroll,
#create_cv_modal .dataTables_scrollHead,
#create_cv_modal .dataTables_scrollHeadInner,
#create_cv_modal .dataTables_scrollBody {
    width: 100% !important;
}

#create_cv_modal .dataTables_wrapper table.table,
#create_cv_modal .dataTables_scrollHeadInner table,
#create_cv_modal .dataTables_scrollBody table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* ============================================================================
   ATS modal - Clive's dimension and styling round.
   ========================================================================= */

/* 1. Every dialog opens at the same height; the lists scroll inside it. The tab
      strip is a sibling of the body now, so the body is the whole 611px rather
      than the 611 less the strip it used to hold. */
.nh-apps-modal .modal-body {
    height: 560px;
    max-height: 560px;
    height: min(560px, calc(100vh - 215px));
    max-height: min(560px, calc(100vh - 215px));
    overflow: hidden;
}

.nh-apps-modal .nh-apps-grid { height: 100%; }

.nh-apps-modal .nh-apps-main {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* 2. The tab strip no longer uses nav-pills, so the !important answer to the
      app-wide green pill fill is gone with it - see the .nh-apps-tabs rules
      further up.

   5. The document tabs share the bar evenly. */
.nh-apps-modal .nh-doc-tabs { display: flex; }
.nh-apps-modal .nh-doc-tab { flex: 1 1 0; text-align: center; }

/* 3. The viewer shows an A4 sheet by default - blank, but a page - and scrolls,
      so the pane reads the same before and after a document is chosen. */
.nh-apps-modal .nh-doc-viewer {
    position: relative;
    overflow: hidden;
    overscroll-behavior: contain;
    display: block;
}

.nh-apps-modal .nh-doc-empty {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(16, 34, 22, 0.14);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px;
    font-size: 13px;
    color: #8a978f;
}

.nh-apps-modal .nh-doc-viewer iframe {
    width: 100%;
    max-width: none;
    margin: 0;
    height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: block;
}

/* 4. Full screen, blank or not. */
.nh-apps-modal .nh-doc-viewer:fullscreen {
    padding: 24px;
    border-radius: 0;
    border: none;
    background: #e9edee;
    overflow: hidden;
}

/* 6. The received and removed lists are no longer <table>s - see .nh-list-card
      further up, which is where their treatment lives now. */

/* The document column itself must not scroll - only the viewer inside it does.
   Two scrollbars stacked side by side is what produced the outer bar against
   the dialog edge. */
.nh-apps-modal .nh-apps-side {
    height: 100%;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* The column has a definite height, so the viewer can take what is left under
   the tabs and scroll. min-height:0 is what lets a flex item shrink below its
   content - without it a long CV pushes the pane past the dialog. */
.nh-apps-modal .nh-doc-viewer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* The track was #eef1f2 against an #e9edee ground - close enough to look like a
   mistake rather than a choice. Letting the ground show through makes the bar
   read as one element. */
.nh-apps-modal .nh-doc-viewer::-webkit-scrollbar-track {
    background: transparent;
}

.nh-apps-modal .nh-doc-viewer::-webkit-scrollbar {
    width: 10px;
}

.nh-apps-modal .nh-doc-viewer::-webkit-scrollbar-thumb {
    background: #c3ccd2;
    border-radius: 6px;
}

/* The white logo panel in the business topbar gets its height from a 70px line
   box, but its only child is floated, so on any page where that line box is not
   generated the panel collapses to the image height and leaves a strip of green
   beneath it. A floor of 70px matches what the other pages already render, so it
   fixes the collapse without changing them. */
#topnav .topbar-main .logo {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#topnav .topbar-main .logo a.logo {
    float: none;
    width: auto;
    min-height: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
}

/* ------------------------------------------------------------------------
   Business dashboard panels: the Get Set Up / Explore Signals bars beneath
   the dashboard, and the shared modal both of them open.
   ------------------------------------------------------------------------ */
.dp-setup-row {
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 16px auto 32px;
}

.dp-setup-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 10px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dp-setup-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e 0%, #10b981 50%, #16a34a 100%);
}

.dp-setup-bar:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 20px 60px rgba(0, 0, 0, 0.1);
}

.dp-setup-title {
    font-size: 22px;
    font-weight: 600;
    color: #525252;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.dp-setup-progress {
    font-size: 24px;
    font-weight: 600;
    color: #22c55e;
    letter-spacing: -0.5px;
    white-space: nowrap;
    border-left: 2px solid #22c55e;
    padding-left: 24px;
}

.dp-setup-link {
    font-size: 14px;
    font-weight: 600;
    color: #22c55e;
    white-space: nowrap;
}

.dp-setup-link::after { content: " \2192"; }

@media (max-width: 1200px) {
    .dp-setup-row { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- the shared panel modal ---- */
.dp-modal,
.dp-modal *:not(i) { font-family: 'Inter Tight', Helvetica, Arial, sans-serif; }

.dp-modal { -webkit-font-smoothing: antialiased; }

.dp-modal *::-webkit-scrollbar { height: 10px; width: 10px; }
.dp-modal *::-webkit-scrollbar-thumb { background: #c3ccd2; border-radius: 6px; }
.dp-modal *::-webkit-scrollbar-track { background: #eef1f2; border-radius: 6px; }
.dp-modal *::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

.dp-modal .modal-dialog { max-width: 1240px; }
.dp-modal .modal-content { border: 0; border-radius: 10px; overflow: hidden; }
.dp-modal .modal-header { padding: 14px 24px; border-bottom: 1px solid #e3e6e9; }
.dp-modal .modal-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #1d2a22; }
.dp-modal .modal-body { padding: 0; overflow: hidden; }

.dp-grid {
    display: grid;
    grid-template-columns: 512px minmax(340px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 503px;
    max-height: calc(100vh - 190px);
    min-height: 0;
    overflow: hidden;
}

.dp-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid #dde3e6;
}

.dp-head {
    flex: 0 0 auto;
    padding: 18px 24px 16px;
    border-bottom: 1px solid #e6ebe8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dp-head-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1d2a22;
}

.dp-head-title span { color: #3bc850; }
.dp-head-sub { font-size: 12.5px; color: #8a978f; }

#get_set_up_modal .dp-head-title {
    letter-spacing: -0.015em;
    text-transform: none;
}

#get_set_up_modal .dp-head-sub { font-size: 13.5px; color: #5c6b63; }

.dp-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dp-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    background: #ffffff;
    border: 1px solid #e3e6e9;
    border-left: 3px solid #e3e6e9;
    border-radius: 7px;
    padding: 12px 13px;
    cursor: pointer;
}

.dp-step.is-done { border-left-color: #cfe8d5; }
.dp-step.is-on { background: #f4f8f5; border-color: #3bc850; border-left-color: #3bc850; }

.dp-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fdeaea;
    color: #d9403f;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-step.is-done .dp-mark { background: #e7f6ea; color: #3bc850; }

.dp-step-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dp-step-label { font-size: 13.5px; font-weight: 600; color: #1d2a22; }
.dp-step.is-done .dp-step-label { color: #8a978f; }
.dp-step-sub { font-size: 12.5px; color: #5c6b63; line-height: 1.5; }

.dp-progress {
    flex: 0 0 auto;
    padding: 12px 24px 14px;
    border-top: 1px solid #e6ebe8;
    background: #fbfcfc;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dp-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.dp-progress-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3d4a43;
}

.dp-progress-pct { font-size: 15px; font-weight: 700; color: #3bc850; }
.dp-bar { height: 6px; border-radius: 3px; background: #e0e4e7; overflow: hidden; }
.dp-bar-fill { height: 100%; border-radius: 3px; background: #3bc850; }
.dp-progress-note { font-size: 12px; color: #8a978f; }

.dp-right {
    background: #f4f6f7;
    padding: 16px 24px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}

.dp-right-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.dp-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a978f;
    display: block;
    margin-bottom: 3px;
}

.dp-detail-title { font-size: 16px; font-weight: 600; color: #1d2a22; }

.dp-state {
    font-size: 11.5px;
    font-weight: 600;
    color: #8a978f;
    background: #f0f2f4;
    border-radius: 999px;
    padding: 5px 11px;
    white-space: nowrap;
}

.dp-state.is-done { color: #34b247; background: #e7f6ea; }

.dp-shot {
    flex: 1 1 auto;
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e3e6e9;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.dp-shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.dp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 40px; text-align: center; }

.dp-empty-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e7f6ea;
    color: #3bc850;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-empty-title { font-size: 15px; font-weight: 600; color: #1d2a22; }
.dp-empty-body { font-size: 13px; color: #5c6b63; line-height: 1.55; }

.dp-modal .modal-footer { justify-content: space-between; padding: 12px 24px; border-top: 1px solid #dde3e6; }
.dp-foot { font-size: 12px; color: #8a978f; }

.dp-modal .dp-cta.is-inert {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}
.dp-modal .modal-footer .dp-actions { display: flex; gap: 10px; align-items: center; }

@media (max-width: 991px) {
    .dp-grid { grid-template-columns: 1fr; height: auto; }
    .dp-left { border-right: 0; border-bottom: 1px solid #dde3e6; }
    .dp-shot { min-height: 200px; }
}

/* Get Set Up: multi-line step notes, larger score, and the welcome screen. */
.dp-step-sub { white-space: pre-line; }

.dp-progress-pct { font-size: 26px; letter-spacing: -0.01em; }

.dp-modal .dp-cta { min-width: 290px; text-align: center; }

.dp-welcome {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 14px 26px;
    width: 100%;
}

.dp-welcome-head { display: flex; align-items: center; gap: 18px; }

.dp-welcome-ring {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #3bc850;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex: 0 0 auto;
}

.dp-welcome-pct { font-size: 29px; font-weight: 700; line-height: 1; color: #ffffff; }

.dp-welcome-word {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #ffffff;
}

.dp-welcome-title {
    font-size: 32px;
    font-weight: 700;
    color: #1d2a22;
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: 5px;
}

.dp-welcome-title span { color: #3bc850; }

.dp-welcome-sub {
    display: block;
    font-size: 16.5px;
    color: #5c6b63;
    line-height: 1.45;
}

.dp-welcome-solo {
    background: #f4f8f5;
    border: 1px solid #dbe9de;
    border-radius: 9px;
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 11px;
}

.dp-welcome-solo-title { font-size: 18px; font-weight: 700; color: #1d2a22; }
.dp-welcome-solo-body { font-size: 14.5px; color: #5c6b63; line-height: 1.6; }
.dp-welcome-foot { font-size: 12px; color: #8a978f; text-align: center; }

/* Contribution status pills, reused by the colleague requests list. */
.contrib-status {
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 9px;
    white-space: nowrap;
}

.contrib-status.is-pending { background: #f6e6d3; color: #6b4413; }
.contrib-status.is-approved { background: #dcefe1; color: #14601f; }
.contrib-status.is-expired { background: #eef1f0; color: #5c6b63; }
/* =============================================================================
   SHARED DATA-TABLE DESIGN
   -----------------------------------------------------------------------------
   The single source for every listed data table (employees, RecordHub, Next
   Hire, AbsenceGuard, SafeRef, TrustSig, Self Help, subscriptions, assists,
   vacancy tips, TeamFit profile/CV, record vault, contributions...).

   This is a straight port of the CV builder's tables, which are the reference
   design, with two differences agreed with the client:
     * 16px body text rather than the dialog's 13px, because these are
       full-page tables rather than a compact modal.
     * The type is Inter Tight, like the builders - NOT the app's Roboto.

   Opt in with .convey-table-box on a DataTables wrapper, or .convey-table on a
   plain table. Nothing here applies until a table asks for it.
   ========================================================================== */

.convey-table,
.convey-table th,
.convey-table td,
.dataTables_wrapper.convey-table-box table.table,
.dataTables_wrapper.convey-table-box table.table th,
.dataTables_wrapper.convey-table-box table.table td {
    font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
}

/* Icon fonts are declared on the icon's own class at (0,1,0), so the rule above
   must not reach <i> or the glyphs turn into empty boxes. Nothing is said about
   <i> here on purpose. Icons drawn on a <span> have no such class of their own,
   so those are named back explicitly. */
.convey-table span.fa,
.dataTables_wrapper.convey-table-box table.table span.fa { font-family: 'FontAwesome'; }

/* ---- The box is the table, not the wrapper ----
   DataTables' wrapper also contains the length menu above and the pagination
   below, so bordering it would draw a box around those too. The border belongs
   on the table itself, leaving that chrome outside it as in the reference. */
.dataTables_wrapper.convey-table-box {
    border: none;
    border-radius: 0;
}

/* DataTables wraps its table in .container-fluid > .row > .col-*, whose 15px
   padding and matching negative row margins cancel out normally but push
   content past a rounded border. */
.dataTables_wrapper.convey-table-box.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.dataTables_wrapper.convey-table-box > .row {
    margin-left: 0;
    margin-right: 0;
}

.dataTables_wrapper.convey-table-box > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.dataTables_wrapper.convey-table-box > .row {
    margin: 0;
    align-items: center;
}

.dataTables_wrapper.convey-table-box > .row:first-child { padding: 0 0 12px; }
.dataTables_wrapper.convey-table-box > .row:last-child { padding: 12px 0 0; }

/* ---- The table itself ----
   border: none clears .table-bordered, which would otherwise draw a second
   line beside every one of these and read as a thicker, doubled edge. */
.convey-table,
.dataTables_wrapper.convey-table-box table.table {
    margin: 0 !important;
    width: 100% !important;
    border: 1px solid #c9d3d6;
    border-radius: 8px;
    /* Rounding a table needs separated borders; the cells then draw the
       internal grid with border-bottom/left and nothing doubles up. */
    border-collapse: separate;
    border-spacing: 0;
}

/* Bootstrap removes the border from a .table-bordered that is a direct child
   of .table-responsive, which most of these tables are. */
.table-responsive > table.convey-table {
    border: 1px solid #c9d3d6;
}

/* A table will not clip its own corners, so the four corner cells are rounded
   to match the box. */
.convey-table > thead > tr:first-child > th:first-child,
.dataTables_wrapper.convey-table-box table.table thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
}

.convey-table > thead > tr:first-child > th:last-child,
.dataTables_wrapper.convey-table-box table.table thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
}

.convey-table > tbody > tr:last-child > td:first-child,
.dataTables_wrapper.convey-table-box table.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.convey-table > tbody > tr:last-child > td:last-child,
.dataTables_wrapper.convey-table-box table.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.convey-table > thead > tr > th,
.dataTables_wrapper.convey-table-box table.table thead th {
    background: #eef2f0;
    font-size: 16px;
    font-weight: 600;
    color: #3d4a43;
    /* Bootstrap's p-2/pt-2/pl-0 utilities are !important, and several tables
       carry them on individual columns. One shared measure beats them all. */
    padding: 9px 12px !important;
    border: none;
    border-bottom: 1px solid #dde3e6;
    border-left: 1px solid #dde3e6;
    vertical-align: middle;
}

.convey-table > tbody > tr > td,
.dataTables_wrapper.convey-table-box table.table tbody td {
    font-size: 16px;
    font-weight: 400;
    color: #1d2a22;
    padding: 9px 12px !important;
    border: none;
    border-bottom: 1px solid #e6ebe8;
    border-left: 1px solid #e6ebe8;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

/* The outer edge is the box's own border, so the first column has no rule. */
.convey-table > thead > tr > th:first-child,
.convey-table > tbody > tr > td:first-child,
.dataTables_wrapper.convey-table-box table.table thead th:first-child,
.dataTables_wrapper.convey-table-box table.table tbody td:first-child {
    border-left: none;
}

.convey-table > tbody > tr:last-child > td,
.dataTables_wrapper.convey-table-box table.table tbody tr:last-child td {
    border-bottom: none;
}

/* Zebra by row rather than the theme's striped fill, so the tint matches. */
.convey-table.table-striped > tbody > tr:nth-of-type(odd),
.convey-table > tbody > tr:nth-of-type(odd),
.dataTables_wrapper.convey-table-box table.table.table-striped tbody tr:nth-of-type(odd),
.dataTables_wrapper.convey-table-box table.table tbody tr:nth-of-type(odd) {
    background: #ffffff;
}

.convey-table > tbody > tr:nth-of-type(even),
.dataTables_wrapper.convey-table-box table.table tbody tr:nth-of-type(even) {
    background: #fbfcfc;
}

/* Tables whose rows are clickable ask for .table-hover; the tint has to beat
   the zebra above it, which sits at the same specificity. */
.convey-table.table-hover > tbody > tr:hover,
.dataTables_wrapper.convey-table-box table.table.table-hover tbody tr:hover {
    background: #f1f5f3;
}

/* ---- The chrome DataTables draws around the table ---- */
.dataTables_wrapper.convey-table-box .dataTables_length,
.dataTables_wrapper.convey-table-box .dataTables_filter,
.dataTables_wrapper.convey-table-box .dataTables_info {
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #3d4a43;
    font-weight: 400;
}

.dataTables_wrapper.convey-table-box .dataTables_info { color: #3BC850; }

.dataTables_wrapper.convey-table-box .dataTables_length label,
.dataTables_wrapper.convey-table-box .dataTables_filter label {
    margin: 0;
    font-weight: 400;
}

.dataTables_wrapper.convey-table-box .dataTables_paginate {
    margin: 0 !important;
    padding: 0;
}

.dataTables_wrapper.convey-table-box .pagination { margin: 0; }

.dataTables_wrapper.convey-table-box .pagination .page-link {
    border-radius: 5px;
    margin-left: 4px;
    font-size: 16px;
    color: #3d4a43;
    border-color: #dde3e6;
}

.dataTables_wrapper.convey-table-box .pagination .active .page-link {
    background: #3bc850;
    border-color: #3bc850;
    color: #ffffff;
}

/* ---- Row actions ----
   Written as a.convey-table-action so it beats Bootstrap's own `a` colour
   without depending on an ancestor class that is added after the first draw. */
a.convey-table-action,
a.convey-table-action i {
    color: #5c6b63;
    font-size: 17px;
    text-decoration: none;
}

a.convey-table-action:hover,
a.convey-table-action:hover i { color: #1d2a22; }

/* Same per-action colours the CV builder uses. */
a.convey-table-action.is-edit,
a.convey-table-action.is-edit i { color: #28a745; }
a.convey-table-action.is-delete,
a.convey-table-action.is-delete i { color: #d13c33; }

/* A text action ("View", "Open") rather than an icon, in the same green the
   table's own footer text uses. */
a.convey-table-link,
a.convey-table-link:focus {
    color: #1f7a3a;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

a.convey-table-link:hover {
    color: #166030;
    text-decoration: underline;
}

/* A thin rule between the actions, as in the reference table. */
.convey-table-action-sep {
    display: inline-block;
    margin: 0 6px;
    color: #cbd4d0;
    font-size: 15px;
    user-select: none;
}

/* ---- Sorting ----
   The reference table has no sort affordance, so tables that do not need one
   simply leave ordering off. Where a table does sort, DataTables' default is a
   pair of heavy glyphs that sit oddly against the heading; this replaces them
   with a small caret in the heading's own colour, sitting on the text baseline. */
.dataTables_wrapper.convey-table-box table.table thead th.sorting,
.dataTables_wrapper.convey-table-box table.table thead th.sorting_asc,
.dataTables_wrapper.convey-table-box table.table thead th.sorting_desc {
    background-image: none;
    position: relative;
    padding-right: 24px;
    cursor: pointer;
}

/* DataTables draws its own indicator as a pair of arrows, one in ::before and
   one in ::after. Both have to go, or the default sits alongside the caret. */
.dataTables_wrapper.convey-table-box table.table thead th.sorting::before,
.dataTables_wrapper.convey-table-box table.table thead th.sorting_asc::before,
.dataTables_wrapper.convey-table-box table.table thead th.sorting_desc::before {
    content: none;
    display: none;
}

.dataTables_wrapper.convey-table-box table.table thead th.sorting::after,
.dataTables_wrapper.convey-table-box table.table thead th.sorting_asc::after,
.dataTables_wrapper.convey-table-box table.table thead th.sorting_desc::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

/* Unsorted: a quiet caret that only hints the column can be sorted. */
.dataTables_wrapper.convey-table-box table.table thead th.sorting::after {
    margin-top: -2px;
    border-top: 5px solid #b9c4bd;
}

.dataTables_wrapper.convey-table-box table.table thead th.sorting:hover::after {
    border-top-color: #3d4a43;
}

.dataTables_wrapper.convey-table-box table.table thead th.sorting_asc::after {
    margin-top: -3px;
    border-bottom: 5px solid #3d4a43;
}

.dataTables_wrapper.convey-table-box table.table thead th.sorting_desc::after {
    margin-top: -2px;
    border-top: 5px solid #3d4a43;
}

/* ---- Scrolling tables ----
   With scrollX/scrollY on, DataTables splits the table in two: a cloned header
   table in .dataTables_scrollHead and the body in .dataTables_scrollBody. Left
   alone that reads as two stacked boxes with a doubled line between them, so
   the box is drawn across the pair - top half on the header, bottom half on the
   body, with the header cells' own bottom rule left to divide them. */
.dataTables_scrollHead table.convey-table,
.dataTables_wrapper.convey-table-box .dataTables_scrollHead table.table {
    border: 1px solid #c9d3d6;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dataTables_scrollBody table.convey-table,
.dataTables_wrapper.convey-table-box .dataTables_scrollBody table.table {
    border: 1px solid #c9d3d6;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ---- Tabs sit at the same 16px as the tables beneath them ---- */
.convey-table-tabs .nav-link { font-size: 16px; }

/* ==========================================================================
   SELF HELP - FAQ BROWSER
   ========================================================================== */

.shf { padding: 6px 0 4px; }

.shf-search { position: relative; margin-bottom: 18px; }

.shf-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a939d;
    font-size: 15px;
    pointer-events: none;
}

input.form-control.shf-search-input {
    width: 100%;
    height: auto;
    padding: 13px 16px 13px 44px;
    font-size: 14.5px;
    color: #1c1f23;
    border: 1px solid #d5dbe1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

input.form-control.shf-search-input:focus {
    border-color: #3bc850;
    box-shadow: none;
}

.shf-grid {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.shf-topics {
    background: #ffffff;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    padding: 10px;
    position: sticky;
    top: 16px;
}

.shf-topics-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #98a2ac;
    padding: 10px 12px 8px;
}

button.shf-topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    margin: 1px 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #5b646e;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

button.shf-topic:hover { background: #f4f6f7; }

button.shf-topic.is-on {
    background: #eaf8ee;
    color: #14762f;
    font-weight: 600;
}

.shf-topic-count { font-size: 11.5px; color: #6c757e; }
button.shf-topic.is-on .shf-topic-count { color: #14762f; }

.shf-answers { min-width: 0; }

.shf-answers-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 4px 12px;
}

.shf-answers-title { font-size: 16px; font-weight: 700; color: #1c1f23; }

a.shf-toggle-all {
    font-size: 13px;
    color: #1b8f38;
    text-decoration: none;
}

a.shf-toggle-all:hover { color: #146a29; text-decoration: underline; }

.shf-list { display: flex; flex-direction: column; gap: 10px; }

.shf-card {
    background: #ffffff;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    transition: border-color .15s;
}

.shf-card.is-open { border-color: #cfe8d6; }

button.shf-q {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.shf-mark {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    margin-top: -1px;
    background: #f2f4f7;
    color: #7d868f;
}

.shf-mark::before { content: "+"; }

.shf-card.is-open .shf-mark {
    background: #3bc850;
    color: #ffffff;
}

.shf-card.is-open .shf-mark::before { content: "\2013"; }

.shf-q-text { flex: 1; min-width: 0; }

.shf-question {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1c1f23;
    line-height: 1.45;
}

.shf-answer { display: none; }

.shf-card.is-open .shf-answer {
    display: block;
    font-size: 14px;
    line-height: 1.65;
    color: #4d565f;
    margin-top: 10px;
    max-width: 70ch;
}

.shf-tag { display: none; }

.shf-card.is-open .shf-tag {
    display: block;
    font-size: 12px;
    color: #5b646e;
    margin-top: 12px;
}

.shf-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
    border: 1px dashed #d5dbe1;
    border-radius: 10px;
    padding: 44px;
    text-align: center;
}

.shf-empty-title { font-size: 15px; font-weight: 600; color: #1c1f23; }
.shf-empty-sub { font-size: 13.5px; color: #7d868f; }

@media (max-width: 767px) {
    .shf-grid { grid-template-columns: minmax(0, 1fr); }
    .shf-topics { position: static; }
    button.shf-q { padding: 14px 15px; }
}

a.activity-name-locked,
a.activity-name-locked:focus {
    color: #1f7a3a;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

a.activity-name-locked i {
    margin-right: 5px;
    color: #8a978f;
}

a.activity-name-locked:hover {
    color: #166030;
    text-decoration: underline;
}

.nh-criteria-section {
    margin-top: 56px;
}

hr.nh-criteria-rule {
    margin-top: 0;
    margin-bottom: 20px;
}

h6.nh-criteria-title {
    margin-top: 30px;
}

#employer_listings_table tbody a {
    color: #3BC850;
}

#employer_listings_table tbody a:hover,
#employer_listings_table tbody a:focus {
    color: #2f9f40;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3BC850;
    border-color: #3BC850;
}

.custom-checkbox .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #3BC850;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(59, 200, 80, 0.25);
}

.convey-table thead th.nh-apps-group-head {
    background: #fff;
}

.convey-table thead th.nh-apps-sub-head {
    background: #e2e8e5;
}

.nh-share-modal .modal-content { border-radius: 6px; overflow: hidden; border: 0; }
.nh-share-modal .nh-sh-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid #e4e7e5;
}
.nh-share-modal .nh-sh-title { font-size: 19px; font-weight: 700; line-height: 1.2; color: #2b2f2c; }
/* The explainer column of the employee and position dialogs: outlined so it
   reads as a panel beside the form rather than more of the same form. */
.modal-side-panel {
    border: 1px solid #e5e8eb;
    border-radius: 8px;
    background: #FBFCFC;
    /* Centred in its column: flush right it read as pushed off the dialog. */
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
    height: 100%;
    overflow-y: auto;
}

/* Carries an unfinished application across the citizen area: someone sent off
   to build a CV needs the way back to be visible from wherever they end up. */
.pending-application-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #eafaed;
    border: 1px solid #b7e6c3;
    border-radius: 8px;
    padding: 12px 18px;
    margin: 18px 0;
}

.pending-application-text {
    font-size: 14px;
    color: #24402c;
}

.pending-application-btn {
    flex: none;
    background: #3bc850;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
}

.pending-application-btn:hover {
    background: #2fa841;
    color: #fff;
    text-decoration: none;
}

/* The logo files carry an opaque white background, which drew as a white block
   sitting on the grey. Multiplying lets the white fall away to the panel colour
   while the mark itself is unchanged. */
.modal-side-panel img {
    mix-blend-mode: multiply;
}

.nh-share-modal .nh-sh-stealth {
    padding: 28px 24px; font-size: 16px; font-weight: 600; color: #2b2f2c; text-align: center;
}
.nh-share-modal .nh-sh-auto { font-size: 14px; font-weight: 600; }
.nh-share-modal .nh-sh-sub { font-size: 14px; color: #6b7370; margin-top: 2px; }
.nh-share-modal .nh-sh-close {
    border: 0; background: transparent; font-size: 22px; line-height: 1;
    color: #8c9490; cursor: pointer; padding: 2px 4px;
}
.nh-share-modal .nh-sh-close:hover { color: #2b2f2c; }
.nh-share-modal .nh-sh-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
.nh-share-modal .nh-sh-col { padding: 22px 24px; display: flex; flex-direction: column; gap: 22px; }
.nh-share-modal .nh-sh-publish { border-right: 1px solid #e4e7e5; }
.nh-share-modal .nh-sh-own { background: #fafbfa; }
.nh-share-modal .nh-sh-kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: #8c9490;
}
.nh-share-modal .nh-sh-block { display: flex; flex-direction: column; gap: 8px; }
.nh-share-modal .nh-sh-name { font-weight: 700; color: #2b2f2c; font-size: 14px; }
.nh-share-modal .nh-sh-note { margin: 0; color: #8c9490; line-height: 1.45; font-size: 14px; }
.nh-share-modal .nh-sh-rule { height: 1px; background: #eceeed; }
.nh-share-modal .nh-sh-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nh-share-modal .nh-sh-row-split { justify-content: space-between; align-items: baseline; }
.nh-share-modal .nh-sh-meta { color: #8c9490; font-size: 14px; }
.nh-share-modal .nh-sh-locked { color: #d9534f; font-size: 13px; }
.nh-share-modal .nh-sh-btn {
    background: #fff; border: 1px solid #c6ccc9; color: #2b2f2c;
    font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 4px; cursor: pointer;
}
.nh-share-modal .nh-sh-btn:hover { background: #f3f5f4; }
.nh-share-modal .nh-sh-btn-sm { font-size: 13px; padding: 4px 10px; }
.nh-share-modal .nh-sh-btn-primary { background: #3BC850; border-color: #2f9f40; color: #fff; }
.nh-share-modal .nh-sh-btn-primary:hover { background: #2f9f40; color: #fff; }
.nh-share-modal .nh-sh-social {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    background: #111; border-radius: 4px;
}
.nh-share-modal .nh-sh-social:hover { background: #333; }
.nh-share-modal .nh-sh-code {
    width: 100%; font-family: 'IBM Plex Mono', Menlo, Consolas, monospace; font-size: 13px;
    color: #3c423f; background: #fff; border: 1px solid #dfe3e1; border-radius: 4px;
    padding: 9px 11px; overflow-wrap: anywhere;
}
.nh-share-modal .nh-sh-code-area { font-size: 12.5px; line-height: 1.5; resize: vertical; }
.nh-share-modal .nh-sh-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid #e4e7e5; background: #fff;
}
.nh-share-modal .nh-sh-preview { font-weight: 600; text-decoration: none; color: #3BC850; }
.nh-share-modal .nh-sh-preview:hover { color: #2f9f40; text-decoration: none; }
@media (max-width: 767px) {
    .nh-share-modal .nh-sh-grid { grid-template-columns: 1fr; }
    .nh-share-modal .nh-sh-publish { border-right: 0; border-bottom: 1px solid #e4e7e5; }
}

.nh-ae-modal .modal-content { border-radius: 6px; overflow: hidden; border: 0; }
.nh-ae-modal .nh-ae-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid #e4e7e5;
}
.nh-ae-modal .nh-ae-title { font-size: 19px; font-weight: 700; line-height: 1.2; color: #2b2f2c; }
.nh-ae-modal .nh-ae-sub { font-size: 14px; color: #6b7370; margin-top: 2px; }
.nh-ae-modal .nh-ae-close {
    border: 0; background: transparent; font-size: 22px; line-height: 1;
    color: #8c9490; cursor: pointer; padding: 2px 4px;
}
.nh-ae-modal .nh-ae-close:hover { color: #2b2f2c; }
.nh-ae-modal .nh-ae-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
.nh-ae-modal .nh-ae-col { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.nh-ae-modal .nh-ae-applicant { border-right: 1px solid #e4e7e5; }
.nh-ae-modal .nh-ae-reply { background: #fafbfa; gap: 22px; }
.nh-ae-modal .nh-ae-kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: #8c9490;
}
.nh-ae-modal .nh-ae-kickers { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nh-ae-modal .nh-ae-rows { display: flex; flex-direction: column; }
.nh-ae-modal .nh-ae-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-top: 1px solid #eceeed; color: #2b2f2c; font-size: 14px;
}
.nh-ae-modal .nh-ae-row-toggle { cursor: pointer; }
.nh-ae-modal .nh-ae-row-last { border-bottom: 1px solid #eceeed; }
.nh-ae-modal .nh-ae-always { color: #8c9490; font-size: 13px; white-space: nowrap; }
.nh-ae-modal .nh-ae-fields { display: flex; flex-direction: column; gap: 14px; }
.nh-ae-modal .nh-ae-field { display: flex; flex-direction: column; gap: 6px; }
.nh-ae-modal .nh-ae-field-label { font-weight: 700; font-size: 14px; color: #2b2f2c; }
.nh-ae-modal .nh-ae-input {
    font-size: 14px; color: #2b2f2c; background: #fff; border: 1px solid #dfe3e1;
    border-radius: 4px; padding: 9px 11px; width: 100%; box-sizing: border-box;
}
.nh-ae-modal .nh-ae-note { margin: 0; color: #8c9490; line-height: 1.45; font-size: 14px; }
.nh-ae-modal .nh-ae-rule { height: 1px; background: #eceeed; }
.nh-ae-modal .nh-ae-emails-to-you { display: flex; flex-direction: column; gap: 6px; }
.nh-ae-modal .nh-ae-checkline { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 6px; }
.nh-ae-modal .nh-ae-checkline span { font-weight: 600; color: #2b2f2c; font-size: 14px; }
.nh-ae-modal .nh-ae-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid #e4e7e5; background: #fff;
}
.nh-ae-modal .nh-ae-btn {
    background: #fff; border: 1px solid #c6ccc9; color: #2b2f2c;
    font-weight: 600; font-size: 14px; padding: 7px 18px; border-radius: 4px; cursor: pointer;
}
.nh-ae-modal .nh-ae-btn:hover { background: #f3f5f4; }
.nh-ae-modal .nh-ae-btn-primary { background: #3BC850; border-color: #2f9f40; color: #fff; }
.nh-ae-modal .nh-ae-btn-primary:hover { background: #2f9f40; color: #fff; }
.nh-ae-modal input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; margin: 0; cursor: pointer; flex: none;
    background-color: #fff; border: 1px solid #c6ccc9; border-radius: 3px;
}
.nh-ae-modal input[type="checkbox"]:checked {
    background-color: #3BC850; border-color: #2f9f40;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 50% 50%; background-size: 13px 13px;
}
@media (max-width: 767px) {
    .nh-ae-modal .nh-ae-grid { grid-template-columns: 1fr; }
    .nh-ae-modal .nh-ae-applicant { border-right: 0; border-bottom: 1px solid #e4e7e5; }
}

.el-share-modal .modal-content { border-radius: 6px; overflow: hidden; border: 0; }
.el-share-modal .el-sh-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid #e4e7e5;
}
.el-share-modal .el-sh-title { font-size: 19px; font-weight: 700; line-height: 1.2; color: #2b2f2c; }
.el-share-modal .el-sh-sub { font-size: 14px; color: #6b7370; margin-top: 2px; }
.el-share-modal .el-sh-close {
    border: 0; background: transparent; font-size: 22px; line-height: 1;
    color: #8c9490; cursor: pointer; padding: 2px 4px;
}
.el-share-modal .el-sh-close:hover { color: #2b2f2c; }
.el-share-modal .el-sh-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.el-share-modal .el-sh-col { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.el-share-modal .el-sh-networks { border-right: 1px solid #e4e7e5; }
.el-share-modal .el-sh-link { background: #fafbfa; }
.el-share-modal .el-sh-kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: #8c9490;
}
.el-share-modal .el-sh-row-split { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.el-share-modal .el-sh-icons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.el-share-modal .el-sh-icon {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 4px;
}
.el-share-modal .el-sh-icon-facebook { background: #1877f2; }
.el-share-modal .el-sh-icon-facebook:hover { filter: brightness(1.1); }
.el-share-modal .el-sh-icon-linkedin { background: #0a66c2; }
.el-share-modal .el-sh-icon-linkedin:hover { filter: brightness(1.1); }
.el-share-modal .el-sh-icon-x { background: #111; }
.el-share-modal .el-sh-icon-x:hover { filter: brightness(1.6); }
.el-share-modal .el-sh-icon-whatsapp { background: #25d366; }
.el-share-modal .el-sh-icon-whatsapp:hover { filter: brightness(1.08); }
.el-share-modal .el-sh-note { margin: 0; color: #8c9490; line-height: 1.45; font-size: 14px; }
.el-share-modal .el-sh-code {
    width: 100%; font-family: 'IBM Plex Mono', Menlo, Consolas, monospace; font-size: 13px;
    color: #3c423f; background: #fff; border: 1px solid #dfe3e1; border-radius: 4px;
    padding: 9px 11px; overflow-wrap: anywhere;
}
.el-share-modal .el-sh-btn {
    background: #fff; border: 1px solid #c6ccc9; color: #2b2f2c;
    font-weight: 600; font-size: 14px; padding: 7px 18px; border-radius: 4px; cursor: pointer;
}
.el-share-modal .el-sh-btn:hover { background: #f3f5f4; }
.el-share-modal .el-sh-btn-sm { font-size: 13px; padding: 4px 10px; }
.el-share-modal .el-sh-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid #e4e7e5; background: #fff;
}
.el-share-modal .el-sh-preview { font-weight: 600; text-decoration: none; color: #3BC850; }
.el-share-modal .el-sh-preview:hover { color: #2f9f40; text-decoration: none; }
@media (max-width: 767px) {
    .el-share-modal .el-sh-grid { grid-template-columns: 1fr; }
    .el-share-modal .el-sh-networks { border-right: 0; border-bottom: 1px solid #e4e7e5; }
}

#record_history_table input[type="checkbox"],
#training_table input[type="checkbox"],
#skill_table input[type="checkbox"],
#training_flag_chk,
#skill_flag_chk {
    accent-color: #3BC850;
}

#tab_priority_hire .ph-title {
    font-size: 32px;
    font-weight: bold;
    color: #222;
    margin: 30px 0 14px;
}

#tab_priority_hire .ph-subtitle {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin: 0 0 24px;
}

#tab_priority_hire .ph-explainer {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
}

#tab_priority_hire .ph-explainer p {
    margin: 0 0 20px;
}

#tab_priority_hire .ph-card {
    border: 3px solid #3BC850;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(59, 200, 80, 0.2);
    overflow: hidden;
}

#tab_priority_hire .ph-card-header {
    background: #3BC850;
    color: #fff;
    border-bottom: none;
    padding: 12px 16px;
}

#tab_priority_hire .ph-card-title {
    font-weight: 600;
    font-size: 19px;
    letter-spacing: .3px;
}

#tab_priority_hire .ph-price {
    color: #3BC850;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.1;
}

#tab_priority_hire .ph-price-period {
    font-size: 14px;
}

#tab_priority_hire .ph-microcopy {
    font-size: 11px;
}

#tab_priority_hire .ph-benefits .benefit-list-item:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    #tab_priority_hire .ph-split {
        flex-direction: column !important;
    }

    #tab_priority_hire .ph-title {
        font-size: 26px;
        margin-top: 12px;
    }
}

#tab_compliance .compliance-records {
    padding: 4px 2px 2px;
}

#tab_compliance .cr-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 8px;
}

#tab_compliance .cr-lead {
    max-width: 820px;
    font-size: 15px;
    line-height: 1.6;
    color: #495057;
    margin: 0 0 20px;
}

#tab_compliance .cr-table {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

#tab_compliance .cr-row {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-top: 1px solid #dee2e6;
    background: #fff;
}

#tab_compliance .cr-row:first-child {
    border-top: none;
}

#tab_compliance .cr-badge {
    flex: none;
    width: 44px;
    height: 52px;
    box-sizing: border-box;
    border: 1px solid #cfe9d6;
    background: #f3faf5;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 7px;
    font-size: 11px;
    font-weight: 600;
    color: #2fa84f;
    letter-spacing: .03em;
}

#tab_compliance .cr-body {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#tab_compliance .cr-name {
    font-size: 15px;
    font-weight: 600;
    color: #212529;
}

#tab_compliance .cr-name span {
    font-weight: 400;
    color: #6c757d;
}

#tab_compliance .cr-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #495057;
}

#tab_compliance .cr-download {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: #2fa84f;
    border: 1px solid #2fa84f;
    border-radius: 4px;
    padding: 8px 14px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

#tab_compliance .cr-download:hover,
#tab_compliance .cr-download:focus {
    background: #2fa84f;
    color: #fff;
    text-decoration: none;
}

#tab_compliance .cr-empty {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 25px 20px;
    font-size: 14px;
    color: #6c757d;
}

.apply-step-modal .modal-content {
    border: none;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}

.apply-step-head {
    background: #3BC850;
    color: #fff;
    text-align: center;
    padding: 14px 20px;
}

.apply-step-head h5 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.apply-step-body {
    text-align: center;
    padding: 26px 30px 24px;
}

.apply-step-lead {
    font-size: 15px;
    line-height: 1.6;
    color: #212529;
    margin: 0 0 16px;
}

.apply-step-sub {
    font-size: 15px;
    line-height: 1.6;
    color: #495057;
    margin: 0 0 22px;
}

.apply-step-btn {
    display: inline-block;
    border: none;
    background: #3BC850;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 4px;
    cursor: pointer;
}

.apply-step-btn:hover,
.apply-step-btn:focus {
    background: #2f9f40;
    color: #fff;
}

.apply-step-later {
    margin: 16px 0 0;
}

.apply-step-later a {
    font-size: 13px;
    color: #6c757d;
}

.apply-step-later a:hover {
    color: #495057;
}

#application_sent_modal .apply-sent-heading {
    font-size: 15px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 6px;
}

#application_sent_modal .apply-step-sub {
    margin-bottom: 22px;
}

@media (min-width: 992px) {
    #vacancies_tabs .nav-link {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.nh-net {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

.nh-net-building {
    color: #227a35;
    background: #e6f7ea;
    border: 1px solid #b7e6c3;
}

.nh-net-inactive {
    color: #8a6d1f;
    background: #fdf6e3;
    border: 1px solid #ecdca6;
}

.nh-net-learn {
    font-size: 13px;
    color: #3BC850;
    text-decoration: underline;
    white-space: nowrap;
}

.nh-net-learn:hover,
.nh-net-learn:focus {
    color: #2f9f40;
    text-decoration: underline;
}

.alertify {
    z-index: 1990;
}

.alertify-logs {
    z-index: 2000;
}

.alertify-logs.top {
    top: 16px;
}

.alertify-logs > * {
    max-width: 380px;
    max-width: min(380px, calc(100vw - 32px));
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

.alertify-logs > .show {
    padding: 14px 18px;
    border-radius: 6px;
}

.alertify-logs > .error {
    background: rgba(198, 40, 40, .96);
}

.alertify-logs > .success {
    background: rgba(59, 200, 80, .96);
}

.nh-preview-modal .modal-content {
    border: none;
    border-radius: 6px;
    overflow: hidden;
}

.nh-preview-banner {
    background: #3BC850;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 10px 18px;
}

.nh-preview-modal .modal-header {
    border-bottom: 1px solid #e9ecef;
    padding: 12px 18px;
}

.nh-preview-modal #nh_preview_frame {
    width: 100%;
    height: 70vh;
    border: 0;
    display: block;
    background: #fff;
}

.nh-preview-modal .modal-footer {
    padding: 10px 18px;
}

.nh-created-modal .modal-dialog { max-width: 880px; }

.nh-created-modal .modal-content {
    border: none;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    font-size: 14px;
    color: #2b2f2c;
}

.nh-created-head {
    position: relative;
    padding: 24px 56px 20px;
    border-bottom: 1px solid #e4e7e5;
    text-align: center;
}

.nh-created-title {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #2b2f2c;
}

.nh-created-sub {
    margin: 0;
    font-size: 15px;
    color: #6b7370;
}

.nh-created-close {
    position: absolute;
    top: 16px;
    right: 20px;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #8c9490;
    cursor: pointer;
    padding: 2px 4px;
}

.nh-created-close:hover { color: #2b2f2c; }

.nh-created-body {
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.nh-created-panel {
    border-radius: 6px;
    padding: 20px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nh-created-panel--now {
    background: #eef6ee;
    border: 1px solid #d3e8d3;
}

.nh-created-panel--later {
    border: 1px dashed #d6dbd8;
}

.nh-created-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nh-created-pill {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}

.nh-created-pill--now { color: #fff; background: #4cae4c; }

.nh-created-pill--later {
    color: #6b7370;
    background: transparent;
    border: 1px solid #c6ccc9;
    padding: 3px 9px;
}

.nh-created-stage { font-size: 17px; font-weight: 700; }
.nh-created-stage--later { font-weight: 600; color: #4a514d; }

.nh-created-copy {
    margin: 0;
    color: #3c423f;
    line-height: 1.5;
    font-size: 15px;
}

.nh-created-copy--later { color: #6b7370; }

.nh-created-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d3e8d3;
    color: #4cae4c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.nh-created-foot {
    display: flex;
    justify-content: flex-end;
    padding: 14px 24px;
    border-top: 1px solid #e4e7e5;
    background: #fafbfa;
}

.nh-created-btn {
    background: #fff;
    border: 1px solid #c6ccc9;
    color: #2b2f2c;
    font-weight: 600;
    font-size: 14px;
    padding: 7px 18px;
    border-radius: 4px;
    cursor: pointer;
}

.nh-created-btn:hover { background: #f3f5f4; }

@media (max-width: 767px) {
    .nh-created-body { grid-template-columns: minmax(0, 1fr); }
    .nh-created-arrow { transform: rotate(90deg); margin: 0 auto; }
}

#create_vacancy_modal .nh-field-missing {
    border-color: #c62828;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, .12);
}


/* ---- TeamFit level modal (Insiders "?" icons) --------------------------
   Four states of one dialog, driven by the citizen's own level. Set in Inter
   Tight like the other redesigned dialogs, scoped so the rest of the app keeps
   Roboto. */
.tfl-modal .modal-dialog { max-width: 960px; margin: 0.5rem auto; }
.tfl-modal .modal-dialog-centered { min-height: calc(100% - 1rem); }
.tfl-modal .modal-content { max-height: calc(100vh - 1rem); }
.tfl-modal .modal-content {
    border: 0; border-radius: 10px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(16, 24, 32, .18);
    font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
    color: #1d2327; -webkit-font-smoothing: antialiased;
}

.tfl-modal *::-webkit-scrollbar { height: 10px; width: 10px; }
.tfl-modal *::-webkit-scrollbar-thumb { background: #c3ccd2; border-radius: 6px; }
.tfl-modal *::-webkit-scrollbar-track { background: transparent; }

.tfl-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 28px; border-bottom: 1px solid #e3e6e8; flex: 0 0 auto;
}
.tfl-title { font-size: 20px; font-weight: 700; line-height: 1.2; color: #1d2327; }
.tfl-head-right { display: flex; align-items: center; gap: 20px; }
.tfl-count { font-size: 13px; color: #5b646b; }
.tfl-close {
    background: none; border: 0; padding: 0; line-height: 1;
    font-size: 22px; color: #6b7378; cursor: pointer;
}
.tfl-close:hover { color: #1d2327; }

.tfl-steps {
    display: flex; gap: 8px; padding: 11px 28px; flex: 0 0 auto;
    background: #f6f7f8; border-bottom: 1px solid #e3e6e8;
}
.tfl-step {
    flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 10px 12px; border: 1px solid #e3e6e8; border-radius: 8px;
    background: #fff; color: #8a9399;
}
.tfl-step.is-done { color: #5b646b; }
.tfl-step.is-now { border: 2px solid #f2c200; color: #1d2327; }
.tfl-step-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: #a6adb3; }
.tfl-dot-newbie { background: #2f6fd6; }
.tfl-dot-silver { background: #a6adb3; }
.tfl-dot-gold { background: #c9a227; }
.tfl-dot-diamond { background: #111; }
.tfl-step-tick {
    flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
    background: #e3f6e6; color: #1e9e36;
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.tfl-step-name {
    font-size: 12px; font-weight: 700; letter-spacing: .06em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tfl-step-tag { margin-left: auto; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tfl-tag-you { color: #b38900; }
.tfl-tag-next { color: #0f6b24; }
.tfl-tag-done { font-weight: 500; background: #eef0f1; padding: 4px 7px; border-radius: 4px; color: #5b646b; }

.tfl-body {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    overflow-y: auto; min-height: 0;
}
.tfl-copy {
    padding: 18px 28px; display: flex; flex-direction: column; gap: 10px;
    font-size: 15px; line-height: 1.6; color: #3d464c;
}
.tfl-lead { font-size: 19px; font-weight: 700; line-height: 1.3; color: #1d2327; }
.tfl-copy p { margin: 0; }
.tfl-copy p.tfl-closing { font-weight: 600; color: #1d2327; }

.tfl-aside {
    background: #f6f7f8; border: 1px solid #e3e6e8; border-radius: 10px;
    margin: 16px 24px 16px 0; padding: 18px;
    display: flex; flex-direction: column; gap: 12px;
}
.tfl-aside-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #5b646b; }
.tfl-stat {
    background: #fff; border: 1px solid #e3e6e8; border-radius: 10px;
    padding: 20px; display: flex; flex-direction: column; gap: 6px;
}
.tfl-stat-big { font-size: 48px; font-weight: 700; line-height: 1; color: #34c24a; }
.tfl-stat-text { font-size: 14px; line-height: 1.45; color: #3d464c; }
.tfl-stat-text b { color: #1d2327; }
.tfl-influence {
    background: #1d2327; border-radius: 10px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.tfl-influence-line { font-size: 15px; font-weight: 700; line-height: 1.3; color: #fff; }
.tfl-influence-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: #34c24a; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
    vertical-align: middle; margin: 0 2px;
}
.tfl-influence-sub { font-size: 13px; line-height: 1.5; color: #d3d8db; }

.tfl-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 24px;
    padding: 12px 28px; border-top: 1px solid #e3e6e8; flex: 0 0 auto;
}
.tfl-btn-close {
    background: none; border: 0; padding: 0;
    font-size: 16px; color: #5b646b; cursor: pointer;
}
.tfl-btn-close:hover { color: #1d2327; }
.tfl-btn-primary {
    background: #34c24a; color: #fff; border: 0; border-radius: 6px;
    font-size: 16px; font-weight: 700; line-height: 1; padding: 12px 26px; cursor: pointer;
}
.tfl-btn-primary:hover { background: #2bae40; color: #fff; }

@media (max-width: 767px) {
    .tfl-steps { flex-wrap: wrap; }
    .tfl-step { flex: 1 1 calc(50% - 4px); }
    .tfl-body { grid-template-columns: minmax(0, 1fr); }
    .tfl-aside { margin: 0 24px 20px; }
    .tfl-head, .tfl-steps, .tfl-copy, .tfl-foot { padding-left: 18px; padding-right: 18px; }
    .tfl-stat-big { font-size: 38px; }
}