/* ============================================================================
   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);
}
/* ============================================================================
   Admin shell
   ----------------------------------------------------------------------------
   Almost nothing, on purpose.

   This section used to paint the admin: a purple header band with a gold rule
   under it, a gold rail on the selected menu row, purple primary buttons, a gold
   hairline under every page title. It clashed with Metronic's blue and connected
   to nothing - the brand it referred to lives on the login page and on what
   candidates see, neither of which a staff member is looking at while working a
   roster.

   Stock Metronic 8 light is already a clean, current design, and it is only clean
   while nothing fights it. So the admin's brand presence is four things - the
   wordmark, the favicon, the page title and the footer - and the tool itself is
   left alone. Blue primaries, blue active states, stock hover and focus.

   What is left here sizes the wordmark in the slot the template gives it. When in
   doubt, this file gets shorter.
   ============================================================================ */
/* The wordmark in a brand slot. Sizing only - it brings its own colours, and reads
   the skin it was handed to know which pair to use. */
.app-header .jf-wordmark,
.app-sidebar .jf-wordmark {
  padding: 0.25rem 0;
}