/* XPaperFlow — extra styling on top of Bootstrap 5 */
:root {
  --xpf-primary: #0d6efd;
  --xpf-muted: #6c757d;
}
body {
  background: #f5f6fa;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
.brand {
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
}
.auth-card {
  max-width: 540px;
  margin: 4rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.05);
}
.auth-card img.auth-logo {
  display: block;
  max-height: 96px;
  max-width: 280px;
  margin: 0 auto 0.75rem auto;
  object-fit: contain;
}
.dashboard-stat {
  border-left: 4px solid var(--xpf-primary);
  background: #fff;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.dashboard-stat .num {
  font-size: 1.75rem;
  font-weight: 600;
}
.dashboard-stat .lbl {
  color: var(--xpf-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
}
.status-Draft { background: #6c757d; }
.status-WaitingCopyrightForm { background: #fd7e14; }
.status-Submitted { background: #0dcaf0; color: #000; }
.status-EditorReview { background: #20c997; }
.status-UnderReview { background: #6f42c1; }
.status-RevisionNeeded { background: #ffc107; color: #000; }
.status-Revised { background: #198754; }
.status-DecisionPending { background: #d63384; }
.status-Rejected { background: #dc3545; }
.status-Approved { background: #198754; }
.status-VerifyFee { background: #ffc107; color: #000; }
.status-Withdrawn { background: #495057; }
/* Payment-row statuses used in the editor's Payment tab and the
   submission view's Payments card. These come from dbo.Payments.Status
   (Pending / Verified / Rejected), not Submissions.Status — they share
   the same .status-pill markup so they need their own colour classes. */
.status-Pending  { background: #ffc107; color: #000; }
.status-Verified { background: #198754; }
.status-Editing { background: #0d6efd; }
.status-ProofReading { background: #6610f2; }
.status-InPress { background: #fd7e14; }
.status-Published { background: #198754; }
/* Reviewer-assignment statuses surfaced in the editor's Current
   Assignments list and the reviewer dashboard queue. These come from
   dbo.SubmissionReviewers.Status (Pending / Accepted / Declined /
   Submitted) and were previously undefined — the .status-pill
   rendered with no background and was therefore invisible. Pending and
   Submitted are already defined above (Pending is shared with the
   payment statuses; Submitted is shared with the submission-status
   block). Accepted and Declined were missing. */
.status-Accepted  { background: #198754; }   /* green  — same as Approved for visual consistency */
.status-Declined  { background: #dc3545; }   /* red    — same as Rejected for visual consistency */

.chat-thread {
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
}
.chat-msg {
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: #f0f4ff;
  max-width: 75%;
}
.chat-msg.me {
  background: #d1e7dd;
  margin-left: auto;
}
.chat-msg.system {
  background: #fff3cd;
  font-style: italic;
}
.chat-msg .meta {
  font-size: 0.75rem;
  color: var(--xpf-muted);
}

/* N1 + N2 (2026-07-21): visibility badges for the discussion panel.
   Match the existing status-pill colour scheme so the UI stays
   consistent. AuthorEditors uses info (blue), ReviewerEditors uses
   warning (yellow), All uses success (green), Editors uses dark
   secondary (internal private channel). The pill is rendered
   inside .meta so the small font doesn't bloat the row. */
.vis-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  color: #fff;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.vis-badge.vis-Editors         { background: #495057; }   /* dark grey */
.vis-badge.vis-AuthorEditors   { background: #0d6efd; }   /* blue   */
.vis-badge.vis-ReviewerEditors { background: #ffc107; color: #1a1a1a; } /* yellow */
.vis-badge.vis-All             { background: #198754; }   /* green  */
.checklist-item {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: #fff;
}
.checklist-item .q {
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.checklist-item.failed {
  border-color: #dc3545;
  background: #f8d7da;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15) inset;
}
.checklist-item.failed .q::after {
  content: " — please answer to continue";
  color: #b02a37;
  font-weight: 400;
  font-style: italic;
}
.role-pill {
  font-size: 0.7rem;
  background: var(--xpf-muted);
  color: #fff;
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  margin-right: 0.25rem;
}
.role-pill.role-SuperAdmin { background: #d63384; }
.role-pill.role-Admin { background: #0d6efd; }
.role-pill.role-Editor { background: #198754; }
.role-pill.role-AssociateEditor { background: #20c997; }
.role-pill.role-Author { background: #6f42c1; }
.role-pill.role-Reviewer { background: #fd7e14; }
.role-pill.role-Publisher { background: #6610f2; }
.docx-viewer {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background: #fff;
  height: 70vh;
  overflow: auto;
  padding: 1rem;
}
.docx-viewer img { max-width: 100%; }
.file-thumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.4rem;
  margin-bottom: 0.4rem;
}
.table-clean {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}
.table-clean thead th {
  background: #f0f2f5;
  border: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--xpf-muted);
  letter-spacing: 0.03em;
}
.wizard-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 1rem;
}
.wizard-step {
  flex: 1;
  text-align: center;
  color: var(--xpf-muted);
  font-size: 0.85rem;
}
.wizard-step.active {
  color: var(--xpf-primary);
  font-weight: 600;
}
.wizard-step .num {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #dee2e6;
  color: #fff;
  text-align: center;
  line-height: 1.75rem;
  margin-right: 0.3rem;
}
.wizard-step.active .num { background: var(--xpf-primary); }
.wizard-step.done .num { background: #198754; }

/* --- searchable country picker -------------------------------------- */
.cp-host { position: relative; }
.cp-trigger {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #dee2e6;
  color: #212529;
}
.cp-trigger:focus { box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); border-color: #86b7fe; }
.cp-clear { color: #6c757d; font-size: 1.1rem; line-height: 1; padding: 0 0.25rem; cursor: pointer; }
.cp-clear:hover { color: #dc3545; }
.cp-popover {
  position: absolute;
  z-index: 1050;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.15rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.4rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  padding: 0.4rem;
  max-height: 18rem;
  display: flex;
  flex-direction: column;
}
.cp-search { margin-bottom: 0.3rem; }
.cp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 14rem;
  outline: none;
}
.cp-item {
  padding: 0.35rem 0.6rem;
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.3;
}
.cp-item:hover { background: #f8f9fa; }
.cp-item.cp-focus { background: #e7f1ff; }
.cp-item.cp-active { font-weight: 600; }
.cp-item.cp-active::before { content: '\2713\00a0'; color: #198754; }
.cp-item mark { background: #fff3cd; padding: 0; }
.cp-empty { padding-top: 0.3rem; }

/* Reviewer-directory autocomplete (step 6 of the submission wizard).
   Lighter than the country-picker dropdown because the rows are richer
   (two lines, optional fields). z-index above modals (1050) so the
   dropdown stays visible if the page later opens one. */
.dropdown-panel {
  position: absolute;
  z-index: 1080;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.15rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.4rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.dropdown-row {
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f5;
  line-height: 1.25;
}
.dropdown-row:last-child { border-bottom: 0; }
.dropdown-row:hover { background: #f8f9fa; }

/* ====================================================================
   N5 (2026-07-21) — AI Reference Formatter
   ==================================================================== */

/* Reference cards in the formatted output. Each card shows the
   citation text in a serif font (the same way a journal article
   would) with a small status row above for the DOI verification
   badge and AI confidence score. The font size matches typical
   journal reference-list sizing (slightly smaller than body). */
#refs-out .border {
  /* cards inside the output column */
  font-family: Georgia, "Times New Roman", serif;
}
#refs-out em {
  /* Markdown-style italics for journal/book names (APA / IEEE /
     Chicago / ACS / MLA). Stripped for PVJ style which doesn't
     italicize the journal name per the journal's house style. */
  font-style: italic;
}

/* Status badges inside the reference cards. These are the same
   Bootstrap bg-* classes used elsewhere; the rules here just
   tighten the spacing and add the title attribute hint. */
#refs-out .badge {
  font-size: 0.7rem;
  vertical-align: middle;
}

/* The "raw input" preview at the bottom of each card is shown in
   a monospaced font with muted color so the editor can see what
   the AI was given. Truncated to ~200 chars in the JS; this CSS
   just controls the visual. */
#refs-out .text-muted.small i {
  font-style: normal;
  color: #6c757d;
}