/*
  The public page a smart badge opens when it is tapped. Read on a phone by someone standing on a site, at a glance
  and often at arm's length, so it is built mobile first and set larger than a desktop page would be.

  Plain CSS rather than an addition to site.less: that bundle is compiled outside the CLI build, and a stylesheet
  nobody on the team can rebuild is worse than one page owning its own. It is linked only from this page, so the
  rule on body below cannot reach anywhere else.

  The design was drawn in its own warm palette and in Helvetica/Inconsolata. It is rendered here in Colar and in the
  Bootstrap font stacks instead, so the page matches the rest of the product. Colar reaches this project as literal
  steps because it lives in the Blazor app's SCSS and nothing compiles it for the MVC side; the step each value comes
  from is named so a change to the palette can be followed here.
*/

.badge-shell {
  --colar-gray-0: #f8fafb;
  --colar-gray-1: #f2f4f6;
  --colar-gray-2: #ebedef;
  --colar-gray-3: #e0e4e5;
  --colar-gray-4: #d1d6d8;
  --colar-gray-6: #979b9d;
  --colar-gray-7: #7e8282;
  --colar-gray-9: #50514f;
  --colar-gray-11: #252521;
  --colar-gray-12: #121210;
  --colar-blue-9: #1864ab;
  --colar-red-0: #fff5f5;
  --colar-red-9: #c92a2a;
  --colar-red-10: #b02525;
  --colar-green-9: #2b8a3e;

  --badge-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --badge-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --badge-canvas: var(--colar-gray-1);
  --badge-ink: var(--colar-gray-11);
  --badge-ink-soft: var(--colar-gray-9);
  --badge-ink-faint: var(--colar-gray-6);
  --badge-ink-label: var(--colar-gray-7);
  --badge-line: var(--colar-gray-3);
  --badge-line-soft: var(--colar-gray-2);
  --badge-head-bg: var(--colar-gray-0);
  --badge-head-line: var(--colar-gray-3);
  --badge-toolbar-line: var(--colar-gray-2);

  /* The theme's $danger and $success, so an expired certification reads the same red as an error anywhere else. */
  --badge-alert: var(--colar-red-9);
  --badge-alert-deep: var(--colar-red-10);
  --badge-alert-wash: var(--colar-red-0);
  --badge-current: var(--colar-green-9);
  --badge-undated: var(--colar-gray-4);

  min-height: 100vh;
  background: var(--badge-canvas);
  color: var(--badge-ink);
  font-family: var(--badge-font);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/*
  The shared layout adds a top gutter to pages that hide the navigation bar and a side gutter to every page; this one
  draws its own bar and manages its own gutters, so both are cancelled here.
*/
body {
  padding-top: 0 !important;
  /* Colar gray-1; body sits outside .badge-shell so it cannot read the custom properties. */
  background: #f2f4f6;
}

.body-content {
  padding-left: 0;
  padding-right: 0;
}

.badge-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--badge-line);
}

.badge-topbar-logo {
  display: block;
  height: 22px;
  width: auto;
}

.badge-topbar-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--badge-ink);
}

.badge-page {
  display: flex;
  justify-content: center;
  padding: 20px 16px 64px;
}

.badge-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 980px;
}

.badge-card {
  background: #fff;
  border: 1px solid var(--badge-line);
  border-radius: 14px;
  overflow: hidden;
}

/* Identity ---------------------------------------------------------------------------------------------------- */

.badge-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  align-items: center;
  padding: 22px;
}

.badge-person {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.badge-photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--badge-head-bg);
}

.badge-eyebrow {
  font-family: var(--badge-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--badge-ink-faint);
}

.badge-name {
  margin: 4px 0 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--badge-ink);
  text-wrap: balance;
}

.badge-facts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.badge-fact {
  display: grid;
  grid-template-columns: minmax(84px, 110px) 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--badge-line-soft);
}

.badge-fact:last-child {
  border-bottom: none;
}

.badge-fact-label {
  font-family: var(--badge-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--badge-ink-faint);
}

.badge-fact-value {
  font-size: 15px;
  line-height: 1.35;
  color: var(--badge-ink);
}

.badge-fact-value.is-numeric {
  font-variant-numeric: tabular-nums;
}

/* A disclosed field the worker has no value for. Greyed so it reads as an empty record rather than as data. */
.badge-fact-value.is-absent,
.badge-detail-value.is-absent {
  color: var(--badge-ink-faint);
}

.badge-fact-value-secondary {
  margin-top: 2px;
  font-size: 13px;
  color: var(--badge-ink-label);
}

/* Emergency contact and the other detail panels ---------------------------------------------------------------- */

.badge-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  font-family: var(--badge-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge-card-header.is-alert {
  background: var(--badge-alert);
  color: #fff;
}

.badge-card-header.is-quiet {
  background: var(--badge-head-bg);
  border-bottom: 1px solid var(--badge-head-line);
  color: var(--badge-ink-label);
}

.badge-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 28px;
  padding: 18px 20px;
}

.badge-detail {
  min-width: 0;
}

.badge-detail-label {
  margin-bottom: 3px;
  font-family: var(--badge-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--badge-ink-faint);
}

.badge-detail-value {
  font-size: 15px;
  line-height: 1.4;
  color: var(--badge-ink);
}

.badge-detail-value.is-numeric {
  font-variant-numeric: tabular-nums;
}

.badge-phone {
  font-size: 17px;
  font-weight: 600;
  color: var(--badge-alert-deep);
  font-variant-numeric: tabular-nums;
}

.badge-phone:hover,
.badge-phone:focus {
  color: var(--badge-alert-deep);
}

/* Certifications ------------------------------------------------------------------------------------------------ */

.cert-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 18px 20px 15px;
  background: var(--badge-head-bg);
  border-bottom: 1px solid var(--badge-head-line);
}

.cert-panel-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--badge-ink);
}

.cert-count {
  font-family: var(--badge-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--badge-ink-label);
}

.cert-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--badge-toolbar-line);
}

.cert-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cert-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--badge-ink-soft);
  background: var(--colar-gray-1);
  border: 1px solid var(--colar-gray-3);
  border-radius: 999px;
  cursor: pointer;
}

.cert-filter[aria-pressed="true"] {
  font-weight: 600;
  color: #fff;
  background: var(--colar-gray-11);
  border-color: var(--colar-gray-11);
}

.cert-filter-count {
  font-family: var(--badge-font-mono);
  font-size: 11.5px;
  color: var(--badge-ink-faint);
}

.cert-filter[aria-pressed="true"] .cert-filter-count {
  color: rgba(255, 255, 255, 0.72);
}

.cert-search {
  flex: 1 1 180px;
  max-width: 260px;
  min-width: 0;
  padding: 8px 11px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--badge-ink);
  background: #fff;
  border: 1px solid var(--colar-gray-4);
  border-radius: 7px;
  outline: none;
}

  .cert-search:focus-visible {
    outline: 2px solid var(--colar-blue-9);
    outline-offset: 2px;
  }

/* auto-fit collapses the three columns to one on a narrow screen, so the rows need no breakpoint of their own. */
.cert-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 28px;
  padding: 15px 20px;
  align-items: start;
}

/*
  The filter hides a row with the hidden attribute, whose display:none comes from the browser's own stylesheet and so
  loses to the author rule above. Without this the search and the chips change the count and nothing else.
*/
.cert-row[hidden] {
  display: none;
}

/* Only between two rows that survived the filter, so the first result never carries a rule above it. */
.cert-row:not([hidden]) ~ .cert-row:not([hidden]) {
  border-top: 1px solid var(--badge-line-soft);
}

.cert-row[data-status="expired"] {
  background: var(--badge-alert-wash);
}

.cert-identity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.cert-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--badge-undated);
}

.cert-row[data-status="expired"] .cert-dot {
  background: var(--badge-alert);
}

.cert-row[data-status="current"] .cert-dot {
  background: var(--badge-current);
}

.cert-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--badge-ink);
  text-wrap: pretty;
}

.cert-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.cert-badge {
  padding: 2px 7px;
  font-family: var(--badge-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 4px;
}

.cert-badge.is-expired {
  color: var(--badge-alert);
}

/*
  Says a company holds the record, never which one. Unverified is stated rather than left blank so that a missing
  mark cannot be read as a certification nobody has checked.
*/
.cert-badge.is-verified {
  color: var(--badge-current);
}

.cert-badge.is-unverified {
  color: var(--badge-ink-faint);
}

.cert-field {
  min-width: 0;
}

.cert-field-label {
  margin-bottom: 2px;
  font-family: var(--badge-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--badge-ink-faint);
}

.cert-field-value {
  font-size: 14px;
  color: var(--badge-ink-soft);
  font-variant-numeric: tabular-nums;
}

.cert-field-value.is-expired {
  font-weight: 600;
  color: var(--badge-alert);
}

.cert-field-value.is-absent {
  color: var(--badge-ink-faint);
}

.cert-empty {
  padding: 44px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--badge-ink-label);
}

/* Shown when the company discloses certifications and the worker has none, so it carries the same weight as the
   whole-page empty state rather than reading as a row that failed to render. */
.cert-none {
  padding: 48px 20px;
  text-align: center;
}

.cert-none-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  border: 1px solid var(--badge-line);
  border-radius: 50%;
  color: var(--badge-ink-faint);
}

.cert-none-icon svg {
  width: 20px;
  height: 20px;
}

.cert-none-text {
  margin: 0 auto;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--badge-ink-label);
}

/* Training Connect notice ---------------------------------------------------------------------------------------- */

.badge-notice {
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--badge-ink-soft);
}

.badge-notice p:last-child {
  margin-bottom: 0;
}

/* The theme's $secondary, so a link here matches one anywhere else rather than the old Bootstrap blue. */
.badge-notice a,
.badge-detail-value a {
  color: var(--colar-blue-9);
  text-decoration: underline;
}

/* Shared by the sales badge's booking link and the notice's Continue button, so it has to sit on both elements. */
.badge-cta {
  display: block;
  width: 100%;
  padding: 15px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: var(--colar-gray-11);
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

.badge-cta:hover,
.badge-cta:focus {
  color: #fff;
  text-decoration: none;
  background: var(--colar-gray-12);
}

/* Nothing shared ------------------------------------------------------------------------------------------------ */

/*
  Every badge looks like this until its company turns something on, so this is the page most people will meet and it
  has to read as a decision someone made rather than as a page that failed to load.
*/
.badge-empty {
  text-align: center;
  padding: 60px 24px;
}

.badge-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 26px;
  border: 1px solid var(--badge-line);
  border-radius: 50%;
  color: var(--badge-ink-faint);
}

.badge-empty-icon svg {
  width: 22px;
  height: 22px;
}

.badge-empty-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--badge-ink);
}

.badge-empty-text {
  margin: 0 auto;
  max-width: 360px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--badge-ink-label);
}

.badge-empty-note {
  margin-top: 26px;
  font-family: var(--badge-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--badge-ink-faint);
}

/* Set by the server so a redirect badge is hidden on arrival rather than after scripts have run. */
.badge-hidden {
  display: none;
}

@media (max-width: 575.98px) {
  .badge-page {
    padding: 16px 12px 48px;
  }

  .badge-identity {
    gap: 18px;
    padding: 18px;
  }

  .badge-photo {
    width: 76px;
    height: 76px;
  }

  .badge-name {
    font-size: 26px;
  }

  .badge-empty {
    padding: 44px 20px;
  }

  .badge-empty-title {
    font-size: 20px;
  }
}