/* ============================================================================
   EmployeeIQ - Job Fair: the authenticated chrome
   ----------------------------------------------------------------------------
   The login pages and the admin shell, wearing the product's own brand.

   Two rules govern everything here:

   1. It reads the tokens from jobfair-theme.css and declares no colour of its
      own. The hex-scan test covers this file, so gold and purple exist in one
      place and this one consumes them.

   2. It is overrides only. No Metronic source file is edited, forked or copied -
      every rule below is a selector aimed at markup Metronic already renders, so
      a Metronic upgrade replaces their files and leaves this one standing.

   The admin brand is fixed. A tenant's colours belong to the pages their
   candidates see; staff see the product they are working in.
   ============================================================================ */
/* ============================================================================
   Account pages: login, forgot password, reset, activation, lock screen
   ============================================================================ */
/* The pitch document's hero, turned vertical. Deep at the top, where the wordmark
   sits and where gold has the contrast to be read, lightening downward behind the
   card. Fixed so a short page and a long one look like the same page. */
.jf-account {
  min-height: 100vh;
  background: var(--jf-brand-dark);
  background: linear-gradient(180deg, var(--jf-brand-dark) 0%, var(--jf-brand) 45%, var(--jf-brand-light) 100%);
  background-attachment: fixed;
}
.jf-account-card {
  padding: 2.5rem;
  box-shadow: var(--jf-shadow-lift);
}
@media (min-width: 992px) {
  .jf-account-card {
    padding: 3.25rem;
  }
}
/* Ours rather than Metronic's grey: on the pale end of the gradient the muted
   token has enough contrast, and the fine print is not trying to be read first. */
.jf-account-fineprint {
  color: var(--jf-on-brand);
  opacity: 0.75;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: center;
}
/* The form inside the card, in the theme's own vocabulary. Metronic's
   form-control-solid is a grey fill; these are the same fields the candidate
   pages use, so the two halves of the product look related. */
.jf-account-card .form-control {
  min-height: var(--jf-touch);
  border: 1.5px solid var(--jf-line);
  border-radius: var(--jf-radius-sm);
  background: var(--jf-card);
  color: var(--jf-ink);
}
.jf-account-card .form-control:focus {
  border-color: var(--jf-brand);
  box-shadow: none;
}
.jf-account-card h3 {
  color: var(--jf-ink);
  letter-spacing: -0.01em;
}
/* The primary action. Purple, with gold arriving on hover and focus rather than
   sitting there permanently - an accent that is always on is not an accent, and
   gold behind white text would not carry its own contrast. So the gold is a rule
   under the button, not the fill. */
.jf-account-card .btn-primary,
.jf-account-card .btn.btn-primary {
  background: var(--jf-brand);
  border-color: var(--jf-brand);
  color: var(--jf-on-brand);
  border-radius: var(--jf-radius-sm);
  min-height: var(--jf-touch);
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.jf-account-card .btn-primary:hover,
.jf-account-card .btn-primary:focus,
.jf-account-card .btn-primary:active {
  background: var(--jf-brand-dark);
  border-color: var(--jf-brand-dark);
  color: var(--jf-on-brand);
  border-bottom-color: var(--jf-gold);
}
/* Links were Bootstrap blue on a purple page. */
.jf-account-card a,
.jf-account-card .text-primary {
  color: var(--jf-brand) !important;
}
.jf-account-card a:hover,
.jf-account-card .text-hover-primary:hover {
  color: var(--jf-brand-dark) !important;
}
.jf-account-card .form-check-input:checked {
  background-color: var(--jf-brand);
  border-color: var(--jf-brand);
}
/* The language row. It was a wall of flags presented as a design feature; it is
   now a quiet strip that still does exactly what it did. */
.jf-account-languages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.jf-account-languages a,
.jf-account-languages .dropdown-toggle {
  color: var(--jf-on-brand);
  opacity: 0.85;
  text-decoration: none;
}
.jf-account-languages a:hover {
  opacity: 1;
  color: var(--jf-on-brand);
}
/* An error on a login form is the one message that must not be missed. */
.jf-account-card .alert-danger,
.jf-account-card .validation-summary-errors {
  border: 1px solid var(--jf-red);
  background: var(--jf-danger-bg);
  color: var(--jf-danger-ink);
  border-radius: var(--jf-radius-sm);
}
/* ============================================================================
   The paper skin
   ----------------------------------------------------------------------------
   The authenticated application, wearing the design in
   docs/user-guide/how-to-run-your-first-job-fair.html: warm paper canvas, white
   surfaces, hairlines the colour of a fold, ink typography, one ring shadow, and
   purple as the accent rather than a band across the top.

   This is not paint on Metronic. The previous attempt was - a purple header
   fighting a grey framework - and taking it off was right. What is here instead
   replaces Metronic's canvas at the variable layer: the framework's own custom
   properties are pointed at the product's tokens, so components that were never
   touched still come out in the right colours, and a Metronic upgrade replaces
   their files without disturbing this one.

   Three rules hold:

   1. Everything is scoped under .jf-skin, which the authenticated layout puts on
      the body. Nothing here can reach the login pages or a candidate's screen.

   2. No colour is named. Every value is a --jf- token from jobfair-theme.css,
      which the hex scan enforces and which is what makes per-tenant branding
      possible on the pages that have it.

   3. Retarget before overriding. A rule that fights a component is a rule that
      breaks on the next Metronic release; a variable that feeds it is not.
   ============================================================================ */
.jf-skin {
  /* -- the canvas ------------------------------------------------------------
       Paper behind the shell, white on the surfaces that sit on it. Metronic uses
       --bs-body-bg for cards, modals, dropdowns and inputs alike, so that one is
       the surface colour and the page's own ground is --bs-app-bg-color. */
  --bs-app-bg-color: var(--jf-bg);
  --bs-body-bg: var(--jf-card);
  --bs-app-blank-bg-color: var(--jf-bg);
  --bs-body-color: var(--jf-ink);
  --bs-heading-color: var(--jf-ink);
  --bs-border-color: var(--jf-line);
  --bs-border-color-translucent: var(--jf-line);
  /* The grey ramp, warmed. This is the single most load-bearing block in the
       file: Metronic reaches for gray-100 whenever it wants "slightly off-white",
       which on a cool ramp is what made every hover, every toolbar button and
       every table stripe read as grey-on-grey. Pointed at paper and the hairline,
       the same components come out as the guide draws them. */
  --bs-gray-100: var(--jf-bg);
  --bs-gray-200: var(--jf-line);
  --bs-gray-300: var(--jf-line);
  --bs-gray-500: var(--jf-faint);
  --bs-gray-600: var(--jf-faint);
  --bs-gray-700: var(--jf-ink);
  --bs-gray-800: var(--jf-ink);
  --bs-gray-900: var(--jf-ink);
  /* Metronic's "light" is a grey fill. Here it is a white surface, and the ring
       below gives it its edge - which is how the guide draws a secondary button. */
  --bs-light: var(--jf-card);
  --bs-light-active: var(--jf-bg);
  --bs-light-light: var(--jf-card);
  --bs-light-inverse: var(--jf-ink);
  --bs-secondary: var(--jf-line);
  --bs-secondary-active: var(--jf-line);
  /* -- purple is the primary -------------------------------------------------
       The whole blue family, redirected. Every member matters: miss --bs-text-primary
       and links stay blue, miss --bs-primary-light and every light-primary button
       stays a pale blue wash, miss the rgb triplet and the focus rings do. */
  --bs-primary: var(--jf-brand);
  --bs-primary-active: var(--jf-brand-dark);
  --bs-primary-light: var(--jf-brand-light);
  --bs-primary-inverse: var(--jf-on-brand);
  --bs-primary-rgb: var(--jf-brand-rgb);
  --bs-primary-clarity: color-mix(in srgb, var(--jf-brand) 20%, transparent);
  --bs-text-primary: var(--jf-brand);
  --bs-primary-bg-subtle: var(--jf-brand-light);
  --bs-primary-border-subtle: var(--jf-brand);
  --bs-primary-text-emphasis: var(--jf-brand-dark);
  --bs-link-color: var(--jf-brand);
  --bs-link-hover-color: var(--jf-brand-dark);
  /* Selected, checked and hovered - checkboxes, radios, pagination, tabs and
       anything else Metronic built on its component tokens. */
  --bs-component-active-bg: var(--jf-brand);
  --bs-component-active-color: var(--jf-on-brand);
  --bs-component-checked-bg: var(--jf-brand);
  --bs-component-checked-color: var(--jf-on-brand);
  --bs-component-hover-bg: var(--jf-brand-light);
  --bs-component-hover-color: var(--jf-brand-dark);
  /* -- status ----------------------------------------------------------------
       Metronic's greens and reds are brighter than this product's. The washes get
       the product's own, and the inverse stays white because these are fills. */
  --bs-success: var(--jf-green);
  --bs-success-active: var(--jf-green);
  --bs-success-light: var(--jf-success-bg);
  --bs-success-inverse: var(--jf-on-brand);
  --bs-danger: var(--jf-red);
  --bs-danger-active: var(--jf-red);
  --bs-danger-light: var(--jf-danger-bg);
  --bs-danger-inverse: var(--jf-on-brand);
  --bs-warning: var(--jf-amber);
  --bs-warning-active: var(--jf-amber);
  --bs-warning-light: var(--jf-warning-bg);
  --bs-warning-inverse: var(--jf-on-brand);
  /* -- shape -----------------------------------------------------------------
       Metronic's radii are a shade tighter than the guide's. Cards get the large
       radius, everything else the small one. */
  --bs-border-radius: var(--jf-radius-sm);
  --bs-border-radius-sm: var(--jf-radius-sm);
  --bs-border-radius-lg: var(--jf-radius);
  --bs-card-border-radius: var(--jf-radius);
  --bs-card-inner-border-radius: var(--jf-radius);
  --bs-modal-border-radius: var(--jf-radius);
  --bs-modal-inner-border-radius: var(--jf-radius);
  --bs-dropdown-border-radius: var(--jf-radius-sm);
  --bs-pagination-border-radius: var(--jf-radius-sm);
  --bs-nav-pills-border-radius: var(--jf-radius-sm);
  /* -- cards -----------------------------------------------------------------
       The ring, and nothing else: no border, no blur, no cap underline. Set on the
       root pair rather than on --bs-card-* because .card redeclares those from
       --bs-root-card-* at its own level, which would win. */
  --bs-root-card-box-shadow: var(--jf-ring);
  --bs-root-card-border-color: transparent;
  --bs-card-bg: var(--jf-card);
  --bs-card-border-width: 0;
  --bs-card-cap-bg: transparent;
  --bs-card-title-color: var(--jf-ink);
  /* -- tables ----------------------------------------------------------------
       Hairline separators, a brand wash on hover, and no stripes - a zebra table
       is a table you read by row colour rather than by content. */
  --bs-table-color: var(--jf-ink);
  --bs-table-border-color: var(--jf-line);
  --bs-table-hover-bg: var(--jf-brand-light);
  --bs-table-hover-color: var(--jf-ink);
  --bs-table-active-bg: var(--jf-brand-light);
  --bs-table-active-color: var(--jf-ink);
  --bs-table-striped-bg: transparent;
  /* -- fields ---------------------------------------------------------------- */
  --bs-input-bg: var(--jf-card);
  --bs-input-color: var(--jf-ink);
  --bs-input-solid-bg: var(--jf-card);
  --bs-input-solid-bg-focus: var(--jf-card);
  --bs-input-solid-color: var(--jf-ink);
  --bs-input-solid-placeholder-color: var(--jf-faint);
  /* -- things that float ------------------------------------------------------
       One lift shadow for a thing that is genuinely above the page, and the ring
       is reserved for things that are not. */
  --bs-modal-bg: var(--jf-card);
  --bs-modal-box-shadow: var(--jf-shadow-lift);
  --bs-modal-header-border-color: var(--jf-line);
  --bs-modal-footer-border-color: var(--jf-line);
  --bs-dropdown-bg: var(--jf-card);
  --bs-dropdown-color: var(--jf-ink);
  --bs-dropdown-box-shadow: var(--jf-shadow-lift);
  --bs-dropdown-divider-bg: var(--jf-line);
  --bs-menu-dropdown-bg-color: var(--jf-card);
  --bs-menu-dropdown-box-shadow: var(--jf-shadow-lift);
  /* -- menus ------------------------------------------------------------------ */
  --bs-menu-link-bg-color-active: var(--jf-brand-light);
  --bs-menu-link-bg-color-here: var(--jf-brand-light);
  --bs-menu-link-bg-color-hover: var(--jf-brand-light);
  --bs-menu-link-bg-color-show: var(--jf-brand-light);
  --bs-menu-link-color-active: var(--jf-brand-dark);
  --bs-menu-link-color-here: var(--jf-brand-dark);
  --bs-menu-link-color-hover: var(--jf-brand-dark);
  --bs-menu-link-color-show: var(--jf-brand-dark);
  --bs-menu-heading-color: var(--jf-faint);
  /* -- the shell --------------------------------------------------------------
       Header, sidebar and footer are paper, separated from the content by a
       hairline and nothing else. No band, no shadow, no rail: the guide's own
       navigation is the page colour with a single line under it. */
  --bs-app-header-base-bg-color: var(--jf-bg);
  --bs-app-header-base-box-shadow: none;
  --bs-app-header-light-separator-color: var(--jf-line);
  --bs-app-header-minimize-bg-color: var(--jf-bg);
  --bs-app-header-minimize-box-shadow: none;
  --bs-app-sidebar-light-bg-color: var(--jf-bg);
  --bs-app-sidebar-light-box-shadow: none;
  --bs-app-sidebar-light-separator-color: var(--jf-line);
  --bs-app-sidebar-light-menu-link-color: var(--jf-muted);
  --bs-app-sidebar-light-menu-link-icon-color: var(--jf-faint);
  --bs-app-sidebar-light-menu-link-bg-color-active: var(--jf-brand-light);
  --bs-app-sidebar-light-header-menu-link-bg-color-active: var(--jf-brand-light);
  --bs-app-sidebar-light-menu-heading-color: var(--jf-faint);
  --bs-app-sidebar-base-border-color: var(--jf-line);
  --bs-app-sidebar-base-toggle-btn-bg-color: var(--jf-card);
  --bs-app-sidebar-base-toggle-btn-border-color: var(--jf-line);
  --bs-app-sidebar-base-toggle-btn-box-shadow: var(--jf-ring);
  --bs-app-toolbar-base-bg-color: var(--jf-bg);
  --bs-app-toolbar-base-box-shadow: none;
  --bs-app-toolbar-base-border-top: 0;
  --bs-app-footer-bg-color: var(--jf-bg);
  --bs-app-footer-box-shadow: none;
}
/* ============================================================================
   Components
   ----------------------------------------------------------------------------
   Only where a variable could not say it. Each rule below is a shape, a weight or
   a piece of typography - the colours all came from the block above.
   ============================================================================ */
/* -- the shell's hairlines --------------------------------------------------- */
.jf-skin .app-header {
  border-bottom: 1px solid var(--jf-line);
}
.jf-skin .app-sidebar {
  border-right: 1px solid var(--jf-line);
}
/* -- the label voice ---------------------------------------------------------
   The guide's eyebrow, and the same type on a table header, a field label and a
   section kicker. Small, uppercase, letter-spaced, faint - it is the voice that
   says "this names the thing below it" without competing with the thing. */
.jf-skin .form-label,
.jf-skin .table thead th,
.jf-skin .dataTables_wrapper .table thead th {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jf-faint);
}
/* -- headings ---------------------------------------------------------------- */
.jf-skin h1,
.jf-skin h2,
.jf-skin h3,
.jf-skin .card-title,
.jf-skin .page-title h1 {
  color: var(--jf-ink);
  font-weight: 650;
  letter-spacing: -0.015em;
}
.jf-skin .page-title .text-muted,
.jf-skin .card-title + .text-muted {
  color: var(--jf-muted);
}
/* -- cards ------------------------------------------------------------------- */
.jf-skin .card {
  border: 0;
}
/* The cap keeps its height and loses its rule: on paper, a card's header is told
   apart from its body by weight, not by a line across the middle of a white box. */
.jf-skin .card .card-header {
  border-bottom: 0;
  min-height: unset;
  padding-top: 1.25rem;
}
.jf-skin .card .card-header + .card-body {
  padding-top: 0.75rem;
}
/* -- tables ------------------------------------------------------------------ */
.jf-skin .table {
  --bs-table-bg: transparent;
}
.jf-skin .table thead th {
  border-bottom: 1px solid var(--jf-line);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/* Metronic's dashed row separator, made solid. A dashed rule reads as a torn edge
   at small sizes and the guide's tables use a hairline. */
.jf-skin .table.table-row-dashed tr {
  border-bottom-style: solid;
  border-bottom-color: var(--jf-line);
}
.jf-skin .table tbody tr:hover > td {
  background: var(--jf-brand-light);
}
/* -- buttons ------------------------------------------------------------------
   Primary is a purple fill; secondary is a white surface with the ring around it.
   Both are the guide's, and the second is the one Metronic had as a grey wash. */
.jf-skin .btn.btn-light,
.jf-skin .btn.btn-secondary {
  background-color: var(--jf-card);
  border-color: transparent;
  color: var(--jf-ink);
  box-shadow: var(--jf-ring);
}
.jf-skin .btn.btn-light:hover,
.jf-skin .btn.btn-light:focus,
.jf-skin .btn.btn-light:active,
.jf-skin .btn.btn-secondary:hover,
.jf-skin .btn.btn-secondary:focus {
  background-color: var(--jf-brand-light);
  color: var(--jf-brand-dark);
  box-shadow: var(--jf-ring);
}
.jf-skin .btn.btn-primary {
  box-shadow: none;
}
/* -- fields -------------------------------------------------------------------
   A hairline box on white, and a focus that changes the border rather than adding
   a glow around it. */
.jf-skin .form-control,
.jf-skin .form-select,
.jf-skin .form-control.form-control-solid,
.jf-skin .form-select.form-select-solid {
  background-color: var(--jf-card);
  border: 1px solid var(--jf-line);
  border-radius: var(--jf-radius-sm);
  color: var(--jf-ink);
}
.jf-skin .form-control:focus,
.jf-skin .form-select:focus,
.jf-skin .form-control.form-control-solid:focus,
.jf-skin .form-select.form-select-solid:focus {
  background-color: var(--jf-card);
  border-color: var(--jf-brand);
  box-shadow: none;
  color: var(--jf-ink);
}
.jf-skin .form-control::placeholder {
  color: var(--jf-faint);
}
/* -- badges and status pills ---------------------------------------------------
   Pills, and each one a wash with its own ink rather than the status colour on
   white - a status colour is sized for a fill, and as small text on its own wash
   it lands around 3:1. The pairs below clear the bar. */
.jf-skin .badge {
  border-radius: var(--jf-radius-pill);
  font-weight: 650;
  letter-spacing: 0.01em;
}
.jf-skin .badge.badge-light,
.jf-skin .badge.badge-secondary {
  background: var(--jf-bg);
  color: var(--jf-muted);
}
.jf-skin .badge.badge-light-primary {
  background: var(--jf-brand-light);
  color: var(--jf-brand-dark);
}
.jf-skin .badge.badge-light-success {
  background: var(--jf-success-bg);
  color: var(--jf-success-ink);
}
.jf-skin .badge.badge-light-warning {
  background: var(--jf-warning-bg);
  color: var(--jf-warning-ink);
}
.jf-skin .badge.badge-light-danger {
  background: var(--jf-danger-bg);
  color: var(--jf-danger-ink);
}
/* -- the menu ------------------------------------------------------------------
   A selected row is a soft brand panel with a rounded corner, not a rail and not
   a band. Icons take the row's colour, so a selected row is one colour rather
   than two. */
.jf-skin .app-sidebar .menu-item > .menu-link,
.jf-skin .app-header .menu-item > .menu-link {
  border-radius: var(--jf-radius-sm);
}
.jf-skin .menu-item .menu-link .menu-icon i,
.jf-skin .menu-item .menu-link .menu-icon .svg-icon {
  color: inherit;
}
.jf-skin .app-sidebar .menu-item.here > .menu-link,
.jf-skin .app-sidebar .menu-item > .menu-link.active {
  background: var(--jf-brand-light);
  color: var(--jf-brand-dark);
  font-weight: 650;
}
/* -- alerts --------------------------------------------------------------------
   The washes the rest of the product already uses for the same three sentences. */
.jf-skin .alert.alert-light-primary {
  background: var(--jf-brand-light);
  color: var(--jf-brand-dark);
  border: 0;
}
.jf-skin .alert.alert-light-success {
  background: var(--jf-success-bg);
  color: var(--jf-success-ink);
  border: 0;
}
.jf-skin .alert.alert-light-warning {
  background: var(--jf-warning-bg);
  color: var(--jf-warning-ink);
  border: 0;
}
.jf-skin .alert.alert-light-danger,
.jf-skin .alert.alert-danger {
  background: var(--jf-danger-bg);
  color: var(--jf-danger-ink);
  border: 0;
}
/* -- tabs, pagination, modals ---------------------------------------------------
   Same vocabulary, nothing invented. */
.jf-skin .nav-line-tabs .nav-item .nav-link.active,
.jf-skin .nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
  border-bottom-color: var(--jf-brand);
  color: var(--jf-brand-dark);
}
.jf-skin .nav-line-tabs {
  border-bottom-color: var(--jf-line);
}
.jf-skin .pagination .page-link {
  border-radius: var(--jf-radius-sm);
}
.jf-skin .modal-content {
  border: 0;
  border-radius: var(--jf-radius);
}
.jf-skin .modal-header {
  border-bottom: 1px solid var(--jf-line);
}
/* -- focus ----------------------------------------------------------------------
   Never removed, and now in the accent rather than in Metronic's blue. Keyboard
   and switch users have no other way of knowing where they are. */
.jf-skin :focus-visible {
  outline: 2px solid var(--jf-brand);
  outline-offset: 2px;
}
/* -- the wordmark ---------------------------------------------------------------
   Sizing only, unchanged from the review fix that made it read on a light aside.
   The paper skin pins the shell light, so the ink variant is the one it renders. */
.jf-skin .app-header .jf-wordmark,
.jf-skin .app-sidebar .jf-wordmark {
  padding: 0.25rem 0;
}