/* =========================================================
   ui-contrast.css — readable buttons in every state, on the identity palette
   ---------------------------------------------------------
   Loaded LAST on every page (just before </body>), so it wins over the page's
   own <style> blocks and over styles that scripts inject later.

   Rules this file enforces:
   - every state that changes a button's background also sets its text colour,
     and the other way round (owner's testing, 2026-09-13);
   - text/background contrast at least 4.5:1 (WCAG AA) at rest AND on hover;
   - the identity (owner, 2026-09-15): Golden wheat is NEVER text on a light
     ground (1.99:1 on ivory, 2.40:1 on white) — a gold button carries FOREST
     text (6.73:1); Damask Red is danger only; focus rings are Emerald Shadow.
   Ratios below were measured from the identity's own swatches.
   ========================================================= */

:root {
  --btn-blue: #002623;          /* Forest — ivory text 13.4:1, white 16.1:1 */
  --btn-blue-hover: #094239;    /* Emerald Shadow — white text 11.4:1 */
  --btn-green: #094239;         /* Emerald Shadow — white text 11.4:1 */
  --btn-green-hover: #002623;   /* Forest */
  --btn-red: #6C1E2B;           /* Damask Red — white text 11.3:1 */
  --btn-red-hover: #4A151F;     /* Black Cherry — white text 14.6:1 */
  --btn-gold: #B8A678;          /* Golden wheat — FOREST text 6.7:1 */
  --btn-gold-hover: #B8A678;    /* the gold stays; the hover is a Forest ring */
  --btn-gold-text: #002623;
  --btn-amber: #B8A678;         /* «طلب تصحيح»: gold ground, Forest words */
  --btn-amber-hover: #B8A678;
  --btn-grey: #3C3A3B;          /* Stone — white text 11.3:1 */
  --btn-grey-hover: #161616;    /* Charcoal */
  --text-gold: #002623;         /* gold may not be text on light: Forest, with a gold mark */
  --text-muted: #3C3A3B;        /* Stone on white 11.3:1 */
  --focus-ring: #094239;        /* Emerald Shadow, 11.4:1 against white */
}

/* ---------- focus and disabled, everywhere ---------- */
button:focus-visible,
a.btn:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
button:disabled,
.btn:disabled {
  cursor: not-allowed;
}

/* ---------- shared solid buttons (dashboard, review page, account page) ---------- */
.btn-primary { background: var(--forest); color: #FFFFFF; }
.btn-primary:hover { background: var(--emerald-shadow); color: #FFFFFF; }

.btn-success,
.btn-success:hover,
.btn-success:hover:not(:disabled) { color: #FFFFFF; }
.btn-success { background: var(--emerald-shadow); }
.btn-success:hover,
.btn-success:hover:not(:disabled) { background: var(--forest); }

.btn-danger,
.btn-danger:hover { color: #FFFFFF; }
.btn-danger { background: var(--damask-red); }
.btn-danger:hover { background: var(--black-cherry); }

/* Gold buttons: a gold ground with Forest words; the hover draws a Forest ring
   rather than darkening the gold into an unreadable brown. */
.btn-gold,
.btn-gold:hover { color: var(--forest); }
.btn-gold { background: var(--golden-wheat); border: 1px solid var(--golden-wheat); }
.btn-gold:hover { background: var(--golden-wheat); box-shadow: 0 0 0 2px #002623 inset; }

.btn-outline { color: var(--text); border-color: var(--edge); }
.btn-outline:hover { background: var(--forest); color: #FFFFFF; border-color: var(--forest); }
/* An outline button on the dark Forest strip keeps its own light ground, or its
   edge melts into the strip (owner, 2026-09-14). */
.btn-outline.btn-on-strip { background: var(--surface); color: var(--text); border: 2px solid var(--surface); }
.btn-outline.btn-on-strip:hover { background: var(--surface-soft); color: var(--text); border-color: #B8A678;
  box-shadow: 0 0 0 3px rgba(238, 234, 223, .35); }

/* «طلب تصحيح»: gold ground, Forest words — distinct from «قبول» (Emerald) and
   from «رفض» (Damask Red), and readable at rest and on hover. */
.btn-warning { background: var(--golden-wheat); color: var(--forest); border: 0; }
.btn-warning:hover:not(:disabled) { background: var(--golden-wheat); color: var(--forest);
  transform: translateY(-2px); box-shadow: 0 0 0 2px #002623 inset, 0 4px 12px rgba(0, 38, 35, .25); }
.btn-warning:disabled { opacity: .6; cursor: not-allowed; }

/* account page */
.btn-close,
.btn-close:hover { color: #FFFFFF; }
.btn-close { background: var(--stone); }
.btn-close:hover { background: var(--charcoal); }
.btn-pdf:hover { color: #FFFFFF; }
.btn-secondary:hover:not(:disabled) { color: var(--text); }

/* ---------- dashboard tabs and pagers ---------- */
.tab-btn { color: var(--text-soft); }
.tab-btn:hover { color: var(--text); }
/* The active tab keeps its gold underline; its words are Forest. */
.tab-btn.active { color: var(--text); border-bottom-color: #B8A678; }

.logs-pagination .pages button:hover:not(.active):not(:disabled),
.pagination .pages button:hover:not(.active):not(:disabled) {
  color: var(--text);
  background: var(--surface);
}
.logs-pagination .pages button.active,
.pagination .pages button.active {
  background: var(--golden-wheat);
  border-color: var(--golden-wheat);
  color: var(--forest);
}

.review-tab:hover { color: var(--text); background: var(--surface); }

/* ---------- applicant form ---------- */
.btn-nav.btn-prev { background: var(--surface-soft); color: var(--text); }
.btn-nav.btn-prev:hover:not(:disabled) { background: #B8A678; color: #002623; }

.btn-nav.btn-next { background: #002623; color: #FFFFFF; }
.btn-nav.btn-next:hover:not(:disabled) { background: #094239; color: #FFFFFF; }

/* The call to begin is the one gold button of the form: gold ground, Forest words. */
.btn-nav.btn-start,
.btn-login,
.report-btn-submit {
  background: var(--golden-wheat);
  color: var(--forest);
}
.btn-nav.btn-start:hover:not(:disabled),
.btn-login:hover,
.report-btn-submit:hover:not(:disabled) {
  background: var(--golden-wheat);
  color: var(--forest);
  box-shadow: 0 0 0 2px #002623 inset;
}

.btn-nav.btn-review:hover:not(:disabled) { color: #FFFFFF; }

.btn-section-submit { background: var(--emerald-shadow); color: #FFFFFF; }
.btn-section-submit:hover:not(:disabled) { background: var(--forest); color: #FFFFFF; }
.btn-section-save:hover:not(:disabled) { color: var(--text); }
.btn-section-reopen:hover { color: var(--text); }

.stepper-btn-int:hover { background: var(--emerald-shadow); color: #FFFFFF; }
.stepper-btn-dec { background: var(--golden-wheat); color: var(--forest); }
.stepper-btn-dec:hover { background: var(--golden-wheat); color: var(--forest); box-shadow: 0 0 0 2px #002623 inset; }
.stepper-btn-int:disabled,
.stepper-btn-dec:disabled { background: var(--surface-soft); color: var(--text-soft); opacity: 1; }

.test-fill-btn:hover { background: var(--golden-wheat); color: var(--forest); }

.step:hover:not(.active):not(.completed):not(.disabled):not(.locked):not(.ready):not(.error) { color: var(--text); }
.step.available:hover { color: var(--text); }
.btn-progress-action:hover:not(:disabled) { color: var(--text); background: var(--surface); }
.btn-section-clear:hover:not(:disabled) { color: var(--text-danger); background: var(--surface); }

.account-switch button:hover { color: var(--text); }
.account-bypass-btn:hover,
.btn-account-plain:hover,
.stored-doc-open:hover,
.report-edit-btn:hover { color: var(--text); }
.password-toggle:hover { color: var(--text); }

.scroll-top:hover { background: var(--golden-wheat); color: var(--forest); }
.floating-dashboard-btn:hover { color: #FFFFFF; }
.file-preview-btn:hover,
.file-remove-btn:hover { color: #FFFFFF; }
.input-field input[type="file"]::file-selector-button:hover { color: #FFFFFF; }

/* ---------- report dialog (report.js injects its styles earlier in the document) ---------- */
.report-btn-failed { background: var(--damask-red); color: #FFFFFF; }
.report-btn-failed:hover:not(:disabled) { background: var(--black-cherry); color: #FFFFFF; }
.report-btn-close { background: var(--stone); color: #FFFFFF; }
.report-btn-close:hover:not(:disabled) { background: var(--charcoal); color: #FFFFFF; }
.report-btn-print:not(:disabled):hover,
.report-btn-account:hover:not(:disabled) { color: #FFFFFF; }