/* Clean layout */
:root{--brand:#0D71B5;--line:#e9eef5;--muted:#6b7280}
*{box-sizing:border-box}
.wb-root{max-width:1100px;margin:18px auto;padding:0 12px}
.wb-form{max-width:980px;margin:24px auto;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.05)}
.wb-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.wb-logo{height:42px}
.wb-hdr-actions{display:flex;gap:8px;align-items:center}
.wb-btn{display:inline-block;padding:10px 14px;border:1px solid #cfd7e6;border-radius:12px;background:#fff;color:#0b1220;text-decoration:none;cursor:pointer;font-weight:600}
.wb-btn:hover{filter:brightness(.98)}
.wb-btn.wb-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.wb-btn.wb-ghost{background:#fff}
.wb-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;margin:10px 0}
.wb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wb-card label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.wb-card input,.wb-card select,.wb-card textarea{width:100%;padding:10px;border:1px solid #d7deea;border-radius:10px;background:#fff}
.wb-row{display:flex;gap:8px;align-items:center}
.wb-new-klant{border:1px dashed #cfd7e6;border-radius:12px;padding:10px;background:#fafafa;margin-top:8px}
.wb-note{font-size:12px;color:var(--muted);margin-top:6px}
.wb-foot{display:flex;justify-content:flex-end;margin-top:10px}

/* Board */
.wb-hbar{display:flex;justify-content:space-between;align-items:center;margin:8px 0 14px 0;gap:12px}
.wb-chips{display:flex;gap:8px;flex-wrap:wrap}
.wb-chip{display:inline-block;padding:4px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600;color:#333}
.wb-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:12px 0}
.wb-col{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04);display:flex;flex-direction:column}
.wb-col-head{padding:10px 12px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fafcff)}
.wb-col-body{padding:10px;display:flex;flex-direction:column;gap:8px}
.wb-card-mini{border:0;border-radius:12px;padding:10px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.wb-card-mini:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.wb-mini-top{display:flex;justify-content:space-between;color:#667085;font-size:12px;margin-bottom:4px}
.wb-mini-title{font-weight:700}
.wb-linkcard{display:block;color:inherit;text-decoration:none}

/* Table */
.wb-card .wb-table{width:100%;border-collapse:separate;border-spacing:0}
.wb-table thead th{background:#fff;border-bottom:1px solid var(--line);text-align:left;padding:10px;font-weight:700}
.wb-table td{padding:10px;border-bottom:1px solid var(--line)}
.wb-table tr:hover td{background:#fafbfc}

/* Klanten board (1 kolom) */
.wb-klanten-1col{grid-template-columns:1fr}

/* Print */
@media print{
  .wb-foot, .wb-hdr-actions a.wb-btn{display:none !important}
  .wb-form{border:none;box-shadow:none;margin:0;padding:0}
}


/* v2.0.2 – kleinere headerknoppen */
.wb-hdr-actions .wb-btn{padding:6px 10px; font-size:12px; border-radius:10px}
.wb-logo{height:36px}


/* v2.0.4 — modal + polish */
.wb-modal{position:fixed;inset:0;z-index:1000}
.wb-modal-backdrop{position:absolute;inset:0;background:rgba(11,18,32,.45);backdrop-filter:saturate(120%) blur(1px)}
.wb-modal-card{position:absolute;left:50%;top:10%;transform:translateX(-50%);width:min(900px,calc(100% - 24px));background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.wb-modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.wb-modal-body{padding:12px 14px}
.wb-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.wb-klant-link{color:#0b1220}
.wb-klant-link:hover{opacity:.8}


/* === Materiaal (herhaalbare rijen) === */
.wb-mat-row .button.wb-remove-mat { min-width: 32px; }
@media print {
  #wb_add_mat_row, .wb-remove-mat { display: none !important; }
  .wb-table th, .wb-table td { border: 1px solid #ccc; }
}


/* ===== Bijlagen & Foto's grid ===== */
.wb-files-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wb-files-grid .wb-file { border: 1px solid #e5e7eb; padding: 8px; border-radius: 8px; background:#fff; }
.wb-files-grid img { max-width: 100%; height: auto; display:block; }
.wb-files-grid figcaption { font-size: 12px; color: #475569; margin-top: 6px; word-break: break-word; }
.wb-file-doc a { text-decoration: none; }

@media print {
  .wb-files-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .wb-files-grid .wb-file { break-inside: avoid; page-break-inside: avoid; }
  .wb-files-grid img { max-height: 80mm; object-fit: contain; }
}


/* ===== Overview: mini attachments indicator ===== */
.wb-mini-attachments { display:flex; align-items:center; gap:6px; margin:6px 0 0; }
.wb-mini-attachments img { width:28px; height:28px; object-fit:cover; border-radius:4px; border:1px solid #e5e7eb; }
.wb-mini-attcount { font-size:12px; color:#475569; padding:2px 6px; border:1px solid #e5e7eb; border-radius:6px; }

/* Delete button style (reuse existing button classes if present) */
.wb-btn.wb-danger { background:#ef4444; color:#fff; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; }
.wb-btn.wb-danger:hover { background:#dc2626; }

@media print {
  .wb-btn.wb-danger { display:none !important; }
}

/* Login card styles */
.wb-card{background:#fff;padding:16px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);} .wb-btn{display:inline-block;padding:8px 14px;border-radius:10px;text-decoration:none;border:1px solid #ddd}

/* Lost password link spacing */
.wb-card a { text-decoration: none; }