/* Hudson Offerte Systeem v4 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

.hbn4-wrap { font-family:'DM Sans',Arial,sans-serif; background:#0f1117; color:#e8eaf0; border-radius:12px; overflow:hidden; min-height:400px; }
.hbn4-wrap *{ box-sizing:border-box; }

/* NAV */
.hbn4-nav{ display:flex; gap:2px; background:#161922; border-bottom:1px solid #252836; padding:0 4px; flex-wrap:wrap; }
.hbn4-nb{ padding:11px 15px; border:none; background:transparent; color:#888; font-size:13px; font-family:inherit; cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; white-space:nowrap; font-weight:500; }
.hbn4-nb:hover{ color:#e8eaf0; }
.hbn4-nb.active{ color:#4f9cf9; border-bottom-color:#4f9cf9; }

/* FORM */
.hbn4-form{ padding:16px; }
.hbn4-g2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.hbn4-g3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 10px; }
.hbn4-sec{ font-size:11px; font-weight:600; color:#4f9cf9; text-transform:uppercase; letter-spacing:.08em; margin:18px 0 8px; padding-bottom:5px; border-bottom:1px solid #252836; }
.hbn4-wrap label{ display:block; font-size:12px; color:#888; margin-bottom:3px; margin-top:10px; font-weight:500; }
.hbn4-wrap input,.hbn4-wrap select,.hbn4-wrap textarea{ width:100%; padding:8px 11px; background:#1e2130; border:1px solid #2d3348; border-radius:7px; color:#e8eaf0; font-size:13px; font-family:inherit; transition:border-color .15s; }
.hbn4-wrap input:focus,.hbn4-wrap select:focus,.hbn4-wrap textarea:focus{ outline:none; border-color:#4f9cf9; }
.hbn4-wrap input[readonly]{ background:#161922; color:#555; }
.hbn4-wrap select option{ background:#1e2130; }

/* BUTTONS */
.hbn4-btn{ padding:8px 14px; border:1px solid #2d3348; border-radius:7px; background:#1e2130; color:#e8eaf0; font-size:13px; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .15s; font-weight:500; white-space:nowrap; }
.hbn4-btn:hover{ background:#252836; border-color:#4f9cf9; }
.hbn4-btn.primary{ background:#4f9cf9; border-color:#4f9cf9; color:#fff; }
.hbn4-btn.primary:hover{ background:#3d8ae8; }
.hbn4-btn.success{ background:#1a7a3c; border-color:#1a7a3c; color:#fff; }
.hbn4-btn.success:hover{ background:#156832; }
.hbn4-btn.sm{ padding:5px 9px; font-size:12px; }
.hbn4-btn.danger{ color:#ff6b6b; }
.hbn4-btn.danger:hover{ background:#ff6b6b22; }
.hbn4-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* TAGS */
.hbn4-tag{ display:inline-flex; align-items:center; padding:1px 6px; border-radius:8px; font-size:10px; font-weight:600; margin-left:4px; }
.hbn4-tag.api{ background:#2d1f5e; color:#a78bfa; }
.hbn4-tag.auto{ background:#0f2a1a; color:#6fd98d; }

/* INFO BOXES */
.hbn4-info{ border-radius:7px; padding:9px 12px; margin-top:5px; font-size:12px; line-height:1.5; }
.hbn4-info.blue{ background:#1a2040; border:1px solid #2d4a8a; color:#a0b4d6; }
.hbn4-info.green{ background:#0f2a1a; border:1px solid #1a7a3c; color:#6fd98d; }
.hbn4-info.amber{ background:#2a1f0a; border:1px solid #8a5c00; color:#ffc14d; }
.hbn4-info.red{ background:#2a0f0f; border:1px solid #8a2020; color:#ff8080; }

/* SUGGESTIONS DROPDOWN */
.hbn4-sugg{ position:absolute; top:100%; left:0; right:0; background:#1e2130; border:1px solid #4f9cf9; border-radius:0 0 8px 8px; z-index:999; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.4); }
.hbn4-sugg-item{ padding:9px 12px; cursor:pointer; border-bottom:1px solid #252836; font-size:13px; transition:background .1s; }
.hbn4-sugg-item:hover{ background:#252836; }
.hbn4-sugg-item:last-child{ border-bottom:none; }

/* SEARCH ROW */
.hbn4-sr{ display:flex; gap:6px; position:relative; }
.hbn4-sr input{ flex:1; }

/* ACCESSOIRES */
.hbn4-acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:6px; }
.hbn4-acc-item{ display:flex; align-items:center; gap:8px; background:#161922; border:1px solid #252836; border-radius:7px; padding:9px 12px; cursor:pointer; transition:all .15s; }
.hbn4-acc-item:hover{ border-color:#4f9cf9; }
.hbn4-acc-item.sel{ border-color:#4f9cf9; background:#1a2040; }
.hbn4-acc-chk{ width:17px; height:17px; border:1.5px solid #444; border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; transition:all .15s; }
.hbn4-acc-item.sel .hbn4-acc-chk{ background:#4f9cf9; border-color:#4f9cf9; color:#fff; }
.hbn4-acc-name{ font-size:13px; flex:1; }
.hbn4-acc-price{ font-size:12px; color:#4f9cf9; font-family:'DM Mono',monospace; }

/* INRUIL */
.hbn4-inruil-hdr{ display:flex; align-items:center; gap:10px; padding:11px 14px; background:#161922; border:1px solid #252836; border-radius:10px; cursor:pointer; transition:all .15s; user-select:none; }
.hbn4-inruil-hdr:hover{ border-color:#4f9cf9; }
.hbn4-inruil-hdr.open{ border-color:#4f9cf9; background:#1a2040; border-radius:10px 10px 0 0; }
.hbn4-toggle-box{ width:19px; height:19px; border:1.5px solid #444; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:11px; transition:all .15s; flex-shrink:0; }
.hbn4-inruil-hdr.open .hbn4-toggle-box{ background:#4f9cf9; border-color:#4f9cf9; color:#fff; }
.hbn4-inruil-body{ border:1px solid #4f9cf9; border-top:none; border-radius:0 0 10px 10px; padding:14px; background:#1a1d29; }

/* PRIJS SAMENVATTING */
.hbn4-psum{ background:#161922; border:1px solid #252836; border-radius:9px; padding:14px; }
.hbn4-pr{ display:flex; justify-content:space-between; padding:4px 0; font-size:13px; border-bottom:1px solid #1e2130; }
.hbn4-pr:last-child{ border-bottom:none; }
.hbn4-pr.sub{ color:#666; font-size:12px; }
.hbn4-pr.total{ font-weight:600; font-size:15px; color:#4f9cf9; border-top:1px solid #2d3348; padding-top:9px; margin-top:4px; border-bottom:none; }
.hbn4-pr.restant{ font-weight:600; color:#6fd98d; }

/* TCO */
.hbn4-tco{ background:#0f2a1a; border:1px solid #1a7a3c; border-radius:9px; padding:14px; margin-top:10px; }
.hbn4-tcotbl{ width:100%; font-size:12px; border-collapse:collapse; margin:8px 0; }
.hbn4-tcotbl th{ background:#1F4E79; color:#fff; padding:5px 8px; text-align:left; }
.hbn4-tcotbl td{ padding:5px 8px; border-bottom:1px solid #1a2a1a; }
.hbn4-tcotbl tr:nth-child(even) td{ background:rgba(255,255,255,.02); }
.hbn4-tco-tot td{ background:#1a7a3c!important; color:#fff; font-weight:600; }
.hbn4-tco-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.hbn4-tco-stat{ background:#161922; border-radius:7px; padding:9px; text-align:center; }
.hbn4-tco-stat-n{ font-size:17px; font-weight:700; color:#6fd98d; }
.hbn4-tco-stat-l{ font-size:10px; color:#888; margin-top:2px; }

/* STATS */
.hbn4-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px 16px; border-bottom:1px solid #252836; }
.hbn4-stat{ background:#161922; border-radius:9px; padding:12px; text-align:center; border:1px solid #252836; }
.hbn4-stat-n{ font-size:20px; font-weight:700; color:#4f9cf9; }
.hbn4-stat-l{ font-size:11px; color:#888; margin-top:2px; }

/* LEADS TABLE */
.hbn4-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.hbn4-tbl th{ padding:9px 12px; text-align:left; font-size:11px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #252836; }
.hbn4-tbl td{ padding:9px 12px; border-bottom:1px solid #1e2130; vertical-align:middle; }
.hbn4-tbl tr:hover td{ background:#161922; }
.hbn4-badge{ display:inline-block; padding:2px 7px; border-radius:10px; font-size:11px; font-weight:600; }
.hbn4-b-nieuw{ background:#1a2040; color:#4f9cf9; }
.hbn4-b-offerte{ background:#2a1f0a; color:#ffc14d; }
.hbn4-b-order{ background:#0f2a1a; color:#6fd98d; }
.hbn4-b-verloren{ background:#2a0f0f; color:#ff8080; }
.hbn4-b-beh{ background:#2d1f5e; color:#a78bfa; }

/* ACTIONS & MESSAGES */
.hbn4-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.hbn4-msg{ font-size:13px; padding:9px 12px; border-radius:7px; margin-top:8px; }
.hbn4-msg.ok{ background:#0f2a1a; color:#6fd98d; border:1px solid #1a7a3c; }
.hbn4-msg.err{ background:#2a0f0f; color:#ff8080; border:1px solid #8a2020; }

/* PREVIEW */
.hbn4-preview{ padding:16px; }
.hbn4-doc{ background:#fff; color:#111; border-radius:10px; padding:36px 40px; max-width:720px; margin:0 auto; font-family:Arial,sans-serif; font-size:12px; line-height:1.6; box-shadow:0 8px 40px rgba(0,0,0,.4); }

/* TABS */
.hbn4-tab{ display:none; }
.hbn4-tab.active{ display:block; }

/* RESPONSIVE */
@media(max-width:700px){
  .hbn4-g2{ grid-template-columns:1fr; }
  .hbn4-g3{ grid-template-columns:1fr; }
  .hbn4-acc-grid{ grid-template-columns:1fr; }
  .hbn4-stats{ grid-template-columns:1fr 1fr; }
  .hbn4-tco-stats{ grid-template-columns:1fr 1fr; }
  .hbn4-doc{ padding:20px 16px; }
}

/* PRINT */
@media print{
  .hbn4-wrap{ background:#fff!important; }
  .hbn4-nav,.hbn4-actions{ display:none!important; }
}


/* ═══ CONTRAST FIXES — licht op donker, donker op licht ═══════════════════ */

/* TCO paneel: donkere achtergrond — witte tekst, witte inputs */
.hbn4-tco {
    background: #1a1f2e;
    border-radius: 8px;
    padding: 16px;
    color: #ffffff !important;
}
.hbn4-tco label {
    color: #e0e0e0 !important;
}
.hbn4-tco input,
.hbn4-tco select {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #666 !important;
}

/* Alle form inputs: altijd wit achtergrond, donkere tekst */
.hbn4-form input[type="text"],
.hbn4-form input[type="email"],
.hbn4-form input[type="tel"],
.hbn4-form input[type="number"],
.hbn4-form input[type="date"],
.hbn4-form select,
.hbn4-form textarea,
#hbn4-root input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
#hbn4-root select,
#hbn4-root textarea {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #c0c0c0 !important;
}

/* Readonly/auto-filled fields: lichtgrijs achtergrond, donkere tekst */
#hbn4-root input[readonly] {
    background-color: #f0f0f0 !important;
    color: #333333 !important;
}

/* Prijsoverzicht (donkere achtergrond) */
.hbn4-psum {
    background: #1a1f2e;
    border-radius: 8px;
    padding: 14px;
    color: #ffffff;
}
.hbn4-pr { color: #e0e0e0; }
.hbn4-pr.total { color: #ffffff; font-size: 16px; }
.hbn4-pr.restant { color: #6fd98d; }

/* Leads tabel */
.hbn4-tbl th { background: #1F4E79; color: #ffffff; }
.hbn4-tbl td { background: #ffffff; color: #1a1a1a; }
.hbn4-tbl tr:nth-child(even) td { background: #f5f5f5; }

/* Knoppen — altijd leesbaar */
.hbn4-btn { color: #ffffff !important; }
.hbn4-btn.sm { font-size: 12px; }

/* Accessoires grid */
.hbn4-acc-item {
    background: #fff;
    border: 1px solid #ddd;
    color: #1a1a1a;
}
.hbn4-acc-item.sel {
    background: #e8f4e8;
    border-color: #6DBE45;
    color: #1a1a1a;
}

/* Info boxes */
.hbn4-info.blue  { background: #e3f2fd; color: #0d47a1; border-left: 3px solid #1E6FD6; }
.hbn4-info.green { background: #e8f5e9; color: #1b5e20; border-left: 3px solid #6DBE45; }
.hbn4-info.amber { background: #fff8e1; color: #e65100; border-left: 3px solid #ffa000; }

/* Stats blokken */
.hbn4-stat { background: #1a1f2e; color: #ffffff; }
.hbn4-stat-n { color: #6fd98d; }
.hbn4-stat-l { color: #aaaaaa; }

/* Navigatie tabs */
.hbn4-nav { background: #111827; }
.hbn4-nb { color: #cccccc !important; background: transparent; border: none; }
.hbn4-nb.active { color: #ffffff !important; border-bottom: 2px solid #1E6FD6; }

/* Sectie headers */
.hbn4-sec { color: #1E6FD6; background: transparent; }

/* Badge */
.hbn4-b-nieuw    { background: #BDD7EE; color: #1a1a1a; }
.hbn4-b-offerte  { background: #FFF2CC; color: #1a1a1a; }
.hbn4-b-order    { background: #E2EFDA; color: #1a1a1a; }
.hbn4-b-verloren { background: #FFE0E0; color: #1a1a1a; }
.hbn4-b-beh      { background: #ffe8cc; color: #1a1a1a; }