:root{
    --blue:#0b8fe8;
    --blue2:#37b7ec;
    --navy:#062b61;
    --text:#101828;
    --muted:#667085;
    --line:#dbe3ee;
    --soft:#f6f9fc;
    --danger:#ff1f1f;
    --shadow:0 14px 42px rgba(11,47,90,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#f7fbff,#ffffff);color:var(--text)}
a{color:var(--navy)}

.app-body{padding-left:260px;padding-top:96px}
.app-sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-right:1px solid #edf1f6;padding:26px 26px;z-index:20}
.brand{display:block;margin-bottom:26px;text-decoration:none}
.brand img{width:220px;max-width:100%;height:auto;display:block}
.new-offer-button{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#0397ed,#0079d8);color:white!important;border-radius:8px;padding:13px 16px;font-weight:700;text-decoration:none;box-shadow:0 8px 18px rgba(0,136,220,.22);margin-bottom:28px}
.side-nav{display:flex;flex-direction:column;gap:6px}
.side-nav a{display:flex;align-items:center;gap:12px;color:#203047;text-decoration:none;padding:12px 12px;border-radius:8px;font-size:15px}
.side-nav a span{width:20px;text-align:center;color:#162b45}
.side-nav a.active,.side-nav a:hover{background:#e8f5ff;color:#007ee5;font-weight:700}

.app-topbar{position:fixed;left:260px;right:0;top:0;height:84px;display:flex;justify-content:flex-end;align-items:center;padding:0 42px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);z-index:10}
.app-topbar nav{display:flex;gap:34px;align-items:center}
.app-topbar a{text-decoration:none;color:#24344d;font-weight:600}
.app-topbar a.active{color:#0088e8}
.app-main{max-width:1360px;margin:0 auto;padding:0 28px 36px}

.page-card,.card{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}
.page-header h1,.card h1{font-size:30px;line-height:1.1;margin:0 0 8px;color:#0b1628}
.page-header p{margin:0;color:var(--muted)}
.header-actions{display:flex;gap:10px;flex-wrap:wrap}

label{font-weight:600;font-size:13px;margin:10px 0 6px;display:block;color:#0f172a}
input,textarea,select{width:100%;border:1px solid #d8e0ea;border-radius:7px;padding:10px 12px;font-size:14px;background:white;outline:none}
input:focus,textarea:focus,select:focus{border-color:#7cc9f3;box-shadow:0 0 0 3px rgba(0,142,232,.11)}
textarea{min-height:96px;resize:vertical}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,#008ee8,#0077d6);color:white!important;border:0;border-radius:7px;padding:10px 14px;text-decoration:none;font-weight:700;cursor:pointer;line-height:1}
button.small,.button.small{padding:7px 10px;font-size:12px}.secondary{background:#fff!important;color:#26364f!important;border:1px solid #d7e0eb!important}.danger-button{background:#d92d20!important;color:white!important}
.muted{color:var(--muted);font-size:13px}
.alert{background:#fee4e2;color:#b42318;padding:10px;border-radius:8px;margin:10px 0}.success{background:#dcfae6;color:#067647;padding:10px;border-radius:8px;margin:10px 0}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.span-2{grid-column:span 2}
.item-edit{border:1px solid #e1e8f0;border-radius:10px;background:#fbfdff;padding:16px;margin:14px 0;box-shadow:0 4px 16px rgba(16,24,40,.03)}

.modern-table-wrap{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff}
.modern-table,.list{width:100%;border-collapse:collapse;background:#fff}
.modern-table th,.list th{background:#fbfcfe;color:#0f172a;font-size:13px;font-weight:800;padding:13px 14px;border-bottom:1px solid #e1e7ef;text-align:left}
.modern-table td,.list td{padding:13px 14px;border-bottom:1px solid #edf1f6;vertical-align:middle}
.modern-table tr:hover,.list tr:hover{background:#fbfdff}
.status-pill{display:inline-flex;padding:4px 9px;border-radius:999px;background:#eef6ff;color:#006fbe;font-size:12px;font-weight:700}
.actions{white-space:nowrap}
.inline-action-form{display:inline-block;margin:0 0 0 6px;padding:0}
.icon-action{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;background:transparent!important;color:#0088e8!important;text-decoration:none;font-size:18px;cursor:pointer;padding:0}
.icon-action.delete{color:var(--danger)!important}

.dash-logo{max-width:330px;display:block;margin-bottom:12px}.login-card{max-width:380px;background:white;margin:10vh auto;padding:34px;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.16)}.login-logo{max-width:280px}
.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.image-choice{border:1px solid var(--line);padding:12px;border-radius:12px;background:#fff}.image-choice img{max-width:100%;height:150px;object-fit:contain}.placeholder{height:150px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:#667085}.error-card{border-color:#fda29b}

/* edit table-like polish */
form.card>h2{margin-top:26px;color:#0b3a78}
.image-status{margin-top:10px;padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#f9fafb;font-size:13px}
.image-status.ok{border-color:#b7ebc6;background:#f0fff4}.image-status.missing{border-color:#fde68a;background:#fffbeb}
.auto-image-preview,.image-preview img{width:160px;height:112px;object-fit:contain;object-position:center;display:block;margin-top:8px;border-radius:8px;background:transparent;border:1px solid #e5e7eb;padding:6px}

/* printable offer */
.topbar{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;padding:14px 22px}.topbar a{color:#fff;text-decoration:none;margin-left:16px;font-weight:700}
.container{max-width:1250px;margin:24px auto;padding:0 18px}
.print-main{margin:0;padding:18px}.screen-actions{max-width:210mm;margin:0 auto 14px;display:flex;gap:10px}.offer-page{width:210mm;min-height:297mm;margin:0 auto 18px;background:white;padding:13mm;box-shadow:0 8px 28px rgba(0,0,0,.16);page-break-after:always}.offer-header{display:grid;grid-template-columns:1.1fr 1fr 1.15fr;gap:18px;align-items:center;border-bottom:2px solid var(--navy);padding-bottom:12px}.offer-title{font-size:34px;color:var(--navy);font-weight:800;letter-spacing:-1px}.meta,.company{font-size:13px;line-height:1.6}.logo-wrap{text-align:right}.logo-wrap img{max-width:260px;height:auto}.client-box{background:var(--soft);border-left:4px solid var(--blue);padding:9px 12px;margin-top:10px;font-size:12px}.intro{font-size:13px;line-height:1.45;margin:12px 0 14px}.offer-items{border-collapse:collapse;width:100%}.offer-items th{background:var(--navy);color:white;font-size:12px;padding:8px;border:1px solid var(--navy)}.offer-items td{font-size:11px;padding:7px;border:1px solid var(--line);vertical-align:middle}.offer-items ul{margin:0;padding-left:16px}.product-col{width:165px}.product-col small{display:block;color:#667085;margin-top:3px}.prod-img{width:70px;height:52px;object-fit:contain;display:block;margin-bottom:5px;background:transparent}.prod-img.ph{border:1px solid var(--line);border-radius:8px;background:linear-gradient(145deg,#fff,#e8edf4);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--navy);font-weight:800}.info-row{display:grid;gap:8px;margin-top:10px}.info-row.two{grid-template-columns:1fr 1fr}.info-row.three{grid-template-columns:1fr 1fr 1fr}.info-box{border:1px solid var(--line);background:var(--soft);padding:10px;border-radius:8px;font-size:11px;line-height:1.35}.info-box h3{margin:0 0 6px;color:var(--navy);font-size:13px}.diagram{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.diagram span{background:white;border:1px solid var(--line);border-radius:8px;padding:7px 9px}.summary{margin-top:12px;margin-left:auto;width:420px}.summary td{padding:10px 14px;border:1px solid var(--line);font-size:14px;white-space:nowrap}.summary td:first-child{background:var(--navy);color:white;font-weight:700}.summary .grand td{background:var(--navy);color:white;font-size:18px;font-weight:800}.sign{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:22px;font-size:12px}footer{font-size:10px;color:#667085;margin-top:10px}

@media(max-width:1100px){.app-body{padding-left:0;padding-top:80px}.app-sidebar{position:relative;width:auto;bottom:auto;display:block;padding:18px}.brand img{width:260px}.side-nav{display:none}.new-offer-button{max-width:240px}.app-topbar{left:0;height:72px;padding:0 18px}.app-main{padding:0 16px}.grid-3,.grid-4{grid-template-columns:1fr 1fr}.span-2{grid-column:span 2}.info-row.two,.info-row.three{grid-template-columns:1fr!important}.offer-page{width:100%;padding:18px;overflow-x:hidden}.offer-header{grid-template-columns:1fr}.offer-items{display:block;overflow-x:auto;white-space:nowrap}.summary{width:100%}}
@media(max-width:760px){.grid-3,.grid-4{grid-template-columns:1fr}.span-2{grid-column:auto}.page-header{display:block}.app-topbar nav{gap:12px;font-size:13px}.brand img{width:220px}.modern-table-wrap{overflow-x:auto}}
@media print{body{background:white}.topbar,.screen-actions,.print-hidden{display:none}.print-main{padding:0}.offer-page{box-shadow:none;margin:0;width:auto;min-height:auto;padding:10mm 11mm}@page{size:A4;margin:0}}

/* Logo/netwerkvelden fix */
.brand img {
    width: 235px;
    max-height: 92px;
    object-fit: contain;
    object-position: left center;
}
@media(max-width:1100px){
    .brand img {
        width: 245px;
        max-height: 96px;
    }
}

.field-inline {
    margin: 10px 0;
}
.field-inline label,
.item-edit label input[type="checkbox"] {
    width: auto;
}
.item-edit input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
}


/* Strakke artikelopties */
.item-options {
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
    padding-top: 16px;
}
.options-title {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    font-size: 15px;
}
.option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
}
.option-card {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #fff;
    margin: 0;
    cursor: pointer;
    min-height: 78px;
}
.option-card:hover {
    border-color: #94d4f7;
    background: #fbfdff;
}
.option-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.option-check {
    width: 24px;
    height: 24px;
    border: 2px solid #b8c3d2;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin-top: 2px;
}
.option-card input:checked + .option-check {
    border-color: #008ee8;
    background: linear-gradient(135deg,#008ee8,#0077d6);
}
.option-card input:checked + .option-check::after {
    content: "✓";
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
}
.option-card strong {
    display: block;
    font-size: 14px;
    color: #0b2f63;
    margin-bottom: 5px;
}
.option-card small {
    display: block;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}
.option-card.checked {
    border-color: #92d5fb;
    background: #f3fbff;
}
@media(max-width:760px){
    .option-grid {
        grid-template-columns: 1fr;
    }
}

/* Opslaan/retry formulier fix */
.image-status .button {
    margin-top: 8px;
}
.save-button {
    margin-top: 14px;
}

.included-price{color:#067647;font-weight:700;font-size:11px;}

.nextgen-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 22px}
.nextgen-summary>div{background:#f8fbff;border:1px solid #dbeafe;border-radius:10px;padding:12px}
.nextgen-summary b{display:block;color:#0b2f63;margin-bottom:5px}
.nextgen-summary span{color:#344054;font-size:13px}
.public-offer{min-height:100vh;background:linear-gradient(135deg,#f7fbff,#fff);padding:34px}
.public-card{max-width:980px;margin:0 auto;background:white;border:1px solid #dbe3ee;border-radius:14px;box-shadow:0 18px 48px rgba(11,47,90,.1);padding:30px}
.public-logo{width:260px;max-width:100%;margin-bottom:20px}
.public-summary{margin-top:18px}
.accept-box{margin-top:24px;border:1px solid #dbeafe;border-radius:12px;background:#f8fbff;padding:18px}
.included-price{color:#067647;font-weight:700;font-size:11px}


/* System configuration bundle layout */
.config-bundle-card{
    border:1px solid #dbe3ee;
    border-radius:16px;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    padding:22px;
    margin:18px 0;
    box-shadow:0 12px 36px rgba(11,47,90,.08);
}
.config-bundle-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:18px;
}
.config-bundle-header h2{
    margin:0 0 8px;
    font-size:30px;
    color:#0b2f63;
}
.config-bundle-header p{
    margin:0;
    color:#667085;
}
.config-bundle-price{
    background:linear-gradient(135deg,#008ee8,#0077d6);
    color:#fff;
    padding:14px 18px;
    border-radius:12px;
    font-size:24px;
    font-weight:800;
    white-space:nowrap;
}
.config-main-image-wrap{
    text-align:center;
    margin:20px 0 28px;
}
.config-main-image{
    max-width:320px;
    max-height:220px;
    object-fit:contain;
}
.config-components-title{
    font-size:18px;
    font-weight:800;
    color:#0b2f63;
    margin-bottom:16px;
}
.config-components-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:16px;
}
.config-component-card{
    border:1px solid #dbe3ee;
    border-radius:12px;
    background:#fff;
    padding:14px;
    text-align:center;
}
.config-component-card img{
    width:100%;
    height:120px;
    object-fit:contain;
    margin-bottom:10px;
}
.config-component-name{
    font-weight:700;
    color:#0f172a;
    margin-bottom:8px;
    font-size:14px;
}
.config-component-desc{
    color:#667085;
    font-size:12px;
    line-height:1.35;
}
@media(max-width:760px){
    .config-bundle-header{
        flex-direction:column;
    }
    .config-bundle-price{
        width:100%;
        text-align:center;
    }
}


/* Professionele laatste bijlagepagina */
.professional-appendix-page{
    page-break-before:always;
    break-before:page;
    padding:11mm 12mm;
    color:#0d1b2f;
}
.appendix-header{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:20px;
    align-items:start;
    border-bottom:3px solid #0b2f63;
    padding-bottom:12px;
    margin-bottom:16px;
}
.appendix-logo img{
    max-width:230px;
    height:auto;
}
.appendix-title{
    text-align:right;
}
.appendix-title h1{
    margin:0;
    text-transform:uppercase;
    font-size:22px;
    color:#0b2f63;
    letter-spacing:.4px;
}
.appendix-title p{
    margin:5px 0 8px;
    color:#667085;
}
.appendix-title span{
    display:inline-block;
    background:#0b2f63;
    color:#fff;
    border-radius:6px;
    padding:6px 14px;
    font-weight:700;
    font-size:12px;
}
.appendix-intro{
    display:flex;
    align-items:center;
    gap:14px;
    margin:16px 0 20px;
}
.appendix-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#0b2f63;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:22px;
}
.appendix-intro h2{
    margin:0;
    color:#0b2f63;
    font-size:22px;
    text-transform:uppercase;
}
.appendix-intro p{
    margin:2px 0 0;
    color:#334155;
}
.appendix-top-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:14px;
}
.appendix-card{
    border:1px solid #dbe3ee;
    background:#f9fbff;
    border-radius:10px;
    padding:12px;
    font-size:10.5px;
    line-height:1.55;
    min-height:210px;
}
.appendix-card-icon{
    color:#0b63c7;
    font-size:22px;
    margin-bottom:8px;
}
.appendix-card h3{
    margin:0 0 10px;
    color:#0b2f63;
    font-size:13px;
}
.appendix-card p{
    margin:0;
}
.appendix-small{
    margin-top:8px!important;
    color:#475467;
}
.appendix-diagram .diagram{
    display:grid;
    gap:6px;
}
.appendix-diagram .diagram span{
    background:#fff;
    border:1px solid #dbe3ee;
    border-radius:16px;
    padding:5px 8px;
    text-align:center;
    font-size:10px;
}
.appendix-diagram .diagram b{
    text-align:center;
    color:#0b63c7;
}
.appendix-section{
    border:1px solid #dbe3ee;
    background:#f9fbff;
    border-radius:10px;
    padding:12px;
    margin-top:12px;
}
.appendix-section-heading{
    display:flex;
    align-items:center;
    gap:8px;
    border-bottom:1px solid #cfd8e6;
    padding-bottom:6px;
    margin-bottom:10px;
}
.appendix-section-heading span{
    color:#0b63c7;
    font-weight:900;
    font-size:18px;
}
.appendix-section-heading h2{
    margin:0;
    font-size:17px;
    color:#0b2f63;
    text-transform:uppercase;
}
.appendix-benefits{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.appendix-benefits b{
    color:#0b2f63;
    font-size:12px;
}
.appendix-benefits p{
    margin:5px 0 0;
    color:#334155;
    font-size:10.5px;
    line-height:1.45;
}
.appendix-two-col{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:18px;
}
.appendix-note{
    border:1px solid #dbe3ee;
    background:#fff;
    border-radius:10px;
    padding:14px;
}
.appendix-note h3{
    margin:0 0 8px;
    color:#0b2f63;
    font-size:14px;
}
.appendix-note p{
    margin:0;
    font-size:11px;
    line-height:1.55;
}
.appendix-checklist{
    margin:0;
    padding-left:18px;
    font-size:11px;
    line-height:1.65;
}
.appendix-checklist li{
    margin-bottom:4px;
}
.appendix-checklist.compact{
    font-size:10.5px;
}
.appendix-bottom p{
    margin:0 0 8px;
    font-size:11px;
    line-height:1.55;
}
.appendix-contact{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    border:1px solid #dbe3ee;
    background:#fff;
    padding:10px 14px;
    margin-top:12px;
    font-size:10.5px;
}
.appendix-footer{
    background:#0b2f63;
    color:#fff;
    text-align:center;
    padding:9px;
    margin-top:10px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-weight:800;
    font-size:11px;
}
@media print{
    .professional-appendix-page{
        page-break-before:always;
    }
}
@media(max-width:900px){
    .appendix-top-grid,
    .appendix-benefits{
        grid-template-columns:1fr 1fr;
    }
    .appendix-two-col{
        grid-template-columns:1fr;
    }
}


/* === STRAKKE PROFESSIONELE OFFERTE LAYOUT === */
.offer-page{width:210mm;min-height:297mm;padding:12mm 13mm;background:#fff;}
.offer-header{grid-template-columns:1.25fr 1fr 1fr;gap:16px;align-items:start;border-bottom:2px solid #0b2f63;padding-bottom:10px;margin-bottom:12px;}
.offer-title{font-size:30px;line-height:1;letter-spacing:-.5px;}
.logo-wrap{text-align:right;}
.logo-wrap img,.offer-logo{max-width:155px!important;max-height:70px!important;object-fit:contain;}
.company,.meta{font-size:11.5px;line-height:1.45;}
.client-box{margin-top:8px;padding:8px 10px;font-size:11.5px;}
.intro{font-size:11.5px;line-height:1.4;margin:8px 0 10px;}
.offer-items th{font-size:10.5px;padding:6px;}
.offer-items td{font-size:10px;padding:6px;line-height:1.32;}
.product-col{width:150px;}
.prod-img{width:58px;height:42px;margin-bottom:4px;}
.summary{margin-top:10px;width:360px;}
.summary td{font-size:12px;padding:8px 10px;}
.summary .grand td{font-size:15px;}
.sign{margin-top:16px;font-size:11px;}
footer{font-size:9px;}
.discount-label,.discount-amount{color:#c62828!important;font-weight:700;}
.included-price{color:#067647;font-weight:700;font-size:10.5px;}

.config-bundle-card{padding:14px!important;margin:10px 0 12px!important;border-radius:10px!important;box-shadow:none!important;}
.config-bundle-header{margin-bottom:10px!important;}
.config-bundle-header h2{font-size:20px!important;margin-bottom:4px!important;}
.config-bundle-header p{font-size:11px!important;}
.config-bundle-price{font-size:17px!important;padding:10px 12px!important;}
.config-main-image{max-width:180px!important;max-height:120px!important;}
.config-main-image-wrap{margin:8px 0 12px!important;}
.config-components-title{font-size:14px!important;margin-bottom:8px!important;}
.config-components-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;}
.config-component-card{padding:8px!important;border-radius:8px!important;}
.config-component-card img{height:62px!important;margin-bottom:5px!important;}
.config-component-name{font-size:10.5px!important;margin-bottom:3px!important;}
.config-component-desc{font-size:9px!important;line-height:1.25!important;}

.professional-appendix-page{page-break-before:always;break-before:page;padding:12mm 13mm;color:#102033;}
.appendix-clean-header{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;align-items:start;border-bottom:2px solid #0b2f63;padding-bottom:11px;margin-bottom:14px;}
.appendix-clean-logo{max-width:145px;max-height:64px;object-fit:contain;}
.appendix-clean-title{text-align:right;}
.appendix-clean-title h1{margin:0;color:#0b2f63;font-size:22px;text-transform:uppercase;letter-spacing:.3px;}
.appendix-clean-title p{margin:4px 0 7px;color:#667085;font-size:11.5px;}
.appendix-clean-title span{display:inline-block;background:#0b2f63;color:#fff;padding:5px 12px;border-radius:6px;font-size:10px;font-weight:700;}
.appendix-hero{display:flex;gap:12px;align-items:flex-start;background:#f7faff;border:1px solid #dbe3ee;border-radius:10px;padding:12px;margin-bottom:12px;}
.appendix-hero-icon{width:34px;height:34px;border-radius:50%;background:#0b2f63;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;flex:0 0 auto;}
.appendix-hero h2{margin:0 0 3px;color:#0b2f63;font-size:18px;}
.appendix-hero p{margin:0;color:#344054;font-size:11px;line-height:1.45;}
.appendix-clean-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.appendix-clean-card{border:1px solid #dbe3ee;background:#fbfdff;border-radius:10px;padding:12px;min-height:118px;font-size:10.6px;line-height:1.45;}
.appendix-clean-card.main{grid-column:span 2;min-height:auto;}
.appendix-clean-card h3{margin:0 0 7px;color:#0b2f63;font-size:13.5px;}
.appendix-clean-card p{margin:0;}
.appendix-clean-diagram .diagram{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.appendix-clean-diagram .diagram span{background:#fff;border:1px solid #dbe3ee;border-radius:8px;padding:5px 8px;font-size:10px;}
.appendix-clean-diagram .diagram b{color:#0b63c7;}
.appendix-clean-section{border:1px solid #dbe3ee;background:#fbfdff;border-radius:10px;padding:12px;margin-top:10px;}
.appendix-clean-section h2{margin:0 0 9px;color:#0b2f63;font-size:16px;text-transform:uppercase;border-bottom:1px solid #dbe3ee;padding-bottom:6px;}
.appendix-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.appendix-service-grid b{display:block;color:#0b2f63;font-size:11.5px;margin-bottom:4px;}
.appendix-service-grid span{display:block;color:#475467;font-size:9.8px;line-height:1.35;}
.appendix-terms-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;}
.appendix-terms-grid h3{margin:0 0 6px;color:#0b2f63;font-size:13px;}
.appendix-terms-grid ul{margin:0;padding-left:17px;font-size:10.5px;line-height:1.55;}
.appendix-terms-grid p{margin:0 0 8px;font-size:10.5px;line-height:1.55;}
.appendix-clean-footer{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#0b2f63;color:#fff;padding:10px 12px;font-size:10px;align-items:center;}
.appendix-clean-footer div:last-child{text-align:right;text-transform:uppercase;letter-spacing:1px;font-weight:800;}
@media print{.professional-appendix-page{page-break-before:always;}}


/* === TWEE PRINTOPZETTEN: SYSTEEM vs NETWERK === */
.offer-page{width:210mm;min-height:297mm;padding:10mm 11mm;background:#fff;color:#071b36;}
.clean-offer-header{display:grid;grid-template-columns:1fr 1fr;align-items:start;border-bottom:2px solid #0b2f63;padding-bottom:9px;margin-bottom:14px;}
.clean-logo-wrap img{width:132px!important;max-height:54px!important;object-fit:contain;}
.clean-title-block{text-align:right;}
.clean-offer-title{font-size:24px;font-weight:900;color:#0b2f63;letter-spacing:.3px;}
.clean-meta{font-size:10.5px;line-height:1.5;margin-top:4px;}
.clean-top-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;margin:10px 0 18px;font-size:11.5px;line-height:1.45;}
.clean-top-grid h3{margin:0 0 7px;color:#0b2f63;font-size:12px;}
.clean-contact-box span{display:block;line-height:1.45;}
.clean-items{margin-top:8px;}
.clean-items th{background:#fff!important;color:#0b2f63!important;border-bottom:1.5px solid #0b2f63!important;border-top:0!important;border-left:0!important;border-right:0!important;font-size:10.5px;padding:7px 6px;text-align:left;}
.clean-items td{font-size:10.5px;padding:8px 6px;border-left:0!important;border-right:0!important;border-top:0!important;border-bottom:1px solid #cfd8e6!important;vertical-align:top;}
.clean-product-cell{display:flex;gap:10px;align-items:flex-start;}
.clean-product-cell b{color:#0b2f63;}
.clean-desc{margin-top:4px;color:#344054;font-size:10px;line-height:1.35;}
.prod-img{width:62px!important;height:46px!important;object-fit:contain;flex:0 0 auto;}
.clean-bottom-grid{display:grid;grid-template-columns:1fr 350px;gap:26px;margin-top:18px;align-items:start;}
.payment-box{border:1px solid #dbe3ee;border-radius:10px;padding:12px;font-size:11px;line-height:1.45;background:#fbfdff;}
.payment-box h3{margin:0 0 7px;color:#0b2f63;font-size:13px;}
.clean-summary{width:100%!important;margin:0!important;}
.clean-summary td{font-size:11.5px;padding:8px 10px;}
.clean-summary .grand td{font-size:14px;background:#0b2f63!important;color:#fff!important;}
.clean-sign{display:grid;grid-template-columns:1fr 1.5fr;gap:28px;margin-top:14px;border:1px solid #dbe3ee;border-radius:10px;padding:12px;font-size:11px;line-height:1.5;background:#fbfdff;}
.clean-footer{position:absolute;left:11mm;right:11mm;bottom:7mm;border-top:1px solid #dbe3ee;padding-top:6px;font-size:9px;color:#0b2f63;}
.clean-footer span{float:right;font-weight:700;}
.discount-label,.discount-amount{color:#c62828!important;font-weight:700;}
.included-price{color:#067647;font-weight:700;font-size:10.5px;}

.system-main-row{display:grid;grid-template-columns:1.2fr 220px 170px;gap:18px;align-items:center;border-top:1px solid #0b2f63;border-bottom:1px solid #0b2f63;padding:14px 0;margin-bottom:10px;}
.system-main-content{display:grid;grid-template-columns:28px 1fr;gap:10px;}
.row-number{font-weight:700;color:#0b2f63;}
.system-main-content h2{margin:0 0 7px;color:#0b2f63;font-size:16px;}
.system-main-content p{margin:0 0 7px;font-size:11px;line-height:1.45;}
.system-main-content small{display:block;font-size:10px;line-height:1.35;color:#344054;}
.system-main-image{max-width:210px;max-height:135px;object-fit:contain;}
.system-main-price{display:grid;grid-template-columns:1fr;gap:4px;text-align:right;font-size:10px;}
.system-main-price b{font-size:13px;color:#0b2f63;}
.system-main-price strong{font-size:17px;color:#0b2f63;}
.included-components-box{margin-top:8px;border-bottom:1px solid #cfd8e6;padding-bottom:10px;}
.included-components-box h3{margin:0 0 8px;color:#0b2f63;font-size:12px;}
.included-components-columns{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;}
.included-component-line{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:7px;font-size:10px;line-height:1.25;}
.included-component-line img{width:34px;height:26px;object-fit:contain;}

.appendix-header-exact{display:grid;grid-template-columns:1fr 1.4fr;align-items:start;border-bottom:2px solid #0b2f63;padding-bottom:10px;margin-bottom:14px;}
.appendix-header-exact img{width:118px!important;max-height:50px!important;object-fit:contain;}
.appendix-header-exact div:last-child{text-align:right;}
.appendix-header-exact h1{margin:0;color:#0b2f63;text-transform:uppercase;font-size:21px;}
.appendix-header-exact p{margin:4px 0 7px;color:#667085;font-size:11px;}
.appendix-header-exact span{display:inline-block;background:#0b2f63;color:white;border-radius:5px;padding:5px 11px;font-size:10px;font-weight:700;}
.appendix-intro-exact{display:flex;gap:12px;align-items:center;margin:14px 0 18px;}
.info-dot{width:38px;height:38px;border-radius:50%;background:#0b2f63;color:white;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;}
.appendix-intro-exact h2{margin:0;color:#0b2f63;text-transform:uppercase;font-size:20px;}
.appendix-intro-exact p{margin:2px 0 0;font-size:11px;}
.system-appendix-top{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.appendix-card-exact{border:1px solid #dbe3ee;border-radius:9px;background:#fbfdff;padding:12px;font-size:10.3px;line-height:1.55;min-height:185px;}
.appendix-card-exact h3{margin:0 0 9px;color:#0b2f63;font-size:12.2px;}
.vertical-flow{display:grid;gap:5px;text-align:center;}
.vertical-flow span{border:1px solid #dbe3ee;border-radius:14px;background:#fff;padding:5px;font-size:10px;font-weight:700;color:#0b2f63;}
.vertical-flow b{color:#0b2f63;}
.appendix-wide-section{border:1px solid #dbe3ee;background:#fbfdff;border-radius:9px;padding:12px;margin-top:12px;}
.appendix-wide-section h2,.appendix-bottom-grid h2{margin:0 0 8px;color:#0b2f63;text-transform:uppercase;font-size:16px;border-bottom:1px solid #dbe3ee;padding-bottom:6px;}
.benefit-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.benefit-row b{display:block;color:#0b2f63;font-size:11px;margin-bottom:4px;}
.benefit-row p{margin:0;font-size:9.8px;line-height:1.35;}
.appendix-lower-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:10px;margin-top:12px;}
.appendix-lower-grid ul,.appendix-bottom-grid ul{margin:0;padding-left:17px;font-size:10.5px;line-height:1.55;}
.appendix-note-box{border:1px solid #dbe3ee;background:#fbfdff;border-radius:9px;padding:12px;font-size:10.5px;line-height:1.45;}
.appendix-note-box.green{background:#f3fbf5;}
.appendix-note-box h3{margin:0 0 7px;color:#0b2f63;font-size:12px;}
.appendix-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid #dbe3ee;background:#fbfdff;border-radius:9px;padding:12px;margin-top:12px;font-size:10.5px;}
.appendix-contact-exact{position:absolute;left:11mm;right:11mm;bottom:7mm;background:#0b2f63;color:#fff;padding:8px 10px;display:grid;grid-template-columns:1fr 1fr;font-size:9.5px;align-items:center;}
.appendix-contact-exact b{text-align:right;text-transform:uppercase;letter-spacing:.8px;}

.network-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.network-info-card{border:1px solid #dbe3ee;border-radius:10px;background:#f7faff;padding:14px;font-size:11.5px;line-height:1.5;min-height:155px;}
.network-info-card h3{margin:0 0 8px;color:#0b2f63;font-size:15px;}
.network-info-card.wide{grid-column:span 2;min-height:120px;}
.network-info-card .diagram{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.network-info-card .diagram span{background:#fff;border:1px solid #dbe3ee;border-radius:8px;padding:7px 10px;}
.network-info-card .diagram b{color:#0b63c7;}

@media print{
    .offer-page{box-shadow:none;margin:0;page-break-after:always;position:relative;}
}


/* === ECHTE A4 FOOTER BALK FIX ===
   Probleem: absolute footers positioneerden t.o.v. viewport/body, niet t.o.v. A4 pagina.
   Oplossing: elke .offer-page is position:relative en footerbalken blijven binnen de pagina.
*/
.offer-page{
    position: relative !important;
    overflow: hidden !important;
}

/* normale offerte footer: binnen A4, geen brede blauwe balk */
.clean-footer{
    position: absolute !important;
    left: 11mm !important;
    right: 11mm !important;
    bottom: 7mm !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    background: transparent !important;
    color: #0b2f63 !important;
    border-top: 1px solid #dbe3ee !important;
    padding: 6px 0 0 0 !important;
    margin: 0 !important;
}

/* bijlage footerbalk: exact binnen A4 marges */
.appendix-contact-exact,
.appendix-clean-footer,
.appendix-footer{
    position: absolute !important;
    left: 11mm !important;
    right: 11mm !important;
    bottom: 7mm !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: #0b2f63 !important;
    color: #fff !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    font-size: 9.5px !important;
    z-index: 2 !important;
}

.appendix-contact-exact b,
.appendix-clean-footer div:last-child,
.appendix-footer div:last-child{
    text-align: right !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
    font-weight: 800 !important;
}

/* voorkom horizontale overflow in schermweergave */
html, body, .print-main{
    overflow-x: hidden !important;
}

@media print{
    .offer-page{
        position: relative !important;
        overflow: hidden !important;
    }
    .appendix-contact-exact,
    .appendix-clean-footer,
    .appendix-footer{
        left: 11mm !important;
        right: 11mm !important;
        width: auto !important;
    }
}


/* === DEFINITIEVE FOOTER FIX: GEEN ABSOLUTE BALK MEER ===
   De blauwe balk staat nu als normale footer binnen de A4-pagina.
   Daardoor kan hij nooit meer over de browserbreedte lopen.
*/
.offer-page{
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* normale offer footer */
.clean-footer{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
    background: transparent !important;
    color: #0b2f63 !important;
    border-top: 1px solid #dbe3ee !important;
    padding: 6px 0 0 0 !important;
}

/* alle blauwe footerbalken blijven exact binnen A4 */
.appendix-contact-exact,
.appendix-clean-footer,
.appendix-footer{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
    background: #0b2f63 !important;
    color: #fff !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    font-size: 9.5px !important;
}

/* specifiek: voorkom dat een oude regel opnieuw full-width forceert */
footer,
.clean-footer,
.appendix-contact-exact,
.appendix-clean-footer,
.appendix-footer{
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
}

.appendix-contact-exact b,
.appendix-clean-footer div:last-child,
.appendix-footer div:last-child{
    text-align: right !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
    font-weight: 800 !important;
}

html, body, .print-main{
    overflow-x: hidden !important;
}

@media print{
    .offer-page{
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .appendix-contact-exact,
    .appendix-clean-footer,
    .appendix-footer,
    .clean-footer{
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* === COMPONENTEN GROTER OP SYSTEEMOFFERTE === */
.included-components-box{
    margin-top: 14px !important;
    padding-top: 4px !important;
    padding-bottom: 16px !important;
}
.included-components-box h3{
    font-size: 15px !important;
    margin-bottom: 12px !important;
}
.included-components-columns{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 34px !important;
}
.included-component-line{
    grid-template-columns: 54px 1fr !important;
    gap: 11px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    min-height: 48px !important;
}
.included-component-line img{
    width: 48px !important;
    height: 38px !important;
    object-fit: contain !important;
}
.system-main-row{
    margin-bottom: 14px !important;
}


/* === AFBEELDING CONTRAST + SPECIFICATIE-TEKST === */
.prod-img,
.system-main-image,
.included-component-line img,
.auto-image-preview,
.config-component-card img,
.config-main-image{
    filter: contrast(1.18) saturate(1.08) brightness(1.03) !important;
}
.clean-desc,
.config-component-desc{
    color:#1f2937 !important;
}