/* pipeline-portal - mobile-first controlepaneel (prototype). */

:root {
    --bg:#f4f5f7; --card:#ffffff; --ink:#1c2430; --muted:#6b7686; --line:#e6e9ee;
    --busy:#2563eb;   --busy-bg:#e8f0fe;
    --wait:#b8730a;   --wait-bg:#fff4e3;
    --ok:#0e7a1c;     --ok-bg:#e7f6e9;
    --idea:#76808e;   --idea-bg:#eef1f4;
    --blocked:#c92a2a;--blocked-bg:#fdeaea;
    --shadow:0 1px 3px rgba(20,30,50,.08), 0 1px 2px rgba(20,30,50,.05);
    font-size:16px;
}

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

/* Topbar */
.topbar { position:sticky; top:0; z-index:10; background:#11331f; color:#fff; box-shadow:var(--shadow); }
.topbar-in { max-width:760px; margin:0 auto; padding:14px 18px; display:flex; align-items:baseline; justify-content:space-between; }
.topbar h1 { font-size:1.15rem; margin:0; letter-spacing:.2px; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.ts { font-size:.8rem; color:#bfe0c9; }
.logout { font-size:.8rem; color:#bfe0c9; text-decoration:none; border-bottom:1px solid rgba(191,224,201,.4); padding-bottom:1px; }
.logout:active { color:#fff; }

.wrap { max-width:760px; margin:0 auto; padding:16px 14px 40px; }

/* Hero: wacht op jou */
.hero { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px; margin-bottom:18px; }
.hero-h { font-size:.85rem; margin:0 0 12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.calm { font-size:1rem; color:var(--ok); background:var(--ok-bg); border-radius:12px; padding:18px 16px; text-align:center; }

.queue { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.qitem { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.qlink { display:flex; flex-direction:column; gap:7px; padding:14px; min-height:44px; text-decoration:none; color:var(--ink); background:var(--card); }
.qlink:active { background:#fafbfc; }
.qtop { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.qtitle { font-size:.95rem; font-weight:600; }
.qitem--on-test     { border-left:4px solid var(--wait); }
.qitem--needs-input { border-left:4px solid var(--busy); }
.qitem--blocked     { border-left:4px solid var(--blocked); }

/* Badges */
.badge { display:inline-block; font-size:.78rem; font-weight:600; padding:4px 9px; border-radius:999px; line-height:1.2; }
.badge--app         { background:#eef1f4; color:#46505e; }
.badge--on-test     { background:var(--wait-bg);    color:var(--wait); }
.badge--needs-input { background:var(--busy-bg);    color:var(--busy); }
.badge--blocked     { background:var(--blocked-bg); color:var(--blocked); }

/* Per-app */
.sec-h { font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin:0 0 10px 4px; }
.apps { display:flex; flex-direction:column; gap:14px; }
.appcard { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:14px; }
.appcard-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.appname { font-size:1.05rem; font-weight:700; }
.live { font-size:.78rem; padding:3px 9px; border-radius:999px; }
.live--unknown { background:#eef1f4; color:#8a93a0; }

.strip { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:.85rem; padding:7px 11px; border-radius:10px; background:#f3f5f8; color:#46505e; }
.chip b { font-weight:700; }
.chip--busy   { background:var(--busy-bg); color:var(--busy); }
.chip--wait   { background:var(--wait-bg); color:var(--wait); }
.chip--queued { background:#eef1f4; color:#46505e; }
.chip--idea   { background:var(--idea-bg); color:var(--idea); }

.mini { list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.mini a { display:flex; align-items:center; gap:9px; padding:10px 6px; min-height:44px; text-decoration:none; color:var(--ink); font-size:.92rem; border-radius:8px; }
.mini a:active { background:#fafbfc; }
.mini-t { flex:1 1 auto; }
.mini-act { margin-left:auto; flex:none; font-size:.8rem; color:var(--muted); }
.dot { width:9px; height:9px; border-radius:50%; flex:none; background:var(--muted); }
.dot--on-test     { background:var(--wait); }
.dot--needs-input { background:var(--busy); }
.dot--blocked     { background:var(--blocked); }

.err { background:var(--blocked-bg); color:var(--blocked); padding:12px; border-radius:10px; font-size:.9rem; }

.foot { margin-top:24px; color:var(--muted); font-size:.82rem; text-align:center; }
.foot p { margin:0; line-height:1.55; }

/* Login */
.login-wrap { min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:24px 20px; width:min(360px, 92vw); display:flex; flex-direction:column; gap:12px; }
.login-h { margin:0; font-size:1.3rem; text-align:center; color:#11331f; }
.login-sub { margin:0 0 6px; text-align:center; color:var(--muted); font-size:.85rem; }
.login-err { margin:0; background:var(--blocked-bg); color:var(--blocked); padding:10px 12px; border-radius:10px; font-size:.85rem; text-align:center; }
.login-input { font-size:1rem; padding:12px 14px; min-height:44px; border:1px solid var(--line); border-radius:10px; }
.login-input:focus { outline:2px solid var(--busy); outline-offset:1px; border-color:var(--busy); }
.login-btn { font-size:1rem; font-weight:600; padding:12px 16px; min-height:44px; border:none; border-radius:10px; background:#11331f; color:#fff; cursor:pointer; }
.login-btn:active { background:#0c2517; }

@media (max-width:480px) {
    .wrap { padding:12px 10px 32px; }
    .topbar-in { padding:12px 14px; }
}