/* ============================================================
   WEBUAR Angebotstool – UI + PDF Styles
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0c0c14;--bg2:#12121e;--bg3:#18182a;--bg4:#1e1e30;
  --border:#252538;--text:#f0f0f8;--text2:#9090b0;--text3:#505070;
  --accent:#6366f1;--grad:linear-gradient(135deg,#6366f1,#a855f7);
  --danger:#ef4444;--success:#22c55e;--shadow:0 4px 24px rgba(0,0,0,.5);
}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:14px}
body{background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── APP HEADER ── */
.hdr{background:var(--bg2);border-bottom:1px solid var(--border);padding:.6rem 1.4rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;position:sticky;top:0;z-index:100}
.hdr-brand{font-size:1rem;font-weight:900;letter-spacing:.05em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hdr-div{width:1px;height:20px;background:var(--border)}
.hdr-title{font-size:.9rem;font-weight:700}
.hdr-sub{font-size:.68rem;color:var(--text2)}
.hdr-space{flex:1}

/* ── LAYOUT ── */
.main{display:grid;grid-template-columns:400px 1fr;height:calc(100vh - 49px);overflow:hidden}
.panel-form{background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.panel-preview{overflow-y:auto;background:#1c1c28;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;gap:1rem}

/* ── FORM TOOLBAR ── */
.form-toolbar{padding:.65rem 1rem;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;gap:.4rem;flex-wrap:wrap;position:sticky;top:0;z-index:10}

/* ── FORM SECTIONS ── */
.form-section{border-bottom:1px solid var(--border);padding:.8rem 1rem}
.form-section:last-child{border-bottom:none}
.section-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-bottom:.6rem}
.section-title{font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
.section-toggle{color:var(--text3);font-size:.72rem;transition:transform .2s}
.section-toggle.open{transform:rotate(180deg)}
.section-body{display:flex;flex-direction:column;gap:.48rem}
.section-body.collapsed{display:none}

/* ── INPUTS ── */
.field{display:flex;flex-direction:column;gap:.26rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.48rem}
label{font-size:.68rem;color:var(--text2);font-weight:500}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);
  font-family:inherit;font-size:.79rem;padding:.4rem .58rem;width:100%;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical;min-height:66px}
.input-highlight{border-color:var(--accent)!important;box-shadow:0 0 0 2px rgba(99,102,241,.3)!important;transition:none!important}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.32rem;padding:.42rem .85rem;border-radius:7px;border:none;font-family:inherit;font-size:.77rem;font-weight:600;cursor:pointer;transition:all .15s}
.btn-primary{background:var(--grad);color:#fff}.btn-primary:hover{opacity:.88;transform:translateY(-1px)}
.btn-secondary{background:var(--bg4);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg3);border-color:var(--accent)}
.btn-danger{background:rgba(239,68,68,.12);color:var(--danger);border:1px solid rgba(239,68,68,.25)}.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-sm{padding:.3rem .65rem;font-size:.73rem}
.btn-xs{padding:.16rem .42rem;font-size:.68rem}
.btn-icon{padding:.28rem .45rem}
.btn-full{width:100%;justify-content:center}

/* ── TEMPLATES ── */
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.32rem}
.tpl-btn{background:var(--bg3);border:1px solid var(--border);border-radius:7px;color:var(--text);cursor:pointer;font-family:inherit;font-size:.68rem;font-weight:600;padding:.42rem .32rem;text-align:center;transition:all .15s}
.tpl-btn:hover{background:var(--bg4);border-color:var(--accent)}
.tpl-btn span{display:block;font-size:.95rem;margin-bottom:.1rem}

/* ── POSITIONEN ── */
.positionen-list{display:flex;flex-direction:column;gap:.6rem}
.position-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.65rem;transition:outline .2s}
.position-card-header{display:flex;align-items:center;gap:.42rem;margin-bottom:.48rem}
.position-nr{background:var(--grad);color:#fff;border-radius:5px;font-size:.63rem;font-weight:700;padding:.1rem .4rem;min-width:22px;text-align:center}
.pos-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .7fr;gap:.35rem;align-items:end;margin-top:.35rem}
.pos-result{background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.74rem;font-weight:600;padding:.4rem .58rem;text-align:right}

/* ── SUMME ── */
.summe-box{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.65rem .85rem;display:flex;flex-direction:column;gap:.36rem}
.summe-row{display:flex;justify-content:space-between;font-size:.79rem}
.summe-row.total{border-top:1px solid var(--border);padding-top:.36rem;margin-top:.1rem;font-size:.9rem;font-weight:700}
.summe-amount{font-weight:600;font-variant-numeric:tabular-nums}
.summe-row.total .summe-amount{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── PREVIEW TOOLBAR ── */
.preview-toolbar{display:flex;align-items:center;gap:.55rem;width:100%;max-width:800px}
.preview-label{font-size:.63rem;color:rgba(255,255,255,.3);font-weight:700;letter-spacing:.1em;text-transform:uppercase;flex:1}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PDF PAGE  –  Modern Design                             ║
   ╚══════════════════════════════════════════════════════════╝ */
#pdf-page{
  background:#fff;color:#111;width:794px;
  font-family:'Segoe UI','Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10pt;line-height:1.55;
  box-shadow:0 8px 48px rgba(0,0,0,.7);
  border-radius:3px;position:relative;
}
/* hover hints for click-to-edit */
#pdf-page [data-field]{cursor:pointer;border-radius:2px;transition:background .12s}
#pdf-page [data-field]:hover{background:rgba(99,102,241,.07)}
#pdf-page [data-pos-id]{cursor:pointer}
#pdf-page [data-pos-id]:hover td{background:rgba(99,102,241,.06)!important}

/* ── DARK HEADER ── */
.pdf-header{
  background:#0f0f0f;
  display:flex;align-items:center;
  padding:28px 36px 28px 36px;
  gap:0;
}
.pdf-header-logo{
  width:140px;flex-shrink:0;
}
.pdf-header-logo img{
  width:140px;height:auto;display:block;
}
.pdf-header-spacer{flex:1}
.pdf-header-right{
  text-align:right;color:#fff;
}
.pdf-angebot-label{
  font-size:7pt;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:2px;
}
.pdf-angebot-nr{
  font-size:18pt;font-weight:700;letter-spacing:.02em;
  color:#fff;line-height:1.1;margin-bottom:12px;
}
.pdf-header-meta{font-size:8.5pt;color:rgba(255,255,255,.7);line-height:1.8}
.pdf-header-meta span{color:rgba(255,255,255,.4);margin-right:4px}

/* ── SUBHEADER STRIP (return addr + customer) ── */
.pdf-sub{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:22px 36px 0;
}
.pdf-return-addr{
  font-size:7.5pt;color:#888;border-bottom:1px solid #ddd;padding-bottom:3px;
  display:inline-block;margin-bottom:12px;
}
.pdf-customer{font-size:10pt;line-height:1.65}
.pdf-customer .lbl{
  font-size:6.5pt;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#888;display:block;margin-bottom:4px;
}
.pdf-customer strong{font-size:10.5pt;font-weight:700;display:block}

/* ── BODY ── */
.pdf-body{padding:20px 36px 28px}

/* greeting + intro */
.pdf-greeting{font-size:10.5pt;margin-bottom:10px;margin-top:4px}
.pdf-intro{font-size:10pt;color:#222;line-height:1.6;margin-bottom:18px}

/* section titles – modern uppercase with line */
.pdf-sec-title{
  font-size:7pt;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#0f0f0f;
  border-bottom:1.5px solid #0f0f0f;padding-bottom:5px;margin:20px 0 10px;
  cursor:pointer;
}
.pdf-sec-title:hover{background:rgba(99,102,241,.06)}

.pdf-text{font-size:10pt;line-height:1.6;color:#222;margin-bottom:6px}

/* ── PRICE TABLE ── */
.pdf-table{width:100%;border-collapse:collapse;margin:16px 0 6px;font-size:9.5pt}
.pdf-table thead tr{background:#0f0f0f}
.pdf-table th{
  padding:8px 10px;text-align:left;color:#fff;
  font-size:7pt;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.pdf-table th.r,.pdf-table td.r{text-align:right}
.pdf-table td{padding:8px 10px;border-bottom:1px solid #ebebeb;color:#111;vertical-align:middle}
.pdf-table tbody tr:last-child td{border-bottom:none}
.pdf-table tbody tr:nth-child(even) td{background:#f8f8f8}

/* totals */
.pdf-totals-wrap{display:flex;justify-content:flex-end;margin:4px 0 20px}
.pdf-totals-table{border-collapse:collapse;font-size:9.5pt;min-width:260px}
.pdf-totals-table td{padding:5px 12px;border-top:1px solid #ebebeb}
.pdf-totals-table .lbl{color:#555}
.pdf-totals-table .amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.pdf-totals-table .tot-row{background:#0f0f0f}
.pdf-totals-table .tot-row td{color:#fff;font-weight:700;font-size:10.5pt;border-top:none;padding:7px 12px}

/* bullets */
.pdf-bullets{padding-left:18px;margin:6px 0 8px}
.pdf-bullets li{font-size:10pt;line-height:1.7;color:#222}

/* closing */
.pdf-closing{margin-top:24px;font-size:10pt;color:#222}
.pdf-closing p{margin-bottom:5px}
.pdf-sig{margin-top:20px}
.pdf-sig-name{font-weight:700;font-size:10.5pt;margin-top:4px}

/* ── DARK FOOTER ── */
.pdf-footer{
  background:#0f0f0f;margin-top:32px;
  padding:16px 36px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
  font-size:7.5pt;color:rgba(255,255,255,.55);line-height:1.7;
}
.pdf-footer strong{color:rgba(255,255,255,.85);display:block;font-size:7.8pt;margin-bottom:2px}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:200;display:flex;align-items:center;justify-content:center}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.3rem;max-width:440px;width:90%;box-shadow:var(--shadow)}
.modal h3{margin-bottom:.6rem;font-size:.92rem}
.modal p{font-size:.8rem;color:var(--text2);margin-bottom:.85rem}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end}
.hidden{display:none!important}

/* ── TOAST ── */
.toast-container{position:fixed;bottom:1.3rem;right:1.3rem;z-index:9999;display:flex;flex-direction:column;gap:.42rem}
.toast{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.55rem .9rem;font-size:.78rem;box-shadow:var(--shadow);animation:slideIn .2s ease;display:flex;align-items:center;gap:.42rem}
.toast.success{border-color:rgba(34,197,94,.4)}.toast.error{border-color:rgba(239,68,68,.4)}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

@media(max-width:1060px){.main{grid-template-columns:360px 1fr}}
@media(max-width:800px){.main{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;overflow:visible}.panel-form{max-height:55vh}#pdf-page{width:100%;max-width:794px}.panel-preview{padding:1rem .4rem}}

/* ── PRINT / PDF ── */
@media print {
  @page { size: A4 portrait; margin: 0; }

  /* Force color — critical for dark header/footer backgrounds */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

  /* Hide app chrome */
  .hdr, .panel-form, .preview-toolbar, .toast-container, .modal-overlay { display: none !important; }

  html, body { height: auto !important; overflow: visible !important; background: white !important; }
  .main { display: block !important; height: auto !important; overflow: visible !important; }
  .panel-preview { display: block !important; overflow: visible !important; padding: 0 !important; background: white !important; height: auto !important; }

  #pdf-page { width: 210mm !important; max-width: 210mm !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; }

  /* ── Repeat header on every page ── */
  .pdf-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* ── Repeat footer on every page ── */
  .pdf-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0 !important;
  }

  /* Push body content below fixed header and above fixed footer */
  .pdf-body {
    padding-top: 158px !important;   /* header: ~90px logo + 28+28px padding + buffer */
    padding-bottom: 115px !important; /* footer: ~75px content + 32px padding + buffer */
  }

  /* ── Clean page breaks ── */
  .pdf-sec-title { break-after: avoid; page-break-after: avoid; }
  .pdf-table { break-inside: auto; page-break-inside: auto; }
  .pdf-table thead { display: table-header-group; }
  .pdf-table tr { break-inside: avoid; page-break-inside: avoid; }
  .pdf-totals-wrap { break-inside: avoid; page-break-inside: avoid; }
  .pdf-bullets { break-inside: auto; }
  .pdf-bullets li { break-inside: avoid; page-break-inside: avoid; }
  .pdf-closing { break-inside: avoid; page-break-inside: avoid; }
  p { orphans: 3; widows: 3; }
}