/* layout.css — Two-pane editor + live-preview shell */

/* ═══════════════════════════════════════════════════════
   Desktop split layout  (≥ 1024 px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  html, body { height: 100%; overflow: hidden; }

  /* Outer shell: fills the viewport minus the navbar */
  .oci-split-body {
    display: flex;
    height: calc(100vh - 58px);   /* 58 px = .oci-nav min-height */
    overflow: hidden;
  }

  /* ── Left pane: editor (independent scroll) ─────────── */
  .oci-editor-pane {
    width: 56%;
    min-width: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
  }

  /* Thin divider between panes */
  .oci-editor-pane {
    border-right: 1px solid rgba(15, 23, 42, .10);
  }
  [data-bs-theme="dark"] .oci-editor-pane {
    border-right-color: rgba(148, 163, 184, .12);
  }

  /* Collapse Bootstrap's container padding so editor fills naturally */
  .oci-editor-pane > .container,
  .oci-editor-pane .oci-main {
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Suppress the hero background-attachment:fixed that causes flicker */
  .oci-editor-pane .hero-shell {
    background-attachment: scroll !important;
  }

  /* ── Right pane: live preview (non-scrolling) ───────── */
  .oci-preview-pane {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #e8e8eb;
  }
  [data-bs-theme="dark"] .oci-preview-pane {
    background: #111827;
  }

  /* Top strip */
  .oci-preview-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(6px);
  }
  [data-bs-theme="dark"] .oci-preview-hdr {
    background: rgba(30, 41, 59, .65);
    border-bottom-color: rgba(148, 163, 184, .10);
  }

  /* Green "live" dot */
  .oci-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .22);
  }

  /* Scrollable preview body */
  .oci-preview-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 16px;
  }

  /* White "paper" document */
  .oci-preview-paper {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .14);
    overflow: hidden;
  }
  [data-bs-theme="dark"] .oci-preview-paper {
    box-shadow: 0 4px 28px rgba(0, 0, 0, .45);
  }

  /* iframe fills the paper */
  .oci-preview-paper #previewFrame {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto;
    border: none;
  }

  /* Bottom dock */
  .oci-preview-dock {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .70);
    backdrop-filter: blur(6px);
  }
  [data-bs-theme="dark"] .oci-preview-dock {
    background: rgba(30, 41, 59, .80);
    border-top-color: rgba(148, 163, 184, .10);
  }

  /* Total in dock uses tabular-nums */
  #grandTotalDock {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    color: var(--oci-primary);
  }
  [data-bs-theme="dark"] #grandTotalDock {
    color: var(--oci-dark-primary, #60a5fa);
  }

  /* Suppress the old inline preview column on desktop */
  .preview-col { display: none !important; }

  /* Remove the card max-width constraint inside the editor pane */
  .oci-editor-pane .card:not(.h-100) {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════
   Zoom control inside preview header
   ═══════════════════════════════════════════════════════ */
.oci-preview-hdr #posterZoomWrap {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.oci-preview-hdr #posterZoom {
  width: 90px;
  margin: 0;
}
.oci-preview-hdr .form-label {
  font-size: .75rem;
  margin-bottom: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   Navbar doc badge
   ═══════════════════════════════════════════════════════ */
.oci-doc-badge {
  font-size: .80rem;
  font-weight: 400;
  color: #64748b;
  letter-spacing: .15px;
}
.oci-doc-badge-type {
  font-weight: 600;
  color: #374151;
}
[data-bs-theme="dark"] .oci-doc-badge { color: #94a3b8; }
[data-bs-theme="dark"] .oci-doc-badge-type { color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════
   Mobile fallback (< 1024 px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .oci-split-body { display: block; }
  .oci-editor-pane { width: 100%; overflow: visible; }
  /* Preview pane hidden by default; shown when .mobile-open is toggled */
  .oci-preview-pane {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    flex-direction: column;
    background: #e8e8eb;
  }
  [data-bs-theme="dark"] .oci-preview-pane {
    background: #0f172a;
  }
  .oci-preview-pane.mobile-open { display: flex; }
  /* Keep .oci-preview-dock out of mobile flow — bottom of fullscreen pane */
  .oci-preview-dock { height: 60px; flex-shrink: 0; }

  /* Mobile preview header gets a close button slot */
  .oci-preview-hdr { height: 52px; padding: 0 14px; }

  /* #grandTotalDock hidden on mobile (shown in editor) */
  .oci-preview-dock #grandTotalDock { display: none; }
}

/* ═══════════════════════════════════════════════════════
   Mobile floating button — show running total
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  #mobilePreviewToggle .oci-mobile-total {
    font-variant-numeric: tabular-nums;
    font-size: .80rem;
    opacity: .85;
  }
}

/* ═══════════════════════════════════════════════════════
   Tabular nums for all amounts (both panes)
   ═══════════════════════════════════════════════════════ */
#grandTotal, #grandTotalDock, #subtotal, #taxTotal, #rutRotTotal {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .oci-preview-paper,
  .oci-preview-hdr,
  .oci-preview-dock { transition: none !important; }
}