/**
 * cat/staff/assets/css/staff_entry.css — styling for the staff entry gate.
 *
 * @version 0.4.0
 * Changelog
 *   0.4.0 — Logo crest: .ent-crest-logo / .ent-crest-img added, mirroring
 *           .reg-crest-logo / .reg-crest-img in registration_form.css v1.3.0, so this
 *           masthead matches profile.php and registration.php.
 *           The modifier strips the disc entirely — background, border AND box-shadow.
 *           All three have to go, not just the background:
 *             • the base .ent-crest is BURGUNDY (unlike the light .reg-crest), and the
 *               logo is burgundy too, so on the disc the mark would be invisible;
 *             • a drop shadow behind a transparent PNG traces the square BOX, not the
 *               mark, so it would have cast a visible rectangle.
 *           Container sized 92px to match the image (base .ent-crest is 62px, so the
 *           image would otherwise overflow its own box).
 *   0.3.0 — Step-1 lookup gets FormValidation.io red/green borders (mirrors
 *           registration.php's single-box affix model): ring lifts onto the whole
 *           .ent-affix via :has(.is-invalid/.is-valid), inner input borderless,
 *           FV message floats below.
 *   0.2.0 — Ghost-button (Clear) + disabled-affix (mutual-exclusivity) styling.
 *   0.1.0 — Initial. Shares the registration form's palette + masthead + affix
 *           language so entry → form is visually continuous. Adds the progressive
 *           stepper, channel pills, and 6-box OTP styling.
 */

:root {
  --burgundy: #6B1A2D;
  --gold: #D8A521;
  --gold-dark: #8A5A00;
  --parchment: #f6efe0;
  --ink: #2b2b2b;
  --muted: #8a8175;
  --line: #e7e0d2;
  --field-border: #d6cdbb;
  --bg: #fbf8f1;
  --ok: #2e7d32;
  --err: #b3261e;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased
}

.ar { font-family: "Cairo", system-ui, sans-serif }

.ent-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 16px 48px
}

/* ── Masthead (mirrors registration form) ───────────────────────────────── */
.ent-masthead { padding: 8px 0 18px }

.ent-crest {
  width: 62px; height: 62px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 28%, #8a2740, var(--burgundy));
  color: #f3e4c6;
  font-size: 26px;
  box-shadow: 0 6px 18px rgba(107, 26, 45, .28);
  border: 2px solid var(--gold)
}

/* --- Logo crest (replaces the FA cross in the masthead) ---
   Mirrors .reg-crest-logo / .reg-crest-img in registration_form.css, so this page's
   masthead matches profile.php and registration.php exactly.

   The disc is stripped: the logo IS a circular crest, so the ring and gradient behind
   it were a circle inside a circle — and the ring was eating the space the mark needs
   to stay legible at this size.

   Note the base .ent-crest was BURGUNDY (unlike .reg-crest, which is light) and also
   carries a box-shadow. Both have to go, not just the background: the logo is burgundy,
   so on the burgundy disc it was invisible; and a drop shadow on a transparent PNG
   would trace the square BOX, not the mark. */
.ent-crest-logo {
  width: 92px;          /* match .ent-crest-img: the base .ent-crest is 62px, so the
                           image would otherwise overflow its own container and the
                           12px bottom margin would be measured from the wrong edge */
  height: 92px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.ent-crest-img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.ent-title {
  font-size: 23px; font-weight: 800;
  color: var(--burgundy);
  margin: 0 0 2px; line-height: 1.2
}

.ent-title-ar {
  font-family: "Cairo", sans-serif;
  font-size: 17px; font-weight: 700;
  color: var(--gold-dark);
  margin: 0 0 8px
}

.ent-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 12px }

.ent-yearpill {
  display: inline-block;
  background: var(--burgundy); color: #fff;
  font-size: 12.5px; font-weight: 700;
  padding: 4px 14px; border-radius: 999px;
  letter-spacing: .3px
}

/* ── Maintenance notice ─────────────────────────────────────────────────── */
.ent-notice {
  display: flex; align-items: center; gap: 10px;
  background: #fff7e6; border: 1px solid #f0d99a;
  color: #7a5a13; border-radius: 10px;
  padding: 10px 14px; font-size: 13px;
  margin: 0 0 18px
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.ent-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(90, 60, 30, .08);
  padding: 0;
  overflow: hidden
}

/* ── Step rail ──────────────────────────────────────────────────────────── */
.ent-steps {
  display: flex; gap: 0; margin: 0; padding: 0;
  list-style: none;
  background: var(--parchment);
  border-bottom: 1px solid var(--line)
}

.ent-step {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  padding: 12px 6px;
  position: relative
}

.ent-step .n {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; border: 1.5px solid var(--field-border);
  font-size: 12px; font-weight: 700;
  color: var(--muted)
}

.ent-step.is-current { color: var(--burgundy) }
.ent-step.is-current .n { background: var(--burgundy); border-color: var(--burgundy); color: #fff }
.ent-step.is-done .n { background: var(--gold); border-color: var(--gold); color: #fff }
.ent-step.is-done { color: var(--gold-dark) }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.ent-panel { padding: 26px 24px 28px; animation: entFade .25s ease both }
.ent-panel[hidden] { display: none }

@keyframes entFade {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .ent-panel { animation: none }
}

.ent-h2 {
  font-size: 19px; font-weight: 800;
  color: var(--burgundy);
  margin: 0 0 6px
}

.ent-lead { font-size: 14px; color: #4a463f; margin: 0 0 4px; line-height: 1.5 }
.ent-lead-ar { font-family: "Cairo", sans-serif; font-size: 13.5px; color: var(--muted); margin: 4px 0 14px }
.ent-or { font-size: 12.5px; color: var(--muted); margin: 10px 0 0 }

/* ── Labels ─────────────────────────────────────────────────────────────── */
.ent-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 700; color: var(--burgundy);
  margin: 0 0 6px
}
.ent-label .ar { font-weight: 700; color: var(--gold-dark); font-size: 12.5px }

/* ── Affix (matches the registration form's single-box affix) ───────────── */
.ent-affix {
  display: flex; align-items: stretch;
  height: 44px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff
}
.ent-affix .affix {
  display: flex; align-items: center;
  padding: 0 12px;
  background: var(--parchment);
  color: var(--gold-dark);
  font-weight: 700; font-size: 13.5px;
  border-inline-end: 1px solid var(--field-border);
  border-radius: 7px 0 0 7px;
  white-space: nowrap
}
.ent-affix .form-control {
  border: none; box-shadow: none; height: 100%;
  background: transparent; font-size: 14px;
  padding: 0 12px
}
.ent-affix .form-control:focus { box-shadow: none }
.ent-affix:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216, 165, 33, .18)
}

/* FormValidation.io (Bootstrap5 plugin) integration — mirrors registration.php's
   single-box affix model. The plugin wraps the input in .fv-plugins-icon-container
   and toggles is-invalid / is-valid on the input; we lift the red/green ring onto
   the WHOLE .ent-affix box and keep the inner input borderless. */
.ent-affix .fv-plugins-icon-container {
  flex: 1 1 auto; min-width: 0; display: flex
}
.ent-affix .fv-plugins-icon-container > .form-control {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 100%;
  border: none !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important;
  padding: 0 12px
}
.ent-affix .fv-plugins-icon { display: none !important }

/* neutralise the input's own is-invalid/is-valid border (ring goes on the box) */
.ent-affix .form-control.is-invalid,
.ent-affix .form-control.is-valid {
  border: none !important; box-shadow: none !important;
  background-image: none !important
}

/* red box when invalid, green when valid */
.ent-affix:has(.is-invalid) {
  border-color: var(--err) !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .14)
}
.ent-affix:has(.is-invalid) .affix { border-inline-end-color: var(--err) }

.ent-affix:has(.is-valid) {
  border-color: var(--ok) !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 82, .12)
}
.ent-affix:has(.is-valid) .affix { border-inline-end-color: var(--ok) }

/* FV message under the affix box */
.ent-affix > .fv-plugins-message-container,
.ent-affix .fv-plugins-icon-container + .fv-plugins-message-container {
  position: absolute; top: 100%; left: 0; width: 100%; margin-top: 3px
}
/* the affix needs a positioning context + room for the message below it */
.ent-affix { position: relative; margin-bottom: 20px }

/* row-level FV classes can draw their own border — neutralise (no doubled ring) */
.fv-plugins-bootstrap5-row-invalid,
.fv-plugins-bootstrap5-row-valid {
  border: none !important; background: none !important; box-shadow: none !important
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ent-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap }

.ent-btn-primary {
  background: var(--burgundy); color: #fff;
  border: none; border-radius: 9px;
  padding: 11px 22px; font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease
}
.ent-btn-primary:hover { background: #571421 }
.ent-btn-primary:active { transform: translateY(1px) }
.ent-btn-primary:disabled { opacity: .55; cursor: not-allowed }
.ent-btn-primary .ar { font-weight: 700; opacity: .85 }

.ent-btn-ghost {
  background: #fff; color: var(--burgundy);
  border: 1.5px solid var(--field-border); border-radius: 9px;
  padding: 11px 20px; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: border-color .15s, background .15s
}
.ent-btn-ghost:hover { border-color: var(--burgundy); background: #fdf6f2 }
.ent-btn-ghost .ar { font-weight: 700; opacity: .8 }

/* disabled (mutually-exclusive) affix field */
.ent-affix.is-disabled {
  background: #f4f1ea; opacity: .6
}
.ent-affix.is-disabled .affix { background: #ece6d8 }
.ent-affix.is-disabled .form-control { cursor: not-allowed }

.ent-back, .ent-link {
  background: none; border: none; cursor: pointer;
  color: var(--gold-dark); font-size: 13px; font-weight: 600;
  padding: 0; text-decoration: underline; text-underline-offset: 2px
}
.ent-back { margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none }
.ent-back:hover { color: var(--burgundy) }
.ent-link:disabled { color: var(--muted); cursor: default; text-decoration: none }

/* ── Channel pills ──────────────────────────────────────────────────────── */
.ent-radioset { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px }
.ent-pill { position: relative; cursor: pointer; flex: 1; min-width: 180px }
.ent-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer }
.ent-pill .face {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--field-border); border-radius: 10px;
  padding: 13px 15px; font-size: 14px; font-weight: 600;
  background: #fff; transition: border-color .15s, background .15s
}
.ent-pill .face small { color: var(--muted); font-weight: 500; margin-inline-start: auto }
.ent-pill .face i { color: var(--gold-dark) }
.ent-pill input:checked + .face {
  border-color: var(--burgundy);
  background: #fdf6f2;
  box-shadow: inset 0 0 0 1px var(--burgundy)
}
.ent-pill input:focus-visible + .face { box-shadow: 0 0 0 3px rgba(216, 165, 33, .25) }

/* ── OTP boxes ──────────────────────────────────────────────────────────── */
.ent-otp-auto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }

.ent-otp-boxes { display: flex; gap: 8px; justify-content: center; margin: 16px 0 4px }
.ent-otp-box {
  width: 46px; height: 56px;
  text-align: center; font-size: 22px; font-weight: 700;
  border: 1.5px solid var(--field-border); border-radius: 10px;
  background: #fff; color: var(--ink)
}
.ent-otp-box:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216, 165, 33, .2)
}
.ent-otp-box.is-filled { border-color: var(--burgundy) }

@media (max-width: 420px) {
  .ent-otp-box { width: 40px; height: 50px; font-size: 19px }
}

.ent-recovery {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 14px; flex-wrap: wrap
}

/* ── Messages ───────────────────────────────────────────────────────────── */
.ent-msg { margin-top: 14px; font-size: 13.5px; min-height: 1.2em }
.ent-msg.is-err { color: var(--err) }
.ent-msg.is-ok { color: var(--ok) }

/* ── Success / handoff ──────────────────────────────────────────────────── */
.ent-success { text-align: center; padding: 40px 24px 44px }
.ent-tick { font-size: 52px; color: var(--ok); margin-bottom: 10px }
.ent-spin { margin: 18px auto 0; width: 30px; height: 30px }
.ent-spin span {
  display: block; width: 100%; height: 100%;
  border: 3px solid var(--line); border-top-color: var(--burgundy);
  border-radius: 50%; animation: entSpin .8s linear infinite
}
@keyframes entSpin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
  .ent-spin span { animation-duration: 2s }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ent-foot { text-align: center; margin-top: 22px; font-size: 12px; color: var(--muted) }