/* ══════════════════════════════════════════════════════════════════════
   OWLMARK — PRINT INTEGRITY  (authoritative layer)
   By Mourad Mekki

   The page carries sixteen separate @media print blocks, accumulated over
   many patches, that partially contradict one another. Rather than delete
   sixteen blocks I cannot visually verify — which is exactly how a working
   print pipeline gets broken — this stylesheet loads LAST and states the
   rules that must hold, so it wins every conflict.

   The legacy blocks remain in index.html. They are now overridden, not
   trusted. Deleting them is a job for the refactor stage, once there is a
   browser to check the result in.
   ══════════════════════════════════════════════════════════════════════ */

/* ── PAGE ──────────────────────────────────────────────────────────────
   A4 landscape, no browser margins, one certificate per sheet. */
@page {
  size: A4 landscape;
  margin: 0;
}

@media print {

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── NOTHING FROM THE EDITOR REACHES PAPER ─────────────────────────
     One list, stated once. Empty placeholders, handles, guides, frames,
     dialogs, toasts, toolbars, tooltips, overlays. */
  .editor-only,
  .print-hidden,
  .is-empty,
  .img-ph, .flag-ph, .trophy-ph,
  .th, .cs-frame,
  .om-dlg-scrim, .om-preview-bar,
  #omArtLayer, .om-art-zone, .om-paper-edge,
  #omLayoutDlg, #omPosDlg, #omBatchDlg,
  #omResetLayoutBtn, #omPosBtn,
  .toast, .tooltip, .align-guide, .guide-line,
  .main-toolbar, .sidebar, .topbar, .stage-tabs,
  #progWrap {
    display: none !important;
  }

  /* Selection and warning states are editor affordances, not ink. */
  .sel, .om-in-restricted {
    outline: none !important;
    box-shadow: none !important;
  }
  .text-sticker.om-in-restricted::before,
  .text-sticker.om-in-restricted::after { display: none !important; }

  /* A field a layout profile suppressed stays suppressed on paper. */
  .om-field-hidden { display: none !important; }

  /* Text stays text — never rasterised, so it prints at printer
     resolution rather than screen resolution. */
  .ce-field, .text-sticker { -webkit-font-smoothing: auto; }

  /* ── SINGLE CERTIFICATE ────────────────────────────────────────────
     Exactly one sheet, exactly one page, and no trailing blank page. */
  body:not(.om-batch-printing) .sheet {
    width: 297mm !important;
    height: 210mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    break-after: avoid !important;
    break-inside: avoid !important;
  }

  /* ── BATCH ─────────────────────────────────────────────────────────
     The live editor is hidden and the cloned pages print instead. The
     editor itself is never mutated, so there is nothing to restore. */
  body.om-batch-printing > *:not(#omBatchRoot) {
    display: none !important;
  }

  body.om-batch-printing #omBatchRoot {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .om-batch-page {
    display: block !important;
    position: relative !important;
    width: 297mm !important;
    height: 210mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: always !important;
    break-after: page !important;
  }

  /* The LAST page must not force a page break, or every batch ends with
     a blank sheet. Thirty recipients = thirty pages, not thirty-one. */
  .om-batch-page.om-batch-last {
    page-break-after: auto !important;
    break-after: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SCREEN — batch container is hidden until it is needed
   ══════════════════════════════════════════════════════════════════════ */
#omBatchRoot { display: none; }

/* On-screen batch preview: the very pages that will be printed. */
body.om-batch-preview #omBatchRoot.om-preview-mode {
  display: block;
  padding: 78px 20px 40px;
  background: var(--ok-bg, #f4f2fb);
}
body.om-batch-preview #omBatchRoot .om-batch-page {
  margin: 0 auto 22px;
  box-shadow: 0 10px 30px rgba(43, 39, 64, .18);
  border-radius: 3px;
  overflow: hidden;
}

.om-preview-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9700;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  background: var(--ok-panel, #fff);
  border-bottom: 1px solid var(--ok-line, #e6e3f2);
  box-shadow: 0 4px 18px rgba(43, 39, 64, .10);
}
.om-preview-count {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 13px; letter-spacing: .6px;
  color: var(--ok-ink, #2b2740);
}

/* ══════════════════════════════════════════════════════════════════════
   BATCH DIALOG
   ══════════════════════════════════════════════════════════════════════ */
.om-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin: 0 0 14px;
  background: var(--ok-line, #e6e3f2);
  border: 1px solid var(--ok-line, #e6e3f2);
  border-radius: 9px; overflow: hidden;
}
.om-fact { background: var(--ok-panel, #fff); padding: 9px 12px; }
.om-fact dt {
  font: 600 9.5px/1 'Cinzel', serif;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ok-ink-faint, #a09aba);
  margin: 0 0 4px;
}
.om-fact dd {
  margin: 0;
  font-size: 13px; font-weight: 600;
  color: var(--ok-ink, #2b2740);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.om-recip { margin: 0 0 14px; }
.om-recip h3 {
  margin: 0 0 6px;
  font: 600 9.5px/1 'Cinzel', serif;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ok-ink-faint, #a09aba);
}
.om-recip ul { list-style: none; margin: 0; padding: 0; }
.om-recip li {
  padding: 5px 10px;
  font-size: 13px;
  color: var(--ok-ink, #2b2740);
  border-bottom: 1px solid var(--ok-line, #e6e3f2);
}
.om-recip li:last-child { border-bottom: 0; }
.om-recip .om-more { color: var(--ok-ink-faint, #a09aba); font-style: italic; }

.om-notes { list-style: none; margin: 0 0 16px; padding: 0; }
.om-note {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 11px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid var(--ok-line, #e6e3f2);
  background: var(--ok-soft, #f6f4fd);
  border-left-width: 3px;
}
.om-note strong { font-size: 12.5px; color: var(--ok-ink, #2b2740); }
.om-note span   { font-size: 12px; color: var(--ok-ink-soft, #6f6a85); line-height: 1.5; }
.om-note-warn { border-left-color: #e0a12f; }
.om-note-note { border-left-color: #9a94b8; }
.om-note-ok   { border-left-color: #4a9d6e; }

.om-ready {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 16px; padding: 12px;
  border-radius: 9px;
  background: linear-gradient(160deg, #f2fbf5, #e6f6ec);
  border: 1px solid #bfe3cd;
  color: #2f6b49;
  font: 600 13px/1 'Cinzel', serif;
  letter-spacing: .6px;
}
.om-ready span {
  width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center;
  background: #4a9d6e; color: #fff; font-size: 11px;
}

.om-dlg-foot {
  margin: 12px 0 0;
  font-size: 11.5px; line-height: 1.5;
  text-align: center;
  color: var(--ok-ink-faint, #a09aba);
}

@media (prefers-reduced-motion: reduce) {
  .om-preview-bar, .om-batch-page { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   PREFLIGHT PANEL
   ══════════════════════════════════════════════════════════════════════ */
.om-pf { max-height: 84vh; display: flex; flex-direction: column; }
.om-pf .om-pf-list { overflow-y: auto; }

.om-pf-summary {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 0 0 14px;
}
.om-pill {
  font: 600 10.5px/1 'Cinzel', serif;
  letter-spacing: .5px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--ok-line, #e6e3f2);
  background: var(--ok-soft, #f6f4fd);
  color: var(--ok-ink-soft, #6f6a85);
}
.om-pill-req  { background: #fdeeee; border-color: #f0c4c4; color: #9b3535; }
.om-pill-warn { background: #fdf5e6; border-color: #edd6a4; color: #8a6414; }
.om-pill-adv  { background: var(--ok-soft, #f6f4fd); }

.om-pf-list { list-style: none; margin: 0 0 4px; padding: 0; }

.om-pf-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  margin-bottom: 6px;
  border-radius: 9px;
  border: 1px solid var(--ok-line, #e6e3f2);
  border-left-width: 3px;
  background: var(--ok-panel, #fff);
}
.om-pf-req  { border-left-color: #c0504d; background: #fdf7f7; }
.om-pf-warn { border-left-color: #e0a12f; }
.om-pf-adv  { border-left-color: #9a94b8; }
.om-pf-ok   { border-left-color: #4a9d6e; }

.om-pf-badge {
  flex: none;
  font: 600 9px/1 'Cinzel', serif;
  letter-spacing: .8px; text-transform: uppercase;
  padding: 5px 7px; border-radius: 5px;
  background: var(--ok-soft, #f6f4fd);
  border: 1px solid var(--ok-line, #e6e3f2);
  color: var(--ok-ink-soft, #6f6a85);
  white-space: nowrap;
}
.om-pf-req  .om-pf-badge { background: #fdeeee; border-color: #f0c4c4; color: #9b3535; }
.om-pf-warn .om-pf-badge { background: #fdf5e6; border-color: #edd6a4; color: #8a6414; }
.om-pf-ok   .om-pf-badge { background: #eef8f2; border-color: #bfe3cd; color: #2f6b49; }

.om-pf-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.om-pf-txt strong { font-size: 13px; color: var(--ok-ink, #2b2740); line-height: 1.4; }
.om-pf-txt span   { font-size: 12.2px; color: var(--ok-ink-soft, #6f6a85); line-height: 1.55; }

.om-pf-fix {
  flex: none; align-self: center;
  font: 600 10.5px/1 'Cinzel', serif;
  letter-spacing: .5px;
  min-height: 34px; padding: 0 11px;
  border-radius: 7px; cursor: pointer;
  background: linear-gradient(160deg, var(--gel-gold-a, #fff3d2), var(--gel-gold-b, #ffd98a));
  border: 1px solid var(--gel-gold-rim, #d9a532);
  color: var(--gel-gold-ink, #5c4413);
  transition: transform .12s ease;
}
.om-pf-fix:hover { transform: translateY(-1px); }
.om-pf-fix:focus-visible { outline: 2px solid var(--gel-gold-rim, #d9a532); outline-offset: 2px; }

/* "Go to field" highlight */
.om-flash {
  animation: omFlash 1.6s ease-out;
  border-radius: 5px;
}
@keyframes omFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 165, 50, 0); }
  15%, 60% { box-shadow: 0 0 0 3px rgba(217, 165, 50, .55); }
}

@media print {
  #omPfDlg, #omPfBtn { display: none !important; }
  .om-flash { animation: none !important; box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .om-flash { animation: none; outline: 2px solid var(--gel-gold-rim, #d9a532); }
  .om-pf-fix { transition: none; }
  .om-pf-fix:hover { transform: none; }
}