:root{
      --brand-black:#111111;
      --brand-green:#2f9e44;
      --brand-green-2:#1f7a33;
      --brand-green-soft:#e6f4ea;

      --muted:#6b7280;
      --line:#e5e7eb;
      --paper:#ffffff;
      --bg:#f3f4f6;
      --radius:14px;

      --shadow: 0 12px 30px rgba(0,0,0,.06);
      --focus: 0 0 0 4px rgba(47,158,68,.18);
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--brand-black);
      background:var(--bg);
    }
/* KORTING
   - In de app: kortingskolom altijd zichtbaar
   - In de app: totaalregel "Korting" verbergen als er geen korting is
   - In print/PDF: verberg kolom + totaalregel als er geen korting is
*/
.discount-col{ display: table-cell; }
body.no-discount .discount-row{ display: none; }

@media print{
  body.no-discount .discount-col,
  body.no-discount col.col-discount,
  body.no-discount .discount-row{
    display: none !important;
  }
}

/* App bar */
    .appbar{
      max-width: 1120px;
      margin: 18px auto 0;
      padding: 0 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .appbar .left{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
    .appbar h1{ font-size:18px; margin:0; letter-spacing:.2px; }
    .appbar .hint{ font-size:12px; color:var(--muted); }
    .appbar .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

    button,select,input,textarea{ font:inherit; }
    a{ color: inherit; text-decoration: underline; }
    button{
      border:1px solid var(--line);
      background:white;
      border-radius: 10px;
      padding: 10px 12px;
      cursor:pointer;
      transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    }
    button:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.06); }
    button:active{ transform: translateY(1px); }
    button:focus{ outline:none; box-shadow: var(--focus); border-color: rgba(47,158,68,.45); }

    button.primary{
      background: var(--brand-green);
      border-color: var(--brand-green);
      color: white;
      font-weight: 800;
    }
    button.primary:hover{ background: var(--brand-green-2); border-color: var(--brand-green-2); }
    button.small{ padding: 8px 10px; border-radius: 9px; font-size: 13px; }
    button.danger{ border-color:#fecaca; background:#fff1f2; }
    button.ghost{ background: transparent; }
    button.disabled, button:disabled{
      opacity: .55;
      cursor:not-allowed;
      box-shadow:none !important;
      transform:none !important;
    }

    select{
      border:1px solid var(--line);
      background:white;
      border-radius: 10px;
      padding: 10px 12px;
      min-width: 270px;
      transition: box-shadow .15s ease, border-color .15s ease;
    }
    select:focus{ outline:none; box-shadow: var(--focus); border-color: rgba(47,158,68,.45); }

    .seg{
      display:flex;
      border:1px solid var(--line);
      background:white;
      border-radius: 999px;
      overflow:hidden;
    }
    .seg button{
      border:0;
      background:transparent;
      padding: 8px 12px;
      border-radius:0;
      cursor:pointer;
      font-size: 13px;
      color: var(--muted);
      box-shadow:none;
    }
    .seg button:hover{ background:#f9fafb; }
    .seg button.active{
      background: var(--brand-green-soft);
      color: var(--brand-black);
      font-weight: 800;
    }

    /* Layout */
    .wrap{
      max-width: 1120px;
      margin: 12px auto 40px;
      padding: 0 16px;
    }

    /* Paper */
    .paper{
      background:var(--paper);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .pad{ padding: 34px 46px; }

    /* Template header */
    .header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:16px;
    }
    .docTitle{
      font-size: 56px;
      line-height: 1;
      margin: 0;
      color: var(--brand-black);
      letter-spacing: .5px;
      font-weight: 900;
      font-style: italic;
      text-transform: uppercase;
    }
    .brandLogo{ width: 230px; height: auto; display:flex; align-items:flex-start; justify-content:flex-end; }
    .brandLogo img{ width: 100%; height: auto; object-fit: contain; display:block; }

    .divider{
      height:3px;
      background: var(--brand-green);
      margin: 24px 0 22px;
      border-radius: 999px;
    }

    .gridTop{
      display:grid;
      grid-template-columns: 1.3fr .9fr;
      gap: 26px;
      align-items:start;
    }
    .blockTitle{ font-size: 13px; font-weight: 900; margin: 0 0 6px; }
    .muted{ color: var(--muted); }
    .blockText{ font-size: 12px; color: var(--muted); line-height: 1.45; }
    .blockText em{ font-style: italic; }

    .metaBox{
      background: #f3f4f6;
      border-radius: 12px;
      padding: 14px 16px;
      width: 100%;
      max-width: 360px;
      margin-left:auto;
      border: 1px solid #eef0f3;
    }
    .metaRow{
      display:flex;
      justify-content:space-between;
      gap: 14px;
      font-size: 12px;
      color: #374151;
      padding: 6px 0;
      align-items:center;
    }
    .metaRow strong{ font-weight: 900; }
    .metaRow .label{ color:#6b7280; }
    .metaRow .value{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
    .metaRow input[type="date"]{ width: 150px; text-align:right; }

    .statusPill{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid var(--line);
      background: white;
      color: var(--brand-black);
      user-select:none;
    }
    .dot{ width: 8px; height: 8px; border-radius:999px; background:#9ca3af; }
    .status-concept .dot{ background:#9ca3af; }
    .status-verzonden .dot{ background:#2563eb; }
    .status-geaccepteerd .dot{ background: var(--brand-green); }
    .status-betaald .dot{ background:#111827; }

    /* Editable text-on-paper inputs */
    .paperInput{
      width: 100%;
      border: 1px dashed transparent;
      background: transparent;
      padding: 0;
      outline: none;
      color: inherit;
      transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
    }
    .paperInput:focus{
      border-color: rgba(47,158,68,.55);
      border-radius: 10px;
      padding: 6px 8px;
      background: #fbfbfb;
      box-shadow: var(--focus);
    }
    .stack > *{ display:block; }
    .stack .muted{ color: var(--muted); font-size: 12px; line-height:1.45; }

    /* Client picker */
    .clientPicker{
      display:flex;
      gap:10px;
      align-items:center;
      margin: 10px 0 0;
      flex-wrap: wrap;
    }
    .badge{
      font-size: 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 8px;
      color: var(--muted);
      background: #fafafa;
      user-select:none;
    }

    /* Items table */
    table{ width:100%; border-collapse: collapse; margin-top: 18px; table-layout: fixed; }
    .tableWrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
    .tableWrap table{ min-width: 820px; }
    @media (max-width: 520px){
      .pad{ padding: 18px 12px; }
      .docTitle{ font-size: 34px; }
      .appbar .actions{ gap:8px; }
      button{ padding: 10px 10px; }
    }
    thead th{
      text-align:left;
      font-size: 12px;
      color:#374151;
      font-weight: 900;
      padding: 10px 8px;
      border-top: 3px solid var(--brand-green);
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    tbody tr{ transition: background .12s ease; }
    tbody tr:hover{ background: #fbfcfb; }
    tbody td{
      padding: 12px 8px;
      border-bottom: 1px solid #eef0f3;
      font-size: 12px;
      color:#374151;
      vertical-align: top;
      overflow: hidden;
    }
    th.num, td.num{ text-align:right; }
    th.center, td.center{ text-align:center; }

    .cellInput{
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      padding: 6px 6px;
      border-radius: 10px;
      outline:none;
      transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
    }
    .cellInput:focus{
      border-color: rgba(47,158,68,.55);
      background: #fbfbfb;
      box-shadow: var(--focus);
    }
    .btnTiny{
      border:1px solid var(--line);
      background:white;
      border-radius: 10px;
      padding: 6px 10px;
      cursor:pointer;
    }



    /* Totals */
    .totalsArea{ margin-top: 14px; display:flex; justify-content:flex-end; }
    .totalsTable{ width: 380px; font-size: 12px; color:#111827; }
    .totalsRow{
      display:flex; justify-content:space-between; gap: 18px;
      padding: 10px 0; border-bottom: 1px solid #eef0f3;
    }
    .totalsRow:last-child{ border-bottom:none; padding-top: 14px; }
    .totalsRow .label{ font-weight: 900; }
    .totalsRow.total .label,
    .totalsRow.total .value{ color: var(--brand-green); font-weight: 900; }

    .okLine{
      margin-top: 8px;
      display:flex; justify-content:flex-end; gap: 8px; align-items:center;
      font-size: 12px; color: var(--brand-green-2); font-weight: 800;
      user-select:none;
    }
    .check{
      width: 18px; height: 18px; border-radius: 6px;
      background: var(--brand-green-soft);
      border: 1px solid rgba(47,158,68,.35);
      display:flex; align-items:center; justify-content:center;
    }

    
    .payCtaWrap{ margin-top: 10px; display:flex; justify-content:flex-end; }
    .payCta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(47,158,68,.35);
      background: var(--brand-green-soft);
      color: var(--brand-green-2);
      font-weight: 900;
      text-decoration: none;
      user-select:none;
    }
    .payCta:active{ transform: translateY(1px); }
    .payCta:hover{ filter: brightness(.98); }
    .payCtaSmall{ font-size: 12px; color: var(--muted); margin-top: 6px; text-align:right; }
    @media print{
      .payCta{
        border: 1px solid rgba(17,17,17,.25);
        background: transparent;
        color: #111827;
      }
      .payCtaSmall{ color:#111827; }
    }


/* Signature line */
    .signature{ margin-top: 34px; display:flex; justify-content:flex-end; }
    .sigBox{
      width: 320px; height: 64px;
      border: 1px solid #eef0f3; border-radius: 12px;
      position: relative; background: #fafafa;
    }
    .sigLabel{
      position:absolute; top: -10px; left: 12px;
      background: white; padding: 0 8px;
      font-size: 12px; color: var(--muted); font-weight: 800;
    }

    /* Footer like template */
    .footerDivider{ margin-top: 26px; height:1px; background: #9ca3af; }
    .footer{ padding-top: 14px; font-size: 10px; color: #111827; }
    .footerSmallLine{ font-weight: 900; margin-bottom: 10px; text-align:center; }
    .footerGrid{
      display:grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 20px; align-items:start;
    }
    .footerGrid h4{
      margin: 0 0 6px; font-size: 10px; font-weight: 900;
      text-transform: uppercase; letter-spacing: .3px;
    }
    .footerGrid .muted{ color: var(--muted); line-height: 1.45; }

    .payQr{
      margin-top: 10px;
      display:flex;
      flex-direction:column;
      gap:6px;
      align-items:flex-start;
    }
    .payQr .payQrLabel{
      font-size: 10px;
      font-weight: 900;
      color: #111827;
      text-transform: uppercase;
      letter-spacing: .3px;
    }
    .payQr img{
      width: 108px;
      height: 108px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: white;
      object-fit: contain;
    }

    .footerStripe{ height: 10px; background: var(--brand-green); margin-top: 18px; }

    /* Print stability: avoid splitting key blocks */
    table thead{ display: table-header-group; }
    tr, .metaBox, .signature, .footerDivider, .footer, .footerStripe{ break-inside: avoid; page-break-inside: avoid; }
    

    /* Settings UI */
    .panel{
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .panel h2{ margin: 0 0 10px; font-size: 16px; letter-spacing:.2px; }
    .panel p{ margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height:1.45; }
    .formGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
    .formGrid.three{ grid-template-columns: 1fr 1fr 1fr; }
    .field label{ display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
    .field input, .field textarea, .field select{
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      background: white;
      outline:none;
      transition: box-shadow .15s ease, border-color .15s ease;
    }
    .field input:focus, .field textarea:focus, .field select:focus{
      box-shadow: var(--focus);
      border-color: rgba(47,158,68,.45);
    }
    .field textarea{ min-height: 40px; resize: vertical; }
    .panelRow{ display:flex; gap: 14px; align-items:flex-start; flex-wrap: wrap; }
    .logoCard{
      width: 320px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: #fbfbfb;
    }
    .logoPreview{
      width: 280px; height: 80px;
      border-radius: 12px; background: white;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; margin-bottom: 10px;
      border: 1px solid var(--line);
      padding: 8px;
    }
    .logoPreview img{ width:100%; height:100%; object-fit:contain; display:block; }
    .list{ border: 1px solid var(--line); border-radius: 12px; overflow:hidden; background:white; }
    .listItem{
      display:flex; justify-content:space-between; gap: 12px;
      padding: 10px 12px; border-bottom: 1px solid var(--line);
      align-items:center; background: white;
    }
    .listItem:last-child{ border-bottom:none; }
    .listItem .meta{ font-size: 12px; color: var(--muted); }

    /* Toast */
    .toast{
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: #111827;
      color: white;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 12px;
      box-shadow: 0 12px 30px rgba(0,0,0,.18);
      opacity: 0;
      pointer-events:none;
      transition: opacity .18s ease, transform .18s ease;
      z-index: 9999;
      max-width: 92vw;
    }
    .toast.show{
      opacity: 1;
      transform: translateX(-50%) translateY(-4px);
    }

    /* PIN + Recovery overlays */
    .pinOverlay{
      position: fixed;
      inset: 0;
      background: rgba(17,17,17,.55);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 18px;
      z-index: 10000;
    }
    .pinCard{
      width: min(440px, 100%);
      background: white;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 18px 50px rgba(0,0,0,.18);
      padding: 18px;
    }
    .pinBrand{ font-weight: 900; letter-spacing: .2px; color: var(--brand-green); }
    .pinInput{
      width:100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 16px;
      outline:none;
    }
    .pinInput:focus{
      box-shadow: var(--focus);
      border-color: rgba(47,158,68,.45);
    }

    @media (max-width: 860px){
      .pad{ padding: 24px 18px; }
      .docTitle{ font-size: 42px; }
      .gridTop{ grid-template-columns: 1fr; }
      .metaBox{ margin-left:0; max-width: none; }
      .footerGrid{ grid-template-columns: 1fr; }
      .formGrid, .formGrid.three{ grid-template-columns: 1fr; }
      .logoCard{ width: 100%; }
      .brandLogo{ width: 200px; }
      select{ min-width: 220px; }
    }

    /* Print/PDF */
    @page{
      size: A4;
      margin: 14mm 12mm 16mm 12mm;
    }
    @media print{
      /* PDF: status één keer tonen (geen dubbele 'Concept') */
      #statusSelect{ display:none !important; }
      #statusPill{ border:none !important; background:transparent !important; padding:0 !important; gap:6px; }
      #statusPill .dot{ display:none !important; }

      body{
        background:white;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .appbar, #settingsView, .no-print, .toast{ display:none !important; }
      #docView{ display:block !important; }
      .wrap{ max-width:none; margin:0; padding:0; }
      .paper{ border:none; border-radius:0; box-shadow:none; }
      .pad{ padding: 14mm 12mm 12mm; }

      .paperInput, .cellInput{
        border:none !important;
        background: transparent !important;
        padding:0 !important;
        box-shadow:none !important;
      }
      .sigBox{ background: transparent; }

      /* Optie B: footer niet 'fixed' — staat netjes één keer onderaan (laatste pagina) */
      .footerFixed{
        position: static !important;
        left:auto !important; right:auto !important; bottom:auto !important;
        padding: 0 !important;
        background: transparent !important;
      }
      .footerStripe{
        position: static !important;
        margin-top: 18px !important;
      }
    }

      body{ padding-bottom: 200px; }
    }