/* Override base layout for split view */ #main-content { max-width: 100%; padding: 1.5rem; align-items: stretch; } .page-header { max-width: 100%; } /* ---- Split layout ---- */ .split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; width: 100%; min-height: calc(100vh - 6rem); } .form-column { overflow-y: auto; max-height: calc(100vh - 6rem); padding-right: 0.5rem; } .preview-column { position: sticky; top: 1rem; height: calc(100vh - 6rem); } /* ---- Form cards ---- */ .form-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } .form-card h3 { font-size: 0.95rem; font-weight: 700; color: #0d47a1; border-bottom: 2px solid #e3ecfa; padding-bottom: 0.4rem; margin-bottom: 1rem; } .form-row { display: flex; gap: 1rem; margin-bottom: 0.85rem; align-items: flex-end; } .form-group { display: flex; flex-direction: column; flex: 1; } .form-group label { font-size: 0.8rem; font-weight: 600; color: #444; margin-bottom: 0.25rem; } .form-group label .required { color: #c62828; } .form-group input, .form-group select, .form-group textarea { padding: 0.5rem 0.65rem; border: 1px solid #ccd5e0; border-radius: 6px; font-size: 0.88rem; color: #1a1a2e; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #1565c0; box-shadow: 0 0 0 2px rgba(21,101,192,0.12); } .form-group input[readonly] { background: #f5f6fa; color: #888; cursor: default; } .form-group textarea { resize: vertical; min-height: 60px; } .form-group .field-hint { font-size: 0.72rem; color: #999; margin-top: 0.15rem; } /* Small inline button (next to dropdown) */ .btn-inline { padding: 0.5rem 0.75rem; background: #e3ecfa; color: #0d47a1; border: 1px solid #c0d3f0; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; } .btn-inline:hover { background: #c0d3f0; } /* ---- Lines table ---- */ .lines-table-wrapper { overflow-x: auto; margin-bottom: 0.75rem; } #lines-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } #lines-table th { background: #f0f4fb; font-weight: 600; color: #0d47a1; padding: 0.5rem 0.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } #lines-table td { padding: 0.35rem 0.3rem; vertical-align: middle; border-bottom: 1px solid #eef1f6; } #lines-table tr:hover td { background: #f9fbff; } #lines-table input, #lines-table select { padding: 0.35rem 0.4rem; border: 1px solid #dce3ed; border-radius: 4px; font-size: 0.82rem; width: 100%; box-sizing: border-box; } #lines-table input:focus, #lines-table select:focus { outline: none; border-color: #1565c0; box-shadow: 0 0 0 2px rgba(21,101,192,0.1); } #lines-table input[readonly] { background: #f5f6fa; color: #888; border-color: #e8edf5; } .col-type { width: 110px; } .col-desc { min-width: 160px; } .col-qty { width: 65px; } .col-unit { width: 60px; } .col-price { width: 100px; } .col-vat { width: 80px; } .col-total { width: 100px; } .col-del { width: 36px; } .btn-delete-line { background: none; border: none; color: #c62828; font-size: 1.1rem; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 4px; line-height: 1; } .btn-delete-line:hover { background: #ffebee; } .btn-add-line { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.9rem; background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; } .btn-add-line:hover { background: #c8e6c9; } /* ---- Totals summary ---- */ .totals-summary { margin-top: 1rem; display: flex; justify-content: flex-end; } .totals-box { min-width: 260px; } .totals-row { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.88rem; color: #444; } .totals-row.total-main { background: #0d47a1; color: #fff; padding: 0.55rem 0.75rem; border-radius: 6px; font-weight: 700; font-size: 1rem; margin-top: 0.4rem; } /* ---- Action bar ---- */ .action-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; } .btn-save { padding: 0.6rem 1.5rem; background: #1565c0; color: #fff; border: none; border-radius: 6px; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-save:hover { background: #0d47a1; } .btn-save:disabled { background: #90b4e8; cursor: not-allowed; } .btn-secondary { padding: 0.6rem 1.5rem; background: #fff; color: #0d47a1; border: 1px solid #c0d3f0; border-radius: 6px; font-size: 0.92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s; } .btn-secondary:hover { background: #e3ecfa; } .back-link { color: #666; text-decoration: none; font-size: 0.88rem; font-weight: 500; } .back-link:hover { color: #0d47a1; text-decoration: underline; } /* ---- Preview ---- */ .preview-container { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 100%; overflow: hidden; } .preview-header { padding: 0.75rem 1rem; background: #f0f4fb; border-bottom: 1px solid #e3ecfa; font-size: 0.85rem; font-weight: 700; color: #0d47a1; flex-shrink: 0; } #preview-frame { flex: 1; border: none; width: 100%; background: #fff; } /* ---- Status banner ---- */ .save-banner { display: none; padding: 0.6rem 1rem; border-radius: 6px; font-size: 0.88rem; font-weight: 500; margin-bottom: 0.75rem; } .save-banner.success { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #43a047; display: block; } .save-banner.error { background: #fdecea; color: #c62828; border-left: 4px solid #e53935; display: block; } /* ---- Searchable dropdown ---- */ .search-select-wrapper { position: relative; } .search-select-wrapper input.search-input { width: 100%; } .search-select-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid #ccd5e0; border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); max-height: 220px; overflow-y: auto; } .search-select-dropdown.open { display: block; } .search-select-option { padding: 0.5rem 0.75rem; font-size: 0.88rem; cursor: pointer; } .search-select-option:hover, .search-select-option.highlighted { background: #e3ecfa; color: #0d47a1; } .search-select-option .sub { font-size: 0.75rem; color: #999; } /* ---- Responsive ---- */ @media (max-width: 1100px) { .split-layout { grid-template-columns: 1fr; } .form-column { max-height: none; padding-right: 0; } .preview-column { position: static; height: 600px; } } @media (max-width: 600px) { .form-row { flex-direction: column; gap: 0.5rem; } .col-type, .col-desc, .col-qty, .col-unit, .col-price, .col-vat, .col-total { width: auto; min-width: auto; } }

Nieuwe verkoopfactuur

Vul de gegevens in om een nieuwe factuur aan te maken.

← Terug naar overzicht

Klant

Datum & nummering

Wordt automatisch toegekend bij opslaan

Factuurregels

Type Omschrijving Aantal Eenheid Prijs excl. BTW Totaal
Subtotaal excl. BTW: €0,00
Totaal incl. BTW: €0,00

Extra

← Terug naar overzicht
Live voorbeeld
PDF Voorbeeld

Nieuw