/* ── The visual system ─────────────────────────────────────────────────────
   Six role colours, taken from page 10 of the mockup. They are named for the
   role they play, not the hue: what "review" means must not change when the
   red is retuned, and nothing outside this block should ever hard-code one of
   these values.

   Trust   navy      chrome, headings, the brand
   Action  blue      primary buttons, the one thing to click
   Signal  turquoise the active accent (nav underline, brand mark)
   OK      green     the clean verdict
   Caution amber     the uncertain verdict, and estimates
   Review  red       the "signs found" verdict

   Note that Review is *review*, not "forgery". The wording rules in the UX
   plan forbid the interface from ever claiming a document is fake, and the
   colour has to mean the same thing the words do. */
:root {
  --if-trust: #11233f;
  --if-trust-soft: #233b5e;
  --if-action: #2356d6;
  --if-signal: #1fb8cd;
  --if-ok: #138764;
  --if-caution: #d68911;
  --if-review: #d84954;

  /* Tints, for badges and panel fills. Sampled from the mockup rather than
     computed, so the pale fills stay exactly as designed. */
  --if-action-tint: #e9efff;
  --if-ok-tint: #e9f8f2;
  --if-caution-tint: #fff6e4;
  --if-review-tint: #ffeff0;

  --if-canvas: #f4f6fb;
  --if-surface: #ffffff;
  --if-muted: #677489;
  --if-border: #e3e7ef;

  /* Hand the palette to Bootstrap wherever Bootstrap actually reads a variable,
     rather than restating values in our own rules. In 5.3 that is a short list:
     --bs-border-radius reaches 46 rules (.card, .btn, .alert, .badge,
     .form-control, .dropdown-menu ...), and the colour utilities read the -rgb
     form. The bare --bs-primary / --bs-danger names are declared by Bootstrap
     but read by nothing, so overriding those alone changes no pixels.

     Only the roles that mean the same thing in both vocabularies are mapped.
     Bootstrap's names are statuses -- danger is an error, success is a
     confirmation -- while ours are finding severities, and --if-review
     deliberately does NOT mean "error". Mapping it onto --bs-danger would give
     the verdict bar and "the feedback could not be saved" the same red, with no
     way to tell them apart afterwards. */
  --bs-border-radius: 0.75rem;
  --bs-primary-rgb: 35, 86, 214;
}

body {
  background-color: var(--if-canvas);
  color: var(--if-trust);
}

/* Bootstrap 5.3 buttons read their colours from --bs-btn-* custom properties,
   so the palette can be applied without recompiling Sass or shipping a fork. */
.btn-primary {
  --bs-btn-bg: var(--if-action);
  --bs-btn-border-color: var(--if-action);
  --bs-btn-hover-bg: #1c48b4;
  --bs-btn-hover-border-color: #1c48b4;
  --bs-btn-active-bg: #17399a;
  --bs-btn-active-border-color: #17399a;
  --bs-btn-disabled-bg: var(--if-action);
  --bs-btn-disabled-border-color: var(--if-action);
}

.btn-link {
  --bs-btn-color: var(--if-action);
  --bs-btn-hover-color: #1c48b4;
}

.card {
  border-color: var(--if-border);
}

/* Bootstrap hard-codes its own blue here rather than reading a variable, so the
   feedback radios would otherwise be a different blue from every button. */
.form-check-input:checked {
  background-color: var(--if-action);
  border-color: var(--if-action);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--if-trust);
}

/* ── Navbar ───────────────────────────────────────────────────────────── */

.if-navbar {
  background-color: var(--if-trust);
  padding: 0.75rem 0;
}

.if-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.2px;
  text-decoration: none;
}

.if-brand:hover {
  color: #fff;
}

/* The circular "IF" mark from the mockup. A rendered element rather than an
   image asset: two letters at one size, and it stays crisp at any zoom. */
.if-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--if-signal);
  color: var(--if-trust);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.if-nav-link {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  text-decoration: none;
}

.if-nav-link:hover {
  color: #fff;
}

.if-nav-link.active {
  color: #fff;
  font-weight: 600;
}

/* The turquoise underline that marks the current section. Drawn on a
   pseudo-element so the link's own box keeps its height and the row of links
   does not shift by a pixel when the active item changes. */
.if-nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.75rem;
  height: 3px;
  background-color: var(--if-signal);
  border-radius: 2px;
}

.if-pill {
  background-color: var(--if-trust-soft);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
}

.if-pill:hover,
.if-pill:focus {
  background-color: #2d4a75;
  color: #fff;
}

.if-lang-select {
  background-color: var(--if-trust-soft);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 2rem 0.4rem 0.9rem;
  width: auto;
}

.if-lang-select:focus {
  background-color: var(--if-trust-soft);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(31, 184, 205, 0.35);
}

.if-lang-select option {
  color: #212529;
}

/* ── Upload dropzone ──────────────────────────────────────────────────── */

.dropzone-area {
  border: 2px dashed #ced4da;
  border-radius: 0.5rem;
  padding: 2.5rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.dropzone-area:hover {
  border-color: var(--if-action);
  background-color: #f0f6ff;
}

.dropzone-area.dragover {
  border-color: var(--if-action);
  background-color: var(--if-action-tint);
}

/* Full-screen analysis loading overlay */
.analyse-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
}

/* ── Verdict and suspicion zones ─────────────────────────────────────────
   The same three role colours carry the verdict everywhere it appears, so the
   library and the result page cannot drift apart. Deliberately not Bootstrap's
   danger/warning/success utilities: those also mean "error" and "caution"
   elsewhere in the UI, and this scale is about severity, not status.

   These live in base.css rather than analysis.css because the document library
   renders the same badges and only analysis.html loads analysis.css. */
.verdict-found {
  background-color: var(--if-review-tint);
  color: var(--if-review);
}

.verdict-uncertain {
  background-color: var(--if-caution-tint);
  color: var(--if-caution);
}

.verdict-not_found {
  background-color: var(--if-ok-tint);
  color: var(--if-ok);
}

.zone-found {
  color: var(--if-review);
}

.zone-uncertain {
  color: var(--if-caution);
}

.zone-not_found {
  color: var(--if-ok);
}

/* ── Utilities ────────────────────────────────────────────────────────── */

/* reusable instead of inline styles */
.scroll-box-sm {
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.9rem;
}

/* ── File previews ────────────────────────────────────────────────────────
   Both of these are applied from analyzer/js/upload.js as well as from the
   result page's templates. They live here rather than in analysis.css for the
   reason stated for verdict-* above -- a rule more than one page uses -- with
   a second reason of their own: a class assigned in JavaScript cannot declare
   which page will load its stylesheet, so the only safe home is the sheet
   every page loads. Both spent time defined in analysis.css, which the upload
   page does not load, so on that page they simply did nothing. */

.image-preview {
  max-height: 300px;
  display: block;
  margin: auto;
  cursor: pointer;
}

/* The browser's own PDF viewer, framed. Its height is the page's aspect ratio
   rather than a number, because both fixed alternatives are visibly wrong: a
   set height leaves the viewer's dark backdrop showing under a portrait page
   (that was 500px in a 190px-wide column), and no height at all collapses the
   iframe to its intrinsic 150px. A4 portrait is the shape of the documents
   this tool is pointed at; a landscape page still letterboxes.

   The ceiling is on the width on purpose. Clamping the height while the width
   stays 100% would break the ratio and bring the backdrop straight back. */
.pdf-preview-md {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  aspect-ratio: 1 / 1.414;
  margin-inline: auto;
  border-radius: 6px;
}