/* ============================================================
   ProBuild - Projectcontacten & Onderaannemers (modules/project_contacten.php)
   Geëxtraheerd uit de vroegere inline <style> van dit bestand.
   Licht/donker thema via [data-theme] op <html>, standaard licht.
   ============================================================ */

    :root {
        --primary: #2563eb;
        --danger: #e74c3c;
        --success: #2ecc71;
        --info: #3498db;
        --bg: #0f0f0f;
        --card: #1a1d22;
        --border: #2d323d;
        --text: #ecf0f1;
        --dim: #888;
        --label: #c9d0d6;
        --field-bg: #0a0b0d;
        --field-border: #3e4451;
        --field-text: #fff;
        --ghost-bg: rgba(255,255,255,0.05);
        --ghost-border: #444;
        --panel-bg: rgba(255,255,255,0.04);
        --panel-border: #333;
        --panel-soft: #9ca7b2;
    }
    :root[data-theme="light"] {
        --bg: #f5f7fa;
        --card: #ffffff;
        --border: #d7dde5;
        --text: #1f2937;
        --dim: #6b7280;
        --label: #475569;
        --field-bg: #ffffff;
        --field-border: #d7dde5;
        --field-text: #1f2937;
        --ghost-bg: rgba(15,23,42,0.03);
        --ghost-border: #d7dde5;
        --panel-bg: rgba(15,23,42,0.03);
        --panel-border: #d7dde5;
        --panel-soft: #64748b;
    }
    * { box-sizing: border-box; }
    body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; }
    .main-container { padding: 26px 20px 38px; max-width: 1320px; margin: 0 auto; }
    .toolbar, .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 22px; }
    .toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
    .toolbar h2 { margin:0; font-size: 1.5rem; }
    .header-links { display:flex; gap:10px; flex-wrap:wrap; }
    .btn { min-height: 46px; padding: 11px 16px; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; color: #fff; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
    .btn:hover { transform: translateY(-1px); }
    .btn-ghost { background: var(--ghost-bg); border: 1px solid var(--ghost-border); color: var(--text); }
    .btn-blue { background: var(--info); }
    .btn-danger { background: var(--danger); }
    .theme-toggle { min-width: 150px; }
    .grid { display:grid; grid-template-columns: 360px 1fr; gap:18px; margin-bottom:22px; }
    .grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
    .grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; }
    .full { grid-column: 1 / -1; }
    label { display:block; margin-bottom:8px; color: var(--label); font-size: .95rem; font-weight: 600; }
    input, textarea, select { width:100%; min-height:48px; padding:12px 14px; background: var(--field-bg); border:1px solid var(--field-border); color: var(--field-text); border-radius:10px; font-size:16px; }
    textarea { min-height:110px; resize:vertical; }
    .message { padding:15px; border-radius:10px; margin-bottom:20px; border:1px solid transparent; }
    .message.success { background: rgba(46,204,113,0.1); color:#2ecc71; border-color:#2ecc71; }
    .message.error { background: rgba(231,76,60,0.1); color:#ffb0a7; border-color:#e74c3c; }
    .message.warning { background: rgba(241,196,15,0.1); color:#f8e6a0; border-color:#f1c40f; }
    .quick-strip { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:18px; }
    .quick-pill { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius:12px; padding:12px 14px; }
    .quick-pill strong { display:block; margin-bottom:4px; }
    .quick-pill span { color: var(--panel-soft); font-size: .86rem; }
    .table-wrap { overflow-x:auto; }
    table { width:100%; border-collapse: collapse; }
    th, td { padding: 12px 10px; border-bottom: 1px solid var(--panel-border); text-align:left; vertical-align: top; }
    th { color: var(--label); }
    .contact-badge { display:inline-flex; align-items:center; gap:8px; padding: 8px 10px; border-radius:999px; background: var(--panel-bg); border: 1px solid var(--panel-border); }
    .contact-badge.inactive { opacity: .65; }
    .meta-box { background: var(--panel-bg); border:1px solid var(--panel-border); border-radius:12px; padding:14px; color: var(--panel-soft); line-height:1.55; }
    .row-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .section-title h3 { margin:0; }
    .helper { color: var(--panel-soft); font-size: .88rem; margin-top: 6px; }
    .money { white-space: nowrap; }
    .tab-nav { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
    .tab-btn { background: var(--ghost-bg); border:1px solid var(--ghost-border); color: var(--text); padding: 12px 16px; border-radius: 12px; font-weight: 700; cursor: pointer; }
    .tab-btn.active { background: rgba(37, 99, 235, 0.16); border-color: rgba(37, 99, 235, 0.45); color: var(--text); }
    .tab-panel { display:none; }
    .tab-panel.active { display:block; }
    .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display:none; align-items:center; justify-content:center; padding:20px; z-index: 1000; }
    .modal-overlay.open { display:flex; }
    .modal-card { width:min(540px, 100%); background: var(--card); border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
    .modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
    .modal-head h3 { margin:0; }
    .option-list { display:grid; gap:10px; margin-top:12px; }
    .option-card { border:1px solid var(--border); border-radius:14px; padding:14px 16px; background: var(--panel-bg); display:flex; align-items:flex-start; gap:10px; }
    .option-card input { margin-top:4px; }
    .option-card strong { display:block; margin-bottom:4px; }
    .warning-inline { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(241, 196, 15, 0.12); border: 1px solid rgba(241, 196, 15, 0.35); color: var(--text); }
    .checkbox-list { display:grid; gap:12px; margin-top:16px; }
    .checkbox-card { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background: var(--panel-bg); }
    .checkbox-card input { width:20px; min-height:20px; margin-top:2px; }
    .status-pill { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; font-size:.84rem; font-weight:700; border:1px solid transparent; }
    .status-pill.linked { background: rgba(46, 204, 113, 0.12); border-color: rgba(46, 204, 113, 0.35); color: #2ecc71; }
    .status-pill.matched { background: rgba(52, 152, 219, 0.12); border-color: rgba(52, 152, 219, 0.35); color: #6dc0ff; }
    .status-pill.unlinked { background: rgba(241, 196, 15, 0.12); border-color: rgba(241, 196, 15, 0.35); color: #f8e6a0; }
    .supplier-preview { margin-top: 14px; }
    .supplier-preview strong { display:block; margin-bottom:6px; color: var(--text); }
    .supplier-preview .dim-line { color: var(--panel-soft); margin-top:4px; }
    .inline-form { display:inline; }
    .inline-form .btn { min-height:40px; padding:9px 12px; }
    .table-muted { color: var(--dim); }
    .table-search { position: relative; max-width: 360px; margin-bottom: 14px; }
    .table-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
    .table-search input { padding-left: 40px; min-height: 44px; }
    .table-search-empty td { color: var(--dim); text-align: center; font-style: italic; }
    @media (max-width: 1080px) { .grid, .grid-2, .grid-3 { grid-template-columns: 1fr; } }