/* ===== Phase 2 – Bestelbonnen, Facturatie, Klanten, Rapporten ===== */

/* Bon status chips */
.chip-draft { background: var(--color-inactive-bg); color: var(--color-inactive); }
.chip-submitted { background: #e3f2fd; color: #1565c0; }
.chip-approved,
.chip-signed { background: var(--color-success-bg); color: var(--color-success); }
.chip-rejected { background: var(--color-error-bg); color: var(--color-error); }
.chip-sent { background: #e8eaf6; color: #3949ab; }
.chip-ready { background: #fff3e0; color: #e65100; }

/* Facturatie status */
.chip-not-invoiced { background: var(--color-error-bg); color: var(--color-error); font-weight: 600; }
.chip-invoiced { background: var(--color-success-bg); color: var(--color-success); }
.chip-partial { background: #fff3e0; color: #e65100; }

/* Overdue / alert badges */
.badge-overdue { background: var(--color-error); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.badge-warning { background: #ff9800; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }

/* Wizard steps */
.wizard-steps { display: flex; gap: 0; margin-bottom: 2rem; }
.wizard-step { flex: 1; text-align: center; padding: 0.5rem; font-size: 13px; color: var(--color-text-muted); border-bottom: 3px solid var(--color-border); }
.wizard-step.active { color: var(--adc-primary); border-bottom-color: var(--adc-primary); font-weight: 600; }
.wizard-step.done { color: var(--color-success); border-bottom-color: var(--color-success); }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.tabs a, .tabs span { padding: 0.6rem 1rem; color: var(--color-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs a:hover { color: var(--color-text); }
.tabs a.active { color: var(--adc-primary); border-bottom-color: var(--adc-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Not invoiced highlight */
.row-not-invoiced { background: rgba(198, 40, 40, 0.06) !important; border-left: 3px solid var(--color-error); }
.card-not-invoiced { border-left: 4px solid var(--color-error); }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; }
.kpi-card .label { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.kpi-card .value { font-size: 1.5rem; font-weight: 700; color: var(--color-text); }
.kpi-card .value.positive { color: var(--color-success); }
.kpi-card .value.negative { color: var(--color-error); }

/* Chart placeholder */
.chart-placeholder { background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius); height: 240px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 14px; }

/* Notification cards */
.notif-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 0.75rem; background: var(--color-surface); }
.notif-card.alert { border-left: 4px solid var(--color-error); }
.notif-card .notif-body { flex: 1; }
.notif-card .notif-title { font-weight: 600; margin-bottom: 0.25rem; }
.notif-card .notif-meta { font-size: 12px; color: var(--color-text-muted); }
.notif-card .notif-action { flex-shrink: 0; }

/* Timeline */
.timeline { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.timeline-item { display: flex; align-items: center; gap: 0.5rem; font-size: 13px; }
.timeline-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.timeline-item.done .dot { background: var(--color-success); }
.timeline-item.active .dot { background: var(--adc-primary); }
.timeline-item .label { color: var(--color-text-muted); }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 2rem; color: var(--color-text-muted); }
.empty-state .icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.5; }
.empty-state p { margin-bottom: 1rem; }