/* ── PAGE HEADER ── */
.page-header{
  padding:2.5rem 0 1.5rem;
  background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--paper-3);
}
.page-header-inner{max-width:var(--max);margin:0 auto;padding:0 2.5rem;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.page-header-eyebrow{display:flex;align-items:center;gap:0.8rem;margin-bottom:0.75rem}
.page-header-eyebrow-line{width:28px;height:2px;background:var(--blue);border-radius:2px}
.eyebrow-label{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--blue)}
.page-header h1{font-family:var(--serif);font-weight:700;font-size:2.2rem;line-height:1.18;color:var(--heading);letter-spacing:-0.01em}
.page-header h1 em{color:var(--blue);font-style:italic}
.page-header-sub{font-size:0.95rem;color:var(--ink-2);max-width:520px;line-height:1.7;margin-top:0.6rem}
.page-header-meta{display:flex;gap:1.5rem;flex-wrap:wrap}
.meta-badge{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:var(--ink-2)}
.meta-badge svg{width:16px;height:16px;color:var(--forest)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;font-family:var(--sans);font-weight:500;font-size:0.82rem;border:1px solid transparent;border-radius:var(--r);cursor:pointer;transition:all 0.15s;padding:0.55rem 1.1rem;line-height:1.4;white-space:nowrap}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn:disabled{opacity:0.45;cursor:not-allowed}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover:not(:disabled){background:var(--blue-2)}
.btn-lg{font-size:0.88rem;padding:0.7rem 1.5rem}
.btn-outline{border:1px solid var(--paper-3);background:var(--paper);color:var(--ink-2)}
.btn-outline:hover:not(:disabled){border-color:var(--ink-4);color:var(--ink)}
.btn-ghost{background:transparent;border:1px solid transparent;color:var(--ink-3);font-size:0.78rem}
.btn-ghost:hover{color:var(--blue)}
.btn-blue{background:var(--blue);color:#fff;border:none}
.btn-blue:hover{background:var(--blue-2)}
.btn-arrow::after{content:'\2192';margin-left:0.3rem}
.btn-white{background:#fff;color:var(--heading);border:none}
.btn-white:hover{background:var(--paper-2)}
.btn-outline-white{border:1px solid rgba(255,255,255,0.3);color:#fff;background:transparent}
.btn-outline-white:hover{background:rgba(255,255,255,0.08)}

/* ── WORKSPACE ── */
.workspace{padding:0 0 0.5rem;border-bottom:1px solid var(--paper-3);background:var(--paper)}
.workspace-inner{max-width:var(--max);margin:0 auto;padding:0 2.5rem}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.8rem 0;flex-wrap:wrap}
.toolbar-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.toolbar-right{display:flex;align-items:center;gap:0.75rem}
.toolbar-tagline{font-size:0.78rem;color:var(--ink-3);font-style:italic}

/* SPLIT PANE */
.split-pane{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:0.25rem;min-height:650px}
.pane{display:flex;flex-direction:column;border:1px solid var(--paper-3);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.pane-header{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 1rem;background:var(--paper-2);border-bottom:1px solid var(--paper-3);flex-shrink:0}
.pane-title{font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3)}

/* FORM PANE */
.form-pane-body{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  background:var(--paper);
  overflow-y:auto;
  flex:1;
}

/* Form sections */
.inv-section{
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--paper-3);
}
.inv-section:last-child{border-bottom:none}
.inv-section-title{
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:0.9rem;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  width:100%;
  background:none;
  border:none;
  padding:0;
  font-family:var(--sans);
  transition:color 0.15s;
}
.inv-section-title:hover{color:var(--ink-2)}
.inv-section-title svg{width:14px;height:14px;color:var(--ink-4)}
.inv-section-title .chevron{
  margin-left:auto;
  width:16px;height:16px;
  color:var(--ink-4);
  transition:transform 0.2s;
  flex-shrink:0;
}
.inv-section.collapsed .inv-section-title{margin-bottom:0}
.inv-section.collapsed .inv-section-title .chevron{transform:rotate(-90deg)}
.inv-section-body{
  overflow:hidden;
  transition:max-height 0.25s ease, opacity 0.2s ease;
  max-height:800px;
  opacity:1;
}
.inv-section.collapsed .inv-section-body{
  max-height:0;
  opacity:0;
  pointer-events:none;
}

/* Form grid */
.inv-grid{
  display:grid;
  gap:0.75rem;
}
.inv-grid-2{grid-template-columns:1fr 1fr}
.inv-grid-3{grid-template-columns:1fr 1fr 1fr}
.inv-grid-4{grid-template-columns:2fr 1fr 1fr 1fr}

/* Form field */
.inv-field{display:flex;flex-direction:column;gap:0.3rem}
.inv-label{
  font-size:0.75rem;
  font-weight:500;
  color:var(--ink-2);
}
.inv-input{
  font-family:var(--sans);
  font-size:0.85rem;
  padding:8px 10px;
  border:1px solid var(--paper-3);
  border-radius:var(--r);
  background:var(--paper);
  color:var(--ink);
  width:100%;
  outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.inv-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,74,199,0.08);
}
.inv-input::placeholder{color:var(--ink-4)}
select.inv-input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8fa8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:28px;
  cursor:pointer;
}
textarea.inv-input{resize:vertical;min-height:48px;line-height:1.5}

/* Line items */
.inv-line-items{display:flex;flex-direction:column;gap:0.6rem}
.inv-line-row{
  display:grid;
  grid-template-columns:2fr 70px 100px 100px 32px;
  gap:0.5rem;
  align-items:end;
}
.inv-line-row .inv-input{font-size:0.82rem;padding:7px 8px}
.inv-line-total-val{
  font-size:0.82rem;
  font-weight:500;
  color:var(--ink);
  padding:7px 8px;
  background:var(--paper-2);
  border:1px solid var(--paper-3);
  border-radius:var(--r);
  text-align:right;
  white-space:nowrap;
}
.inv-line-remove{
  width:28px;height:28px;
  border:none;background:none;
  color:var(--ink-4);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);
  transition:all 0.15s;
  margin-bottom:2px;
}
.inv-line-remove:hover{color:var(--rose);background:var(--rose-pale)}
.inv-line-header{
  display:grid;
  grid-template-columns:2fr 70px 100px 100px 32px;
  gap:0.5rem;
  padding:0 0 0.35rem;
}
.inv-line-header span{
  font-size:0.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-3);
}

.inv-add-line{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:500;
  color:var(--blue);
  background:none;
  border:1px dashed var(--paper-3);
  border-radius:var(--r);
  padding:7px 14px;
  cursor:pointer;
  transition:all 0.15s;
  margin-top:0.35rem;
}
.inv-add-line:hover{background:var(--blue-pale);border-color:var(--blue)}
.inv-add-line svg{width:14px;height:14px}

/* Totals section */
.inv-totals{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  align-items:flex-end;
  padding-top:0.75rem;
  border-top:1px solid var(--paper-3);
  margin-top:0.75rem;
}
.inv-total-row{
  display:flex;
  justify-content:space-between;
  width:260px;
  font-size:0.85rem;
  color:var(--ink-2);
}
.inv-total-row.grand{
  font-weight:600;
  font-size:0.95rem;
  color:var(--heading);
  padding-top:0.4rem;
  border-top:2px solid var(--heading);
  margin-top:0.25rem;
}
.inv-total-label{font-weight:500}
.inv-total-value{font-variant-numeric:tabular-nums;text-align:right}

/* PREVIEW PANE */
.preview-inner{
  width:100%;
  height:100%;
  min-height:650px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:stretch;
  padding:0;
  background:var(--paper-2);
  position:relative;
  overflow:hidden;
}
#viewer-container{
  width:100%;
  height:100%;
  flex:1;
  min-height:650px;
  background:var(--paper);
  display:none;
}
#viewer-container.active{display:block}
.preview-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  color:var(--ink-3);
  padding:2rem;
  background:var(--paper-2);
  z-index:2;
}
.preview-placeholder.hidden{display:none}
.preview-placeholder svg{width:48px;height:48px;opacity:0.4}
.preview-placeholder p{font-size:0.88rem;text-align:center;line-height:1.6;max-width:240px}
.preview-placeholder p strong{font-weight:600;color:var(--ink-2)}

/* Hint text in preview footer */
.preview-foot-hint{font-size:0.72rem;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.preview-foot-hint.warn{color:var(--amber)}
.preview-foot-hint.warn svg{width:14px;height:14px;flex-shrink:0}
.preview-footer{display:flex;align-items:center;justify-content:space-between;padding:0.55rem 1rem;background:var(--paper-2);border-top:1px solid var(--paper-3);flex-shrink:0}

/* Preview status (dot + text in pane header) */
.preview-status{display:flex;align-items:center;gap:6px;font-size:0.72rem;color:var(--ink-3)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex-shrink:0}
.dot.loading{background:var(--amber);animation:pulse 1s ease-in-out infinite}
.dot.ready{background:var(--forest)}
.dot.stale{background:var(--amber)}
.dot.error{background:var(--rose)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* LOADING OVERLAY */
.preview-loading{
  position:absolute;inset:0;
  background:rgba(244,246,253,0.85);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  z-index:10;opacity:0;pointer-events:none;transition:opacity 0.2s;
}
.preview-loading.active{opacity:1;pointer-events:auto}
.spinner{width:36px;height:36px;border:3px solid var(--paper-3);border-top-color:var(--blue);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-text{font-size:0.82rem;color:var(--ink-2)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-menu-btn{display:block}
  .inner,.nav-inner,.breadcrumb-inner,.workspace-inner,.page-header-inner{padding:0 1.5rem}
  .split-pane{grid-template-columns:1fr;min-height:auto}
  .preview-inner{min-height:400px}
  #viewer-container{min-height:400px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .info-strip-grid{grid-template-columns:1fr}
  .workspace-foot{display:flex}
  .inv-line-row{grid-template-columns:1fr 60px 80px 80px 28px}
  .inv-line-header{grid-template-columns:1fr 60px 80px 80px 28px}
  .inv-grid-2,.inv-grid-3{grid-template-columns:1fr}
  .inv-grid-4{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar-left,.toolbar-right{justify-content:flex-start}
  .inv-line-row{grid-template-columns:1fr;gap:0.35rem}
  .inv-line-header{display:none}
  .inv-total-row{width:100%}
}