/* PriceWork — huisstijl (Barlow + Open Sans, groen/geel/wit). Self-hosted fonts. */
@font-face { font-family:"Barlow"; src:url("/static/fonts/Barlow-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("/static/fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("/static/fonts/Barlow-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Open Sans"; src:url("/static/fonts/OpenSans-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Open Sans"; src:url("/static/fonts/OpenSans-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Open Sans"; src:url("/static/fonts/OpenSans-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }

:root {
    --green:#1d4636; --green-2:#2d6650; --yellow:#ffcc02;
    --bg:#f4f6f5; --card:#fff; --border:#d9e2dd;
    --text:#1a1a1a; --mid:#556; --muted:#8a9a92;
    --good:#1d7a4d; --bad:#c0392b;
}
* { box-sizing:border-box; }
body { margin:0; font-family:"Open Sans",system-ui,sans-serif; color:var(--text); background:var(--bg); }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:"Barlow",system-ui,sans-serif; margin:0; }

header.top { background:var(--green); color:#fff; padding:0 28px; display:flex; align-items:center; gap:26px; height:62px; }
header.top .brand { font-family:"Barlow"; font-weight:700; font-size:1.45rem; letter-spacing:.3px; }
header.top .brand b { color:var(--yellow); }
header.top nav { display:flex; gap:4px; margin-left:6px; }
header.top nav a { padding:8px 14px; border-radius:6px; font-weight:600; font-size:.92rem; color:#cfe0d8; }
header.top nav a.active, header.top nav a:hover { background:var(--green-2); color:#fff; }
header.top .demo { margin-left:auto; background:var(--yellow); color:var(--green); font-weight:700; font-size:.72rem; padding:4px 10px; border-radius:4px; letter-spacing:.4px; }
header.top .logout { color:#cfe0d8; font-size:.85rem; font-weight:600; padding:8px 12px; border-radius:6px; }
header.top .logout:hover { background:var(--green-2); color:#fff; }

main { max-width:1180px; margin:0 auto; padding:26px 28px 60px; }
.demo-note { background:#fff8d6; border:1px solid #ffe066; color:#6b5800; padding:9px 14px; border-radius:7px; font-size:.82rem; margin-bottom:22px; }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
.kpi { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px 18px; position:relative; overflow:hidden; }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--yellow); }
.kpi .label { font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.kpi .value { font-family:"Barlow"; font-weight:700; font-size:2rem; color:var(--green); margin-top:4px; line-height:1; }
.kpi .sub { font-size:.78rem; color:var(--mid); margin-top:6px; }
.kpi.good .value { color:var(--good); } .kpi.bad .value { color:var(--bad); }

.card { background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:24px; overflow:hidden; }
.card > h2 { font-size:1.05rem; color:var(--green); padding:15px 18px; border-bottom:1px solid var(--border); font-weight:700; }
.card > h2 .hint { font-family:"Open Sans"; font-weight:400; font-size:.78rem; color:var(--muted); margin-left:8px; }

table { width:100%; border-collapse:collapse; font-size:.88rem; }
th,td { text-align:left; padding:10px 14px; border-bottom:1px solid #eef2f0; }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; background:#fafbfa; }
tr:last-child td { border-bottom:none; }
tbody tr:hover { background:#f7faf8; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.rowlink { cursor:pointer; }

.badge { display:inline-block; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:20px; letter-spacing:.3px; }
.badge.daily { background:#e6f4ec; color:var(--good); }
.badge.weekly { background:#eef1f7; color:#4a5a80; }
.badge.trigger { background:#f2f2f2; color:#888; }
.pill { font-weight:700; padding:2px 8px; border-radius:6px; font-size:.8rem; }
.pill.good { background:#e6f4ec; color:var(--good); }
.pill.bad { background:#fbeae8; color:var(--bad); }

.bar { height:8px; border-radius:6px; background:#eef2f0; overflow:hidden; display:inline-block; width:120px; vertical-align:middle; }
.bar > span { display:block; height:100%; background:var(--bad); }

.filters { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.filters input, .filters select, .filters a.btn { padding:8px 12px; border:1px solid var(--border); border-radius:7px; background:#fff; font-size:.86rem; font-family:inherit; }
.filters input { min-width:220px; }
.filters a.btn.active { background:var(--green); color:#fff; border-color:var(--green); }

.backlink { font-size:.85rem; color:var(--muted); margin-bottom:14px; display:inline-block; }
.backlink:hover { color:var(--green); }
.muted { color:var(--muted); }
@media (max-width:820px){ .kpis{ grid-template-columns:repeat(2,1fr);} }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--green); }
.login-card { background:#fff; border-radius:14px; padding:38px 36px; width:360px; box-shadow:0 18px 50px rgba(0,0,0,.25); }
.login-card .brand { font-family:"Barlow"; font-weight:700; font-size:1.9rem; color:var(--green); text-align:center; }
.login-card .brand b { color:#e0b400; }
.login-card .sub { text-align:center; color:var(--muted); font-size:.82rem; margin:6px 0 24px; }
.login-card label { display:block; font-size:.78rem; font-weight:700; color:var(--mid); margin:14px 0 5px; text-transform:uppercase; letter-spacing:.4px; }
.login-card input { width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:8px; font-size:.95rem; font-family:inherit; }
.login-card input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(29,70,54,.12); }
.login-card button { width:100%; margin-top:22px; padding:12px; background:var(--green); color:#fff; border:none; border-radius:8px; font-family:"Barlow"; font-weight:600; font-size:1rem; cursor:pointer; }
.login-card button:hover { background:var(--green-2); }
.login-error { background:#fbeae8; color:var(--bad); border:1px solid #f3c6c0; padding:9px 12px; border-radius:8px; font-size:.83rem; margin-bottom:6px; }

/* Roadmap */
.rm-legend { display:flex; gap:20px; margin-bottom:20px; font-size:.82rem; color:var(--mid); }
.rm-legend span { display:inline-flex; align-items:center; gap:7px; }
.rm-dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.rm-dot.done { background:var(--good); } .rm-dot.next { background:var(--yellow); } .rm-dot.planned { background:#b8c2bd; }

.rm-phase { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:20px 22px; margin-bottom:16px; border-left:5px solid var(--border); }
.rm-phase.done { border-left-color:var(--good); }
.rm-phase.next { border-left-color:var(--yellow); background:#fffdf3; }
.rm-phase.planned { border-left-color:#b8c2bd; }
.rm-head { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.rm-head h2 { font-size:1.15rem; color:var(--green); }
.rm-status { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.rm-status.done { background:#e6f4ec; color:var(--good); }
.rm-status.next { background:var(--yellow); color:var(--green); }
.rm-status.planned { background:#eef1f0; color:#7a877f; }
.rm-list { margin:10px 0 0; padding-left:20px; }
.rm-list li { margin-bottom:9px; line-height:1.5; font-size:.92rem; }
.rm-note { margin:12px 0 0; padding:9px 13px; background:#fff8d6; border:1px solid #ffe066; border-radius:7px; font-size:.84rem; color:#6b5800; }