/* ===== BUTTONS ===== */
    .btn { padding: 0.5rem 1rem; border-radius: var(--r-btn); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; cursor: pointer; border: none; transition: var(--t-base); display: inline-flex; align-items: center; gap: 0.35rem; }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-btn); }
    .btn-primary { background: var(--ice); color: var(--white); }
    .btn-primary:hover { background: var(--mid); }
    .btn-danger { background: var(--danger-bg); color: var(--danger); border: 1.5px solid var(--danger-bg); }
    .btn-danger:hover { background: var(--danger); color: var(--white); border-color: var(--danger); box-shadow: var(--sh-btn-danger); }
    .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }
    .btn-icon { padding: 0.45rem; }

    /* ===== TABLE ===== */
    .table-wrap { background: var(--white); border-radius: var(--r-card); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--sh-card); }
    table { width: 100%; border-collapse: collapse; }
    thead th { background: var(--grey); padding: 0.7rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); }
    tbody td { padding: 0.7rem 1rem; font-size: 0.84rem; color: var(--text); border-bottom: 1px solid var(--grey); vertical-align: middle; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover { background: var(--grey); }
    .td-actions { display: flex; gap: 0.3rem; }
    tr.row-clickable { cursor: pointer; }
    tr.row-clickable:hover td { background: var(--ice-bg); }

    /* ===== BADGES ===== */
    .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 600; }
    .badge-blue   { background: var(--ice-bg); color: var(--mid); }
    .badge-green  { background: var(--ok-bg); color: var(--ok-text); }
    .badge-yellow { background: var(--warn-bg); color: var(--warn-text); }
    .badge-red    { background: var(--danger-bg); color: var(--danger-text); }
    .badge-purple { background: var(--grey); color: var(--text-muted); }
    .badge-gray   { background: var(--grey); color: var(--text-muted); }
    .badge-orange { background: var(--warn-bg); color: var(--warn-text); }
    .badge-teal   { background: var(--grey); color: var(--text-muted); }

    /* ===== KANBAN ===== */
    .kanban-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
    .kanban-col { min-width: 220px; width: 220px; background: var(--grey); border-radius: var(--r-icon); border: 1px solid var(--border); padding: 0.8rem; flex-shrink: 0; }
    .kanban-col-title { font-size: 0.78rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.7rem; display: flex; align-items: center; justify-content: space-between; }
    .kanban-col-count { background: var(--border); color: var(--text-muted); border-radius: var(--r-pill); padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 600; }
    .kanban-card { background: var(--white); border-radius: var(--r-btn); border: 1px solid var(--border); padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; box-shadow: var(--sh-card); cursor: pointer; }
    .kanban-card:hover { border-color: var(--ice); box-shadow: var(--sh-hover); }
    .kanban-card-title { font-size: 0.82rem; font-weight: 600; color: var(--dark); margin-bottom: 0.3rem; }
    .kanban-card-meta { font-size: 0.73rem; color: var(--text); }        /* --text-muted op wit 2,54:1, geen AA (regel 10) */
    .kanban-card-value { font-size: 0.8rem; font-weight: 700; color: var(--text); margin-top: 0.3rem; }   /* --ice op wit 2,92:1, geen AA; --ice is accent, geen tekstkleur */
    .kanban-card-maand { font-size: 0.73rem; color: var(--text); margin-top: 2px; }
    .kanban-card-chance { margin-top: 4px; }
    .kanban-col-empty { color: var(--text-muted); font-size: 0.78rem; text-align: center; padding: 0.5rem; }

    /* ===== MODAL ===== */
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(27,42,59,0.55); z-index: 500; align-items: center; justify-content: center; padding: 1rem; }
    .modal-overlay.open { display: flex; }
    .modal { background: var(--white); border-radius: var(--r-modal); width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; box-shadow: var(--sh-hover); }
    .modal-sm { max-width: 380px; }
    .confirm-message { color: var(--text); font-size: 0.9rem; }
    /* De bevestiging staat altijd bovenop, ook boven een open drawer (z 500) of
       het factuurdetail (z 800): een delete-bevestiging moet zichtbaar zijn. */
    #modal-confirm { z-index: 900; }
    .modal-header { padding: 1.2rem 1.4rem 0.8rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--grey); position: sticky; top: 0; background: var(--white); z-index: 10; border-radius: var(--r-modal) var(--r-modal) 0 0; }
    .modal-title { font-size: 1rem; font-weight: 700; color: var(--dark); }
    .modal-close { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--text-muted); padding: 0.2rem; border-radius: var(--r-badge); transition: color 0.15s, background 0.15s; }
    .modal-close:hover { color: var(--text); background: var(--grey); }
    .modal-body { padding: 1rem 1.4rem 1.4rem; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; }
    .form-group input, .form-group select, .form-group textarea, .factuur-klant-form input { width: 100%; padding: 0.6rem 0.85rem; border: 1.5px solid var(--border); border-radius: var(--r-btn); font-family: var(--font-body); font-size: 0.85rem; color: var(--dark); background: var(--white); outline: none; transition: border-color 0.2s, background 0.2s; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus, .factuur-klant-form input:focus { border-color: var(--ice); background: var(--white); box-shadow: var(--focus-ring); }
    .form-group textarea { resize: vertical; min-height: 80px; }
    .form-group textarea.form-textarea-description { min-height: 110px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .modal-footer { padding: 0.8rem 1.4rem; display: flex; justify-content: flex-end; gap: 0.6rem; border-top: 1px solid var(--grey); }
    .footer-actions { display: flex; gap: 0.5rem; }

    /* ===== VIEW TOGGLE ===== */
    .view-toggle { display: flex; background: var(--grey); border-radius: var(--r-btn); padding: 3px; }
    .view-toggle-btn { padding: 0.35rem 0.8rem; border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; color: var(--text-muted); border-radius: var(--r-btn); transition: all 0.15s; }
    .view-toggle-btn.active { background: var(--white); color: var(--dark); box-shadow: var(--sh-card); }

    /* ===== TOAST ===== */
    .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; }
    .toast { background: var(--dark); color: var(--white); padding: 0.7rem 1.1rem; border-radius: var(--r-btn); font-size: 0.84rem; box-shadow: var(--sh-elevated); animation: slideIn 0.3s ease; max-width: 300px; }
    .toast.success { background: var(--ok-text); border-left: 3px solid var(--ok); }
    .toast.error   { background: var(--danger-text); border-left: 3px solid var(--danger); }
    @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

    /* ===== EMPTY STATE ===== */
    .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text); }   /* --text-muted haalt op wit geen AA (regel 10) */
    .empty-state-icon { display: inline-flex; color: var(--ice); margin-bottom: 0.5rem; }
    .empty-state p { font-size: 0.85rem; }
    .empty-state-cta { margin-top: 1rem; }

    /* ===== DRAWER ===== */
    .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(27,42,59,0.55); z-index: 500; }
    .drawer-overlay.open { display: block; }
    .drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 640px; max-width: 96vw; background: var(--white); display: flex; flex-direction: column; box-shadow: var(--sh-drawer); transform: translateX(100%); transition: transform 0.3s ease; overflow: hidden; }
    .drawer-overlay.open .drawer { transform: translateX(0); }
    .drawer-header { padding: 1.2rem 1.4rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--white); }
    .drawer-title { font-size: 1.05rem; font-weight: 700; color: var(--dark); }
    .drawer-subtitle { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
    .drawer-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--text-muted); padding: 0.3rem 0.5rem; border-radius: var(--r-btn); transition: color 0.15s, background 0.15s; }
    .drawer-close:hover { color: var(--text); background: var(--grey); }
    .drawer-body { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; }
    .drawer-footer { padding: 0.9rem 1.4rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background: var(--white); }
    .drawer-section { margin-bottom: 1.6rem; }
    .drawer-section-title { font-size: 0.72rem; font-weight: 700; color: var(--ice); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.9rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--border); }

    /* ===== FILE UPLOAD ===== */
    .file-upload-label { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border: 1.5px dashed var(--border); border-radius: var(--r-btn); cursor: pointer; background: var(--white); font-size: 0.83rem; color: var(--text-muted); transition: border-color 0.2s, background 0.2s; }
    .file-upload-label:hover { border-color: var(--ice); background: var(--ice-bg); color: var(--ice); }
    .file-upload-label input[type="file"] { display: none; }
    .upload-preview { margin-top: 0.4rem; }
    .blueprint-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--ice); text-decoration: none; padding: 0.3rem 0.7rem; background: var(--ice-bg); border-radius: var(--r-badge); border: 1px solid var(--ice-tint-14); transition: background 0.15s; }
    .blueprint-link:hover { background: var(--ice-bg); }

    /* ===== SCROLLBAR ===== */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-badge); }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* ===== SCORE (leads: drempel-kleur uit data) ===== */
    .score { font-weight: 700; }
    .score-high { color: var(--ok); }
    .score-mid  { color: var(--warn); }
    .score-low  { color: var(--danger); }

    /* ===== AUTOMATISATIES ===== */
    .runs-count { font-weight: 700; color: var(--ice); }

    /* ===== PIPELINE-BALK (breedte uit data, kleur per fase) ===== */
    .pipeline-bar-active { background: var(--ice); }
    .pipeline-bar-won    { background: var(--ok); }
    .pipeline-bar-lost   { background: var(--danger); }

    /* ===== DASHBOARD REMINDERS ===== */
    .followup-item-clickable { cursor: pointer; padding: 0.45rem 0.5rem; border-radius: var(--r-badge); transition: background 0.15s; }
    .followup-item-clickable:hover { background: var(--grey); }
    .followup-bar { width: 3px; min-width: 3px; height: 36px; border-radius: 2px; margin-right: 0.6rem; }
    .followup-bar-overdue  { background: var(--danger-text); }
    .followup-bar-today    { background: var(--danger); }
    .followup-bar-tomorrow { background: var(--warn); }
    .followup-bar-later    { background: var(--ice); }
    .followup-content { min-width: 0; flex: 1; }
    .followup-title { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .followup-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
    .followup-more { text-align: center; margin-top: 0.6rem; }
    .followup-more a { font-size: 0.8rem; color: var(--ice); text-decoration: none; }
    .reminder-overdue  { color: var(--danger-text); text-decoration: line-through; }
    .reminder-today    { color: var(--danger); font-weight: 600; }
    .reminder-tomorrow { color: var(--warn); font-weight: 600; }
    .reminder-soon     { color: var(--warn); }
    .reminder-later    { color: var(--ice); }

    /* ===== FACTUREN STATKAARTEN ===== */
    .stat-grid { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
    .stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .stat-card { background: var(--white); border-radius: var(--r-card); padding: 1.2rem; box-shadow: var(--sh-card); }
    .stat-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-icon); background: var(--ice-tint-10); color: var(--ice); margin-bottom: 0.6rem; }
    .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--dark); }
    .stat-value-danger { color: var(--danger); }
    .stat-card-label { font-size: 0.78rem; color: var(--text); }   /* --text-muted haalt op wit geen AA (regel 10) */

    /* ===== FACTUREN SUBTABS ===== */
    .facturen-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
    .facturen-tab { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: none; padding: 0.75rem 1.5rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: var(--font-body); }
    .facturen-tab.active { color: var(--ice); border-bottom-color: var(--ice); }

    /* ===== FACTUUR AANMAAKMODAL ===== */
    .modal-overlay-scroll { align-items: flex-start; overflow-y: auto; }
    .modal-lg { max-width: 860px; margin: auto; }
    .modal-lg .modal-body { max-height: none; }
    /* Desktop-only melding voor de factuur-aanmaak (getoond onder 768px, zie responsive.css) */
    .factuur-desktop-note { display: none; padding: 2.5rem 1.5rem; text-align: center; }
    .factuur-desktop-note [data-icon] { color: var(--ice); display: inline-flex; margin-bottom: 0.8rem; }
    .factuur-desktop-note h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; }
    .factuur-desktop-note p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1.3rem; }
    .modal-footer-split { justify-content: space-between; align-items: center; padding: 1rem 1.5rem; gap: 0.5rem; border-top-color: var(--border); }
    .factuur-form label { font-size: 0.78rem; }
    .factuur-form .form-group { margin: 0; }
    .factuur-panel { background: var(--grey); border-radius: var(--r-btn); padding: 1rem; margin-bottom: 1.2rem; }
    .factuur-panel-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--dark); margin-bottom: 0.8rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .factuur-panel-title [data-icon] { color: var(--ice); }
    .field-with-button { display: flex; gap: 0.5rem; }
    .field-with-button select { flex: 1; }
    .field-with-button .btn { white-space: nowrap; }
    .factuur-klant-form { background: var(--ice-bg); border-radius: var(--r-badge); padding: 0.8rem; margin-top: 0.5rem; border-left: 3px solid var(--ice); }
    .factuur-klant-form-title { font-weight: 600; font-size: 0.82rem; color: var(--dark); margin-bottom: 0.5rem; }
    .factuur-klant-form input { font-size: 0.82rem; padding: 0.4rem 0.6rem; }
    .factuur-klant-form > .btn { margin-top: 0.5rem; }
    .factuur-klant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .factuur-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.6rem; }
    .factuur-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.6rem; }
    .form-group-wide { grid-column: 1 / -1; }
    .factuur-lijnen { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
    .factuur-lijnen thead tr { background: var(--dark); color: var(--white); }
    .factuur-lijnen th { padding: 0.5rem 0.4rem; }
    .factuur-lijnen th:nth-child(1) { padding: 0.5rem 0.6rem; text-align: left; border-radius: var(--r-badge) 0 0 0; }
    .factuur-lijnen th:nth-child(2) { text-align: center; width: 70px; }
    .factuur-lijnen th:nth-child(3) { text-align: right; width: 120px; }
    .factuur-lijnen th:nth-child(4) { text-align: center; width: 80px; }
    .factuur-lijnen th:nth-child(5) { text-align: right; width: 110px; }
    .factuur-lijnen th:nth-child(6) { width: 40px; border-radius: 0 var(--r-badge) 0 0; }
    .factuur-lijnen + .btn { margin-top: 0.6rem; }
    .factuur-totalen-wrap { display: flex; justify-content: flex-end; margin-bottom: 1.2rem; }
    .factuur-totalen { background: var(--grey); border-radius: var(--r-btn); padding: 1rem; min-width: 280px; }
    .factuur-totalen-row { display: flex; justify-content: space-between; margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--text-muted); }
    .factuur-btw { font-size: 0.85rem; color: var(--text-muted); }
    .factuur-totalen-divider { border-top: 2px solid var(--dark); margin: 0.5rem 0; }
    .factuur-totalen-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem; color: var(--dark); }
    .factuur-lijnen tbody tr:nth-child(even) { background: var(--grey); }
    .factuur-lijnen td { padding: 0.3rem 0.4rem; }
    .factuur-lijn-input { width: 100%; font-size: 0.82rem; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: var(--r-badge); }
    .factuur-lijnen td:nth-child(2) .factuur-lijn-input { text-align: center; }
    .factuur-lijnen td:nth-child(3) .factuur-lijn-input { text-align: right; }
    .factuur-lijn-bedrag { text-align: right; font-weight: 600; }
    .factuur-lijn-actie { text-align: center; }

    /* ===== FACTUUR INKOMEND MODAL ===== */
    .modal-md { max-width: 560px; }
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .form-grid-2 .form-group { margin: 0; }
    .form-group input[readonly] { background: var(--grey); cursor: default; }

    /* ===== KNOP-VARIANTEN (handboek 5.4) ===== */
    .btn-ghost { background: transparent; color: var(--ice); border: 2px solid var(--ice); }
    .btn-ghost-white { background: transparent; color: var(--white); border: 2px solid var(--white); }
    .btn-wa { background: var(--wa); color: var(--white); }
    .btn-wa:hover { box-shadow: var(--sh-btn-wa); }
    .btn-ok { background: var(--ok); color: var(--white); }
    .btn-ok:hover { background: var(--ok-text); box-shadow: var(--sh-btn-ok); }

    /* ===== FACTUUR DETAILWEERGAVE ===== */
    .factuur-detail-overlay { display: none; position: fixed; inset: 0; background: rgba(27, 42, 59, 0.55); z-index: 800; overflow-y: auto; padding: 1.5rem; }
    .factuur-detail-overlay.open { display: block; }
    .factuur-detail-doc { max-width: 800px; margin: auto; background: var(--white); border-radius: var(--r-icon); overflow: hidden; box-shadow: var(--sh-modal); }
    .factuur-detail-actions { background: var(--dark); padding: 0.8rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
    .factuur-detail-actions .btn { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
    .factuur-detail-back { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; font-family: var(--font-body); }
    .factuur-detail-buttons { display: flex; gap: 0.5rem; }
    .factuur-detail-content { padding: 2.5rem; }

    /* ===== TABEL-ACTIES ===== */
    .row-clickable { cursor: pointer; }
    .table-actions { white-space: nowrap; }
    .icon-action { background: none; border: none; cursor: pointer; padding: 0.45rem; line-height: 0; color: var(--text); transition: color var(--t-base); }
    .icon-action-danger { color: var(--danger); }
    .icon-action:not(.icon-action-danger):hover { color: var(--ice); }

    /* ===== FACTUUR DETAILDOCUMENT (schermweergave) ===== */
    .factuur-doc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 3px solid var(--ice); }
    .factuur-doc-header-right { text-align: right; }
    .factuur-doc-logo { display: block; width: 220px; max-width: 100%; height: auto; margin-bottom: 0.5rem; }
    .factuur-doc-tagline { font-size: 0.82rem; color: var(--text); margin-bottom: 0.4rem; }
    .factuur-doc-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: var(--track-heading); color: var(--dark); }
    .factuur-doc-bedrijf { font-size: 0.82rem; color: var(--text); }
    .factuur-doc-status { margin-top: 0.2rem; }
    .factuur-doc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
    .factuur-doc-eyebrow { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 0.4rem; }
    .factuur-doc-gegevens { font-size: 0.85rem; border-collapse: collapse; width: 100%; }
    .factuur-doc-gegevens td { padding: 0.2rem 0; }
    .factuur-doc-gegevens td:first-child { color: var(--text); width: 130px; }
    .factuur-doc-klant { background: var(--ice-bg); border-radius: var(--r-btn); border-left: 4px solid var(--ice); padding: 1rem; }
    .factuur-doc-klant-label { font-size: 0.78rem; color: var(--mid); text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem; }
    .factuur-doc-klant-naam { font-weight: 700; font-size: 1rem; color: var(--dark); }
    .factuur-doc-klant-contact, .factuur-doc-klant-adres { font-size: 0.85rem; color: var(--text); }
    .factuur-doc-klant-btw, .factuur-doc-klant-email { font-size: 0.82rem; color: var(--text-muted); }
    .factuur-doc-klant-adres { margin-top: 0.3rem; }
    .factuur-doc-klant-btw { margin-top: 0.2rem; }
    .factuur-doc-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
    .factuur-doc-table thead tr { background: var(--dark); color: var(--white); }
    .factuur-doc-table th { padding: 0.7rem 0.5rem; }
    .factuur-doc-table th:first-child { padding: 0.7rem 0.8rem; text-align: left; border-radius: var(--r-badge) 0 0 var(--r-badge); }
    .factuur-doc-table th:nth-child(2) { text-align: center; width: 70px; }
    .factuur-doc-table th:nth-child(3) { text-align: right; width: 130px; }
    .factuur-doc-table th:nth-child(4) { text-align: center; width: 70px; }
    .factuur-doc-table th:last-child { padding: 0.7rem 0.8rem; text-align: right; width: 120px; border-radius: 0 var(--r-badge) var(--r-badge) 0; }
    .factuur-doc-table td { padding: 0.6rem 0.5rem; }
    .factuur-doc-table td:first-child { padding: 0.6rem 0.8rem; }
    .factuur-doc-table td:nth-child(2) { text-align: center; }
    .factuur-doc-table td:nth-child(3) { text-align: right; }
    .factuur-doc-table td:nth-child(4) { text-align: center; }
    .factuur-doc-table td:last-child { padding: 0.6rem 0.8rem; text-align: right; font-weight: 600; }
    .factuur-doc-table tbody tr:nth-child(even) { background: var(--grey); }
    .factuur-doc-totalen-wrap { display: flex; justify-content: flex-end; margin-bottom: 2rem; }
    .factuur-doc-totalen { min-width: 280px; }
    .factuur-doc-totalen-row { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 0.9rem; color: var(--text); }
    .factuur-doc-totalen-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; color: var(--dark); }
    .factuur-doc-footer { text-align: center; color: var(--text); font-size: 0.82rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }

    /* ===== FINANCIEEL OVERZICHT (toont alleen, zie CLAUDE.md sectie 10) ===== */
    .filter-row label { font-size: 0.85rem; color: var(--text); }
    .financieel-heading { margin: 0.5rem 0 0.8rem; font-size: 1.05rem; }
    .stat-card-note { font-size: 0.78rem; color: var(--text); margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
    .row-vervallen td { background: var(--danger-bg); }
    .row-vervallen .badge { white-space: nowrap; margin-left: 0.4rem; }
    /* Grafiek: de SVG bevat alleen balken en rekt op een vaste hoogte (preserveAspectRatio none,
       non-scaling stroke). Alle tekst staat als HTML eronder in een 12-koloms raster, zodat
       labels op elk schermformaat dezelfde pixelgrootte hebben als captions elders.
       Smal scherm: de kaart scrolt horizontaal. */
    .financieel-grafiek { background: var(--white); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 1rem 1rem 0.6rem; margin-bottom: 1.5rem; overflow-x: auto; }
    .fin-grafiek-binnen { min-width: 560px; }
    .fin-grafiek-balken { height: 160px; border-bottom: 1px solid var(--border); }
    .fin-grafiek-balken svg { display: block; width: 100%; height: 100%; }
    .fin-balk { fill: var(--ice); stroke: var(--ice); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .fin-grafiek-leeg { height: 160px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-ui); color: var(--text); border-bottom: 1px solid var(--border); }
    .fin-grafiek-labels { display: grid; grid-template-columns: repeat(12, 1fr); text-align: center; margin-top: 0.4rem; }
    .fin-maand { display: block; font-size: var(--fs-small); color: var(--text); }
    .fin-bedrag { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--dark); font-family: var(--font-display); min-height: 1.2em; }
    /* Meldingen: twee losse blokken, "niet meegeteld" (warn) en "deels meegeteld" (ice) */
    .fin-meldingen { background: var(--white); border-radius: var(--r-card); box-shadow: var(--sh-card); border-left: 4px solid var(--border); padding: 0.7rem 1rem; margin-top: 1.5rem; }
    .fin-meldingen-genegeerd { border-left-color: var(--warn); }
    .fin-meldingen-waarschuwing { border-left-color: var(--ice); }
    .fin-meldingen summary { cursor: pointer; font-weight: 600; font-size: var(--fs-ui); color: var(--dark); }
    .fin-meldingen-uitleg { font-size: var(--fs-small); color: var(--text); margin: 0.5rem 0; }
    .fin-meldingen ul { margin: 0; padding-left: 1.2rem; font-size: var(--fs-small); color: var(--text); }
    .fin-meldingen li { margin-bottom: 0.25rem; }

    /* ===== ICONEN (Lucide-sprite, zie js/icons.js) ===== */
    .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

    /* ===== FOCUS STATES (zichtbaar bij toetsenbordfocus) =====
       Eén ice-outline voor alles wat focus kan krijgen. De offset houdt de
       outline buiten het element, zodat hij ook rond gekleurde knoppen
       (ice/ok/danger/wa) op de achtergrond contrasteert. Muisklikken tonen hem
       niet (:focus-visible), toetsenbord wel. */
    :focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
    /* Formuliervelden houden hun eigen focus-ring (border + --focus-ring); geen dubbele outline */
    .form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible,
    .factuur-klant-form input:focus-visible, .login-field input:focus-visible { outline: none; }
    /* Tabelrijen: outline binnen de rij (table-wrap heeft overflow: hidden) plus
       dezelfde celkleur als hover, als robuust focus-signaal op elke browser. */
    tr.row-clickable:focus-visible { outline-offset: -2px; }
    tr.row-clickable:focus-visible td { background: var(--ice-bg); }

    /* ===== MICRO-INTERACTIES (fase 5, punt 4) =====
       Overlays en modals faden in bij openen; knoppen geven een indruk bij
       aanraken (op touch, zonder hover, de enige bevestiging dat je iets raakt).
       Alles achter prefers-reduced-motion. Bewust GEEN hover-lift op KPI- en
       statkaarten: die zijn niet klikbaar en zouden een actie beloven die er
       niet is. De lift blijft voorbehouden aan klikbare kanban-kaarten en
       tabelrijen (die staat elders en blijft ongemoeid). */
    @keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes panelRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .modal-overlay.open, .drawer-overlay.open, .factuur-detail-overlay.open { animation: overlayFade 180ms ease; }
    .modal-overlay.open .modal, .factuur-detail-overlay.open .factuur-detail-doc { animation: panelRise 180ms ease; }
    .btn:active, .icon-action:active { transform: scale(0.97); }

    @media (prefers-reduced-motion: reduce) {
      .modal-overlay.open, .drawer-overlay.open, .factuur-detail-overlay.open,
      .modal-overlay.open .modal, .factuur-detail-overlay.open .factuur-detail-doc { animation: none; }
      /* Geen beweging, wel een niet-bewegende bevestiging bij aanraken */
      .btn:active, .icon-action:active { transform: none; opacity: 0.85; }
    }

    /* ===== ZICHTBAARHEID =====
       Enige verberg-class van de codebase. Het enige toegestane !important:
       een tweede !important is een signaal dat de specificiteitsvolgorde niet klopt. */
    .hidden { display: none !important; }