/* =======================================================================
 * State / status classes  (CSP Stage 3, hand-maintained)
 * -----------------------------------------------------------------------
 * These replace the handful of style="..." attributes whose value was
 * computed in PHP - status colours and show/hide toggles. They could not
 * become generated utility classes because the value varied per row.
 *
 * The PHP side maps a colour to one of these names via dms_color_class()
 * in includes/auth.php. The hex values here must stay in step with
 * pr_status_color() (includes/pr.php) and rrm_status_color()
 * (includes/rrm.php) - change one, change the other.
 *
 * Selectors are doubled for the same reason as in extracted.css: to keep
 * the specificity the original inline style had.
 * ======================================================================= */

/* ---- status pill backgrounds ---------------------------------------- */
.sc-bg-gold.sc-bg-gold       { background: #B8860B; }
.sc-bg-blue.sc-bg-blue       { background: #1E6FA8; }
.sc-bg-orange.sc-bg-orange   { background: #E08A1E; }
.sc-bg-red.sc-bg-red         { background: #C0392B; }
.sc-bg-green.sc-bg-green     { background: #3C7A2E; }
.sc-bg-dgreen.sc-bg-dgreen   { background: #2A5A20; }
.sc-bg-purple.sc-bg-purple   { background: #8E44AD; }
.sc-bg-teal.sc-bg-teal       { background: #1E8A8A; }
.sc-bg-grey.sc-bg-grey       { background: #6B6B6B; }

/* ---- left accent bar (recruitment status dropdown) ------------------- */
.sc-bl.sc-bl                 { border-left-width: 4px; border-left-style: solid; }
.sc-bl-gold.sc-bl-gold       { border-left-color: #B8860B; }
.sc-bl-blue.sc-bl-blue       { border-left-color: #1E6FA8; }
.sc-bl-orange.sc-bl-orange   { border-left-color: #E08A1E; }
.sc-bl-red.sc-bl-red         { border-left-color: #C0392B; }
.sc-bl-green.sc-bl-green     { border-left-color: #3C7A2E; }
.sc-bl-dgreen.sc-bl-dgreen   { border-left-color: #2A5A20; }
.sc-bl-purple.sc-bl-purple   { border-left-color: #8E44AD; }
.sc-bl-teal.sc-bl-teal       { border-left-color: #1E8A8A; }
.sc-bl-grey.sc-bl-grey       { border-left-color: #6B6B6B; }

/* ---- show / hide ----------------------------------------------------- */
/* NOT !important: apply.php, pr_apply.php, pr_settings.php and files.php
   all flip el.style.display from JavaScript, and an !important class would
   win over that and freeze the element. CSSOM writes are unaffected by CSP. */
.is-hidden.is-hidden         { display: none; }

/* ---- spacing variants that used to be computed inline ---------------- */
.mb-14.mb-14                 { margin-bottom: 14px; }
.mb-0.mb-0                   { margin-bottom: 0; }
.mt-10.mt-10                 { margin-top: 10px; }
.ml-6.ml-6                   { margin-left: 6px; }
.note-line.note-line         { font-size: 13px; color: var(--mym-gray); margin: 0; }

/* ---- sidebar (includes/sidebar.php) ---------------------------------- */
.sb-label.sb-label           { font-size: 13px; margin: 0 0 6px 4px; }
.sb-section.sb-section       { margin-top: 1.5rem; }
.sb-full.sb-full             { width: 100%; }

/* ---- two-factor authentication (mfa_setup.php, login.php) ------------ */
.mfa-panel.mfa-panel         { max-width: 460px; background: var(--mym-white);
                               border: 1px solid var(--mym-border); border-radius: 12px;
                               padding: 1.5rem; }
.mfa-section.mfa-section     { margin-top: 1.75rem; }
.mfa-rule.mfa-rule           { border: 0; border-top: 1px solid var(--mym-border); margin: 1.5rem 0; }
.mfa-status.mfa-status       { font-size: 15px; margin: 0 0 6px; }
.mfa-status-on.mfa-status-on   { color: #2A5A20; }
.mfa-status-off.mfa-status-off { color: #6B6B6B; }
.mfa-warn.mfa-warn           { color: #C0392B; }
.mfa-qr.mfa-qr               { display: block; margin: 12px 0; border: 1px solid var(--mym-border);
                               border-radius: 8px; background: #fff; max-width: 100%; height: auto; }
.mfa-secret.mfa-secret       { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                               font-size: 15px; letter-spacing: 1px; background: #F6F6F6;
                               border: 1px solid var(--mym-border); border-radius: 6px;
                               padding: 10px 12px; cursor: pointer; word-break: normal;
                               overflow-wrap: break-word; margin: 0 0 4px; }
.mfa-code-input.mfa-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                               font-size: 20px; letter-spacing: 6px; text-align: center; }
.mfa-codes.mfa-codes         { list-style: none; padding: 12px; margin: 12px 0 0;
                               background: #F6F6F6; border: 1px solid var(--mym-border);
                               border-radius: 8px; display: grid; grid-template-columns: repeat(2, 1fr);
                               gap: 6px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                               font-size: 15px; letter-spacing: 1px; }
.mfa-intro.mfa-intro         { margin: 0 0 12px; text-align: center; }
.mfa-recovery.mfa-recovery   { margin-top: 14px; text-align: left; font-size: 13px; }
.mfa-recovery.mfa-recovery summary { cursor: pointer; color: var(--mym-gray); }

@media (max-width: 480px) {
  .mfa-codes.mfa-codes       { grid-template-columns: 1fr; }
}
.mfa-inline-form.mfa-inline-form { display: inline; }

/* Password / email inputs were left out of the original .form-row rule in
   style.css, so they rendered at the browser's default width next to
   full-width text inputs. Additive: same box as the text inputs. */
.form-row input[type=password],
.form-row input[type=email] {
  width: 100%; padding: 9px 10px; border: 1px solid var(--mym-border);
  border-radius: var(--radius); font-size: 14px;
}