* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f6fa; color: #2c3e50; }

/* Login */
.login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:#fff; padding:40px; border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,0.08); width:340px; }
.login-box h1 { font-size:28px; margin-bottom:8px; }
.login-box p { color:#7f8c8d; margin-bottom:20px; }
.login-box input { width:100%; padding:12px; border:1px solid #ddd; border-radius:6px; margin-bottom:12px; font-size:14px; }
.login-box button { width:100%; padding:12px; background:#3498db; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; }
.login-box button:hover { background:#2980b9; }
.error { color:#e74c3c; margin-top:8px; font-size:13px; }

/* Header */
header { background:#fff; padding:14px 24px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e1e4e8; }
.header-left { display:flex; align-items:center; gap:30px; }
.header-left h1 { font-size:20px; }
nav { display:flex; gap:4px; }
.tab { padding:8px 14px; background:transparent; border:none; cursor:pointer; border-radius:6px; font-size:14px; color:#7f8c8d; }
.tab:hover { background:#f5f6fa; }
.tab.active { background:#3498db; color:#fff; }
.btn-logout { padding:6px 12px; background:#ecf0f1; border:none; border-radius:6px; cursor:pointer; font-size:13px; }
#user-label { font-size:13px; color:#7f8c8d; margin-right:12px; }

main { padding:24px; max-width:1400px; margin:0 auto; }
.tab-content { display:none; }
.tab-content.active { display:block; }

h2 { font-size:18px; margin-bottom:16px; color:#34495e; }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; }
.stat-card { background:#fff; padding:18px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.stat-label { font-size:13px; color:#7f8c8d; margin-bottom:6px; }
.stat-value { font-size:28px; font-weight:700; color:#2c3e50; }

/* Event list */
.event-list { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.event-row { padding:12px 16px; border-bottom:1px solid #f0f1f3; display:grid; grid-template-columns:80px 30px 180px 1fr 120px 80px; gap:12px; align-items:center; cursor:pointer; transition:background 0.1s; }
.event-row:hover { background:#f8f9fa; }
.event-row:last-child { border-bottom:none; }
.event-time { font-size:12px; color:#95a5a6; font-family:monospace; }
.event-dir { font-size:14px; text-align:center; }
.event-from { font-size:13px; color:#2c3e50; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-subject { font-size:14px; color:#34495e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-cat { font-size:11px; padding:4px 8px; border-radius:4px; text-align:center; font-weight:600; }
.event-status { font-size:11px; padding:4px 8px; border-radius:4px; text-align:center; }

/* Category colors */
.cat-claim_interesse { background:#d4edda; color:#155724; }
.cat-premium_interesse { background:#cce5ff; color:#004085; }
.cat-vraag_eenvoudig { background:#fff3cd; color:#856404; }
.cat-vraag_complex { background:#ffe6cc; color:#995200; }
.cat-opt_out { background:#e2e3e5; color:#383d41; }
.cat-klacht { background:#f8d7da; color:#721c24; }
.cat-spam { background:#f5f5f5; color:#777; }
.cat-bounce, .cat-auto_reply { background:#f5f5f5; color:#777; }
.cat-anders { background:#fff; color:#aaa; border:1px solid #eee; }

/* Status colors */
.status-processed { background:#d4edda; color:#155724; }
.status-replied { background:#cce5ff; color:#004085; }
.status-escalated { background:#fff3cd; color:#856404; }
.status-pending { background:#fff; color:#aaa; border:1px solid #eee; }
.status-ignored, .status-failed { background:#f5f5f5; color:#777; }
.status-approve_requested { background:#fce4ec; color:#c2185b; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Cards (mailboxes/agents) */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.card { background:#fff; padding:18px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.card h3 { font-size:16px; margin-bottom:8px; color:#2c3e50; }
.card .meta { font-size:12px; color:#7f8c8d; }
.card .row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; }
.card .row strong { color:#34495e; }

/* Table */
.data-table { width:100%; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04); border-collapse:collapse; }
.data-table th { background:#34495e; color:#fff; padding:10px 14px; text-align:left; font-size:13px; font-weight:600; }
.data-table td { padding:10px 14px; font-size:13px; border-bottom:1px solid #f0f1f3; }
.data-table tr:hover { background:#f8f9fa; }

/* Modal */
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-box { background:#fff; padding:24px; border-radius:8px; max-width:700px; max-height:80vh; overflow-y:auto; position:relative; box-shadow:0 4px 24px rgba(0,0,0,0.15); width:90%; }
.modal-close { position:absolute; top:10px; right:14px; background:none; border:none; font-size:24px; cursor:pointer; color:#7f8c8d; }
.modal-box h3 { font-size:18px; margin-bottom:14px; }
.modal-box dl { margin-bottom:14px; }
.modal-box dt { font-size:12px; color:#7f8c8d; margin-top:8px; }
.modal-box dd { font-size:14px; color:#2c3e50; margin-bottom:4px; }
.modal-box .body { background:#f8f9fa; padding:12px; border-radius:6px; white-space:pre-wrap; font-size:13px; max-height:200px; overflow-y:auto; }
.modal-box .reply { background:#e8f5e9; padding:12px; border-radius:6px; white-space:pre-wrap; font-size:13px; }
.modal-actions { display:flex; gap:8px; margin-top:16px; }
.modal-actions button { padding:8px 16px; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; }
.btn-approve { background:#27ae60; color:#fff; }
.btn-edit { background:#3498db; color:#fff; }
.btn-ignore { background:#95a5a6; color:#fff; }

.muted { color:#7f8c8d; font-size:13px; margin-bottom:14px; }

/* Unified Inbox */
.inbox-list { border:1px solid #e0e6ed; border-radius:8px; overflow:hidden; background:#fff; }
.inbox-row {
  display:grid; grid-template-columns: 80px 170px 180px 1fr auto; gap:14px;
  padding:14px 18px; border-bottom:1px solid #f0f3f7; cursor:pointer;
  align-items:center; font-size:13px; background:#fff; transition:background .12s;
}
.inbox-row:nth-child(even) { background:#fafbfc; }
.inbox-row:hover { background:#f0f7fc !important; }
.inbox-row:last-child { border-bottom:none; }
.inbox-row:hover { background:#f8fafc; }
.inbox-row:last-child { border-bottom:none; }
.inbox-time { color:#7f8c8d; font-size:12px; white-space:nowrap; }
.inbox-mailbox { color:#3498db; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-from { color:#2c3e50; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-subject strong { color:#2c3e50; display:block; }
.inbox-preview { color:#95a5a6; font-size:12px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-tags { text-align:right; display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.inbox-tags .event-cat, .inbox-tags .event-status { font-size:11px; padding:2px 8px; border-radius:4px; }

@media (max-width:768px) {
  .inbox-row { grid-template-columns: 1fr; gap:4px; }
  .inbox-tags { text-align:left; }
}

/* Knowledge Base */
.kb-layout { display:grid; grid-template-columns: 220px 1fr; gap:20px; margin-top:16px; }
.kb-sidebar { background:#fff; border:1px solid #e0e6ed; border-radius:8px; padding:14px; height:fit-content; position:sticky; top:80px; }
.kb-side-btn {
  display:block; width:100%; text-align:left; padding:10px 12px; margin:4px 0;
  background:transparent; border:none; border-radius:6px; cursor:pointer; font-size:13px; color:#34495e;
}
.kb-side-btn:hover { background:#f4f6f8; }
.kb-side-btn.active { background:#3498db; color:#fff; font-weight:600; }
.kb-main { min-width:0; }
.kb-toolbar { display:flex; gap:12px; margin-bottom:16px; }
.kb-articles { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.kb-card { background:#fff; border:1px solid #e0e6ed; border-radius:8px; padding:16px; display:flex; flex-direction:column; }
.kb-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.kb-card-head h4 { margin:6px 0 0; font-size:15px; color:#2c3e50; }
.kb-meta { display:flex; flex-direction:column; gap:4px; align-items:flex-end; font-size:11px; color:#7f8c8d; }
.kb-scope { padding:2px 8px; border-radius:4px; font-weight:600; font-size:10px; text-transform:uppercase; }
.kb-scope-ai_context { background:#e8f4fd; color:#2980b9; }
.kb-scope-klant_zichtbaar { background:#e8f8ec; color:#27ae60; }
.kb-scope-beide { background:#fef4e8; color:#e67e22; }
.kb-domain-badge { display:inline-block; padding:3px 8px; background:#ecf0f1; color:#7f8c8d; border-radius:4px; font-size:11px; font-weight:600; }
.kb-tags { display:flex; flex-wrap:wrap; gap:4px; margin:10px 0 8px; }
.kb-tag { background:#f0f3f7; color:#34495e; padding:2px 8px; border-radius:4px; font-size:11px; }
.kb-preview { color:#7f8c8d; font-size:13px; flex:1; line-height:1.5; }
.kb-actions { display:flex; gap:6px; margin-top:12px; }
.kb-actions button { padding:6px 12px; font-size:12px; }

@media (max-width:768px) {
  .kb-layout { grid-template-columns: 1fr; }
  .kb-sidebar { position:static; }
}

/* Inbox v2 — KPI's + tabs + needs-action highlight */
.inbox-kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin:16px 0 20px; }
.inbox-kpi { background:#fff; border:1px solid #e0e6ed; border-radius:8px; padding:18px; text-align:left; transition:all .15s; }
.inbox-kpi:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); transform:translateY(-1px); }
.inbox-kpi.kpi-warning { background:linear-gradient(135deg,#fff5f5 0%,#fee 100%); border-color:#fadbd8; border-left:4px solid #e74c3c; }
.inbox-kpi.kpi-ok { background:linear-gradient(135deg,#f5fbf6 0%,#efe 100%); border-color:#d4edda; border-left:4px solid #27ae60; }
.inbox-kpi-num { font-size:36px; font-weight:700; color:#2c3e50; line-height:1; }
.inbox-kpi-label { font-size:13px; color:#34495e; font-weight:600; margin-top:6px; }
.inbox-kpi-sub { font-size:11px; color:#95a5a6; margin-top:4px; }

.inbox-tabs { display:flex; gap:6px; margin:16px 0 8px; border-bottom:1px solid #ecf0f1; }
.inbox-tab-btn { background:transparent; border:none; padding:10px 18px; cursor:pointer; font-size:14px; color:#7f8c8d; border-bottom:3px solid transparent; font-weight:500; }
.inbox-tab-btn:hover { color:#34495e; }
.inbox-tab-btn.active { color:#2c3e50; border-bottom-color:#3498db; font-weight:600; }

.inbox-row.needs-action { background:#fff8f8 !important; border-left:4px solid #e74c3c; padding-left:14px; }
.inbox-row.needs-action:nth-child(even) { background:#fef3f3 !important; }
.inbox-row.needs-action:hover { background:#fee !important; }

.inbox-status { font-size:11px; padding:4px 10px; border-radius:12px; font-weight:600; display:inline-block; line-height:1.35; max-width:100%; word-break:break-word; white-space:normal; text-align:left; }
.badge-escalate { background:#fadbd8; color:#c0392b; }
.badge-pending { background:#fef4e8; color:#e67e22; }
.badge-approve { background:#fef4e8; color:#d35400; }
.badge-replied { background:#d4edda; color:#27ae60; }
.badge-ignored { background:#ecf0f1; color:#95a5a6; }
.badge-failed { background:#fadbd8; color:#c0392b; }