/* pipeline-portal - premium command-center (licht & premium). Mobile-first. */

:root {
    --bg:#f5f6f5; --card:#ffffff; --inset:#f1f3f2; --line:#e6e9e7;
    --ink:#16201a; --ink2:#5a655e; --ink3:#8a948d;
    --green:#11331f; --green-h:#0c2517; --green-accent:#207a3c;

    --busy:#3b5bdb;  --busy-bg:#eef1fe;
    --wait:#b8730a;  --wait-bg:#fff4e3;
    --slate:#5a655e; --slate-bg:#eef1f0;
    --idee:#7048e8;  --idee-bg:#f3effe;
    --fout:#d63a3a;  --fout-bg:#fdeceb;
    --live:#1f9d55;  --live-bg:#e7f6ec;

    --shadow:0 1px 2px rgba(16,32,26,.04), 0 6px 20px rgba(16,32,26,.06);
    --shadow-sm:0 1px 2px rgba(16,32,26,.05);
    --radius:16px;
    font-size:16px;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
    background:var(--bg); color:var(--ink);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased; line-height:1.45;
}
.ico { width:18px; height:18px; }

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* Topbar */
.topbar { position:sticky; top:0; z-index:20; background:#fff; border-top:3px solid var(--green); border-bottom:1px solid var(--line); }
.topbar-in { max-width:1120px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.brand-mark { width:18px; height:18px; border-radius:6px; background:linear-gradient(135deg, var(--green-accent), var(--green)); flex:none; box-shadow:var(--shadow-sm); }
.brand-name { font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.sys { display:flex; align-items:center; gap:10px; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--inset); color:var(--ink2); white-space:nowrap; }
.pdot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.pill--ok { background:var(--live-bg); color:var(--live); }
.pill--ok .pdot { animation:pulse 2s ease-in-out infinite; }
.pill--busy { background:var(--busy-bg); color:var(--busy); }
.pill--idle { background:var(--inset); color:var(--ink3); }
.pill--fout { background:var(--fout-bg); color:var(--fout); }
.ts { font-size:.78rem; color:var(--ink3); white-space:nowrap; }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; color:var(--ink2); text-decoration:none; }
.iconbtn:hover { background:var(--inset); color:var(--ink); }

/* Banner */
.banner { display:flex; align-items:center; gap:10px; width:calc(100% - 32px); max-width:1120px; margin:12px auto 0; padding:12px 16px; border-radius:12px; font-size:.9rem; font-weight:500; }
.banner .ico { width:18px; height:18px; flex:none; }
.banner--warn { background:var(--wait-bg); color:var(--wait); }

.wrap { max-width:1120px; margin:0 auto; padding:24px 20px 48px; }

/* Section heads */
.section-title { font-size:1.4rem; font-weight:700; letter-spacing:-.02em; margin:0; color:var(--ink); }
.action-head { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.count { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 9px; border-radius:999px; font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums; }
.count--wait { background:var(--wait-bg); color:var(--wait); }
.count--ok { background:var(--live-bg); color:var(--live); }
.section-head-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.section-count { font-size:.85rem; font-weight:600; color:var(--ink3); background:var(--inset); border-radius:999px; padding:2px 9px; }

/* Actie nodig */
.action { margin-bottom:34px; }
.action-sub { margin:2px 0 14px; color:var(--ink2); font-size:.95rem; }
.calm { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:34px 20px; margin-top:8px; background:linear-gradient(180deg, var(--live-bg), #fff 70%); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.calm-ico { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--live); box-shadow:var(--shadow-sm); }
.calm-ico .ico { width:24px; height:24px; }
.calm-text { font-size:1.05rem; font-weight:600; color:var(--ink); }
.calm-sub { font-size:.82rem; color:var(--ink3); }

.action-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.acard { display:flex; flex-direction:column; gap:10px; padding:16px; background:var(--card); border:1px solid var(--line); border-left-width:4px; border-radius:14px; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--ink); transition:box-shadow .15s ease, transform .15s ease; }
.acard:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.acard--fout  { border-left-color:var(--fout); }
.acard--bezig { border-left-color:var(--busy); }
.acard--wait  { border-left-color:var(--wait); }
.acard-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.acard-age { margin-left:auto; font-size:.78rem; color:var(--ink3); }
.acard-title { font-size:.98rem; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.acard-cta { display:inline-flex; align-items:center; gap:6px; margin-top:2px; font-size:.9rem; font-weight:600; color:var(--green-accent); }
.acard-cta .ico { width:15px; height:15px; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:600; padding:3px 9px; border-radius:999px; line-height:1.3; white-space:nowrap; }
.badge--app   { background:var(--inset); color:var(--ink2); }
.badge--fout  { background:var(--fout-bg); color:var(--fout); }
.badge--bezig { background:var(--busy-bg); color:var(--busy); }
.badge--wait  { background:var(--wait-bg); color:var(--wait); }

/* Projecten */
.project-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.project { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px; display:flex; flex-direction:column; gap:14px; }
.project--attention { box-shadow:0 0 0 1px #f1ddbf inset, var(--shadow-sm); }
.project-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.project-name { font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.health { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--inset); color:var(--ink3); }
.hdot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.health--ok { background:var(--live-bg); color:var(--live); }
.health--ok .hdot { animation:pulse 2s ease-in-out infinite; }
.health--busy { background:var(--busy-bg); color:var(--busy); }
.health--idle { background:var(--inset); color:var(--ink3); }
.health--fout { background:var(--fout-bg); color:var(--fout); }

.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.stat { display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 6px; background:var(--inset); border-radius:10px; text-align:center; }
.stat-n { font-size:1.2rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; color:var(--ink); }
.stat-l { font-size:.75rem; color:var(--ink3); font-weight:500; line-height:1.15; }
.stat--bezig .stat-n    { color:var(--busy); }
.stat--wait .stat-n     { color:var(--wait); }
.stat--wachtrij .stat-n { color:var(--slate); }
.stat--idee .stat-n     { color:var(--idee); }

.project-foot { display:flex; flex-direction:column; gap:3px; }
.nowline { font-size:.85rem; color:var(--ink2); font-weight:500; }
.nowline--live { color:var(--busy); }
.lastact { font-size:.78rem; color:var(--ink3); }
.project-err { display:flex; align-items:center; gap:8px; color:var(--fout); background:var(--fout-bg); padding:12px; border-radius:10px; font-size:.88rem; }
.project-err .ico { width:16px; height:16px; flex:none; }

/* Footer */
.foot { margin-top:32px; text-align:center; }
.foot p { margin:0 auto; max-width:680px; color:var(--ink3); font-size:.8rem; line-height:1.6; }

/* Login */
.login-wrap { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login { width:min(380px, 92vw); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:28px 24px; display:flex; flex-direction:column; gap:14px; }
.login-mark { width:34px; height:34px; border-radius:10px; margin:0 auto 2px; background:linear-gradient(135deg, var(--green-accent), var(--green)); box-shadow:var(--shadow-sm); }
.login-h { margin:0; text-align:center; font-size:1.4rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.login-sub { margin:0 0 8px; text-align:center; font-size:.85rem; color:var(--ink3); }
.login-err { margin:0; background:var(--fout-bg); color:var(--fout); padding:10px 12px; border-radius:10px; font-size:.85rem; text-align:center; }
.login-input { font-size:1rem; padding:12px 14px; min-height:46px; border:1px solid var(--line); border-radius:11px; background:var(--inset); color:var(--ink); }
.login-input:focus { outline:2px solid var(--green-accent); outline-offset:1px; border-color:transparent; background:#fff; }
.login-btn { font-size:1rem; font-weight:600; padding:13px 16px; min-height:46px; border:none; border-radius:11px; background:var(--green); color:#fff; cursor:pointer; }
.login-btn:hover { background:var(--green-h); }

/* Desktop */
@media (min-width:680px) {
    .action-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1000px) {
    .action-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:620px) {
    .project-grid { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
}

/* Compact mobiel: header afslanken (wordmark + Pijplijn-pill + iconen) */
@media (max-width:560px) {
    .wrap { padding:16px 14px 36px; }
    .topbar-in { padding:11px 14px; }
    .sys { gap:6px; }
    .ts { display:none; }
    .sys .pill:first-of-type { display:none; }
    .section-title { font-size:1.25rem; }
}