html, body { margin: 0; background: #eef2f0; height: 100%; overflow-x: hidden; max-width: 100%; }
body { overflow-y: hidden; }
.dir-bf { font-family: "IBM Plex Sans", system-ui, sans-serif; color: var(--ink);
  --bg:#eef2f0; --panel:#ffffff; --ink:#16201b; --muted:#6a776f; --line:#e4e9e6;
  --brand:#339933; --brand-d:#2d862d; --brand-dd:#1f5e1f; --side:#0f2413;
  -webkit-font-smoothing: antialiased; }
.dir-bf * { box-sizing: border-box; }
.dir-bf h1, .dir-bf h2 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.dir-bf a { color: var(--brand-d); }

/* ---------------- LOGIN ---------------- */
.fLogin { width: 100%; height: 100vh; display: grid; grid-template-columns: 1.08fr 1fr; background: var(--bg); overflow: hidden; }
.fLogin-photo { position: relative; background: url('/static/login-bg.jpg') center/cover no-repeat; padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; overflow: hidden; }
.fLogin-scrim { position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(12,24,16,.55) 0%, rgba(12,24,16,.32) 34%, rgba(12,24,16,.30) 64%, rgba(12,24,16,.7) 100%),
    linear-gradient(80deg, rgba(31,94,31,.42) 0%, rgba(31,94,31,0) 62%); }
.fLogin-photo-in { position: relative; z-index: 1; max-width: 600px; }
.fLogin-head { font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.45); margin: 0; }
.fLogin-lede { max-width: 58ch; font-size: 16px; line-height: 1.62; color: #e7efe2; margin: 22px auto 0; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.fLogin-credit { position: absolute; top: 24px; right: 26px; z-index: 1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.fLogin-main { display: grid; place-items: center; padding: 40px; }
.fLogin-card { width: 360px; max-width: 100%; }
.fLogin-formlogo { height: 54px; width: auto; display: block; margin: 0 auto 26px; }
.fLogin-title { font-size: 30px; text-align: center; }
.fLogin-sub { color: var(--muted); font-size: 14px; margin: 8px 0 28px; text-align: center; }
.fField { display: block; margin-bottom: 16px; }
.fField span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.fInput { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; padding: 0 13px; transition: border-color .15s, box-shadow .15s; }
.fInput:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51,153,51,.16); }
.fInput svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.fInput input { border: none; background: none; outline: none; font: inherit; font-size: 15px; padding: 13px 0; width: 100%; color: var(--ink); }
.fCheck { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); margin: 4px 0 22px; }
.fCheck input { width: 16px; height: 16px; accent-color: var(--brand); }
.fBtn { font: inherit; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; transition: transform .08s, background .15s; }
.fBtn:active { transform: translateY(1px); }
.fBtn-primary { width: 100%; padding: 14px; background: var(--brand); color: #fff; font-size: 15px; box-shadow: 0 8px 20px -9px rgba(31,94,31,.7); }
.fBtn-primary:hover { background: var(--brand-d); }
.fLogin-by { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 24px; }
.fLogin-by a { color: var(--brand-d); }
.fLogin-err { background: #faece7; color: #c0573c; border: 1px solid #f0d3c9; border-radius: 10px; padding: 10px 13px; font-size: 13px; margin-bottom: 16px; }

/* ---------------- APP SHELL ---------------- */
.fApp { width: 100%; height: 100vh; display: grid; grid-template-columns: 232px 1fr; background: var(--bg); }
.fSide { background: var(--side); color: #c2d4c2; display: flex; flex-direction: column; padding: 22px 16px; }
.fSide-brand { padding: 4px 6px 6px; margin: 0 4px 6px; display: flex; }
.fSide-brand img { height: 40px; width: auto; }
.fSide-section { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6f9c6f; margin: 22px 12px 10px; }
.fSide-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fSide-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 9px; color: #a9c6a9; text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.fSide-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.fSide-nav .is-active a { background: var(--brand); color: #fff; }
.fSide-ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fSide-foot { display: flex; align-items: center; gap: 10px; padding: 14px 10px 2px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 12px; }
.fSide-user { display: flex; align-items: center; gap: 10px; flex: 1; background: none; border: none; padding: 6px; margin: -6px; border-radius: 9px; cursor: pointer; text-align: left; transition: background .15s; text-decoration: none; }
.fSide-user:hover { background: rgba(255,255,255,.06); }
.fSide-avatar { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; overflow: hidden; flex: 0 0 auto; }
.fSide-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fSide-uname { font-size: 13.5px; font-weight: 600; color: #eef5f0; display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.fSide-uname small { font-weight: 400; color: #84ad84; font-size: 11.5px; }
.fSide-logout { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #9cc39c; }
.fSide-logout svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fSide-logout:hover { background: rgba(255,255,255,.08); color: #fff; }

.fMain { padding: 24px 30px 40px; overflow-y: auto; overflow-x: hidden; }
.fTop { display: flex; justify-content: space-between; align-items: center; gap: 16px; row-gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.fTop-left { display: flex; align-items: baseline; gap: 14px; }
.fTop-title { font-size: 25px; white-space: nowrap; }
.fTop-snap { font-size: 12.5px; color: var(--muted); }
.fTop-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.fSelect { font: inherit; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.fBtn-ghost { padding: 9px 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; text-decoration: none; display: inline-block; }
.fBtn-ghost:hover { border-color: var(--brand); color: var(--brand-d); }
.fBtn-icon { display: inline-flex; align-items: center; gap: 7px; }
.fBtn-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.fKpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.fKpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; }
.fKpi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fKpi-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.fKpi-delta { font-size: 11.5px; font-weight: 700; }
.fKpi-delta.up { color: var(--brand-d); }
.fKpi-delta.down { color: #c0573c; }
.fKpi-delta.neutral { color: #9aa3a0; }
.fKpi-value { font-size: 28px; font-weight: 700; margin: 8px 0 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fKpi-spark { margin: 0 -2px; }

.fCard { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.fCard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.fCard h2 { font-size: 17px; }
.fCard-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; display: block; }
.fCard-link { font-size: 13px; color: var(--brand-d); text-decoration: none; font-weight: 600; align-self: center; }
.fSeg { display: inline-flex; background: #eef2f0; border-radius: 9px; padding: 3px; gap: 2px; }
.fSeg button { font: inherit; font-size: 12.5px; font-weight: 600; border: none; background: none; color: var(--muted); padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.fSeg button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fLegend { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 8px; }
.fLeg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.fLeg-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.fGridMain { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.fGridLower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; margin-bottom: 16px; }
.fPerfSection { margin-bottom: 16px; }
.fCard-perf { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; align-items: center; }
.fCard-perf .fCard-head { grid-column: 1 / -1; }
.fCard-perf .fDonutWrap { margin: 0; }
.fCard-perf .fDonut-list { align-self: center; }
@media (max-width: 720px) { .fCard-perf { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.fTableWrap { overflow-x: auto; margin: 0 -2px; }
.fTableWrap .fTable { min-width: 660px; }
.fDonutWrap { position: relative; display: grid; place-items: center; margin: 6px 0 16px; }
.fDonut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.fDonut-center b { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fDonut-center small { font-size: 11px; color: var(--muted); }
.fDonut-list { list-style: none; margin: 0; padding: 0; }
.fDonut-list li { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--line); }
.fDonut-list li:first-child { border-top: none; }
.fDonut-name { color: var(--ink); }
.fDonut-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.fDonut-pct { color: var(--muted); font-size: 12px; width: 32px; text-align: right; }

.fTable { width: 100%; border-collapse: collapse; }
.fTable th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 10px 11px; border-bottom: 1px solid var(--line); }
.fTable td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
.fTable tr:last-child td { border-bottom: none; }
.fTable tbody tr:hover { background: #f6faf8; }
.fTitle a { color: var(--ink); text-decoration: none; font-weight: 600; display: block; }
.fTitle a:hover { color: var(--brand-d); }
.fTitle small { display: block; color: var(--muted); font-size: 11.5px; font-family: "IBM Plex Mono", monospace; margin-top: 2px; }
.fMono { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--muted); }
.fBadge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; background: color-mix(in oklab, var(--bc) 12%, transparent); }
.fBadge-dot { width: 7px; height: 7px; border-radius: 2px; }

/* ---- Filters / pager / sortable ---- */
.fFilters-clear { font-size: 13px; color: var(--muted); text-decoration: none; margin-left: 2px; }
.fFilters-clear:hover { color: var(--brand-d); }
.fSearch-full { width: 100%; }
.fFilterCard { margin-bottom: 16px; }
.fSearch { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.fSearch svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; }
.fSearch input { border: none; outline: none; background: none; font: inherit; font-size: 13.5px; padding: 9px 0; width: 100%; color: var(--ink); }
.fPFilters { display: flex; flex-direction: column; gap: 16px; }
.fPFilters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.fPFilters-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fPFilters-actions .fBtn { width: 100%; padding: 13px; justify-content: center; }
.fPFilters-clear { font-size: 13px; color: var(--muted); text-decoration: none; }
.fPFilters-clear:hover { color: var(--brand-d); }
.fBtn-sm { padding: 9px 14px; font-size: 13.5px; }
.fTable-grid th, .fTable-grid td { padding-left: 14px; padding-right: 14px; }
.fTable-grid td:first-child, .fTable-grid th:first-child { padding-left: 4px; }
.fSort { color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: 0; }
.fSort:hover { color: var(--ink); }
.fSort.is-active { color: var(--brand-d); }
.fSort-ar { color: var(--brand-d); font-size: 9px; }
.fTitle1 a { color: var(--ink); text-decoration: none; font-weight: 600; }
.fTitle1 a:hover { color: var(--brand-d); }
.fPager { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding-top: 6px; }
.fPager-btn { font: inherit; font-size: 13.5px; color: var(--brand-d); background: var(--panel); cursor: pointer; text-decoration: none; font-weight: 600; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; }
.fPager-btn:hover { background: #f3f8f5; }
.fPager-btn.is-disabled { color: var(--muted); pointer-events: none; opacity: .5; }
.fEmpty { text-align: center; color: var(--muted); font-style: italic; padding: 26px 10px; }
.fPager-info { font-size: 13px; color: var(--muted); }
.fPager-info b { color: var(--ink); }

/* ---- Back link ---- */
.fBack { display: inline-block; font-size: 13.5px; color: var(--brand-d); text-decoration: none; font-weight: 600; margin-bottom: 16px; }
.fBack:hover { text-decoration: underline; }

/* ---- Product detail ---- */
.fDetail { margin-bottom: 16px; }
.fDetail-head { display: flex; gap: 26px; align-items: flex-start; }
.fPhoto { position: relative; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #f1f5f2; }
.fPhoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fPhoto-tag { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.fDetail-meta { flex: 1; min-width: 0; }
.fDetail-title { font-size: 23px; margin: 2px 0 12px; }
.fDetail-line { font-size: 13.5px; color: var(--muted); margin: 0 0 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.fDetail-line b { color: var(--ink); font-weight: 600; }
.fDetail-line .fMono { color: var(--ink); }
.fDot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); display: inline-block; margin: 0 9px; opacity: .6; }
.fDetail-now { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.fDetail-line.fMuted { margin-top: 12px; margin-bottom: 0; }
.fMuted { color: var(--muted); }

/* ---- Field list ---- */
.fFieldDl { display: grid; grid-template-columns: 260px 1fr; margin: 0; font-size: 13.5px; }
.fFieldDl dt { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--muted); padding: 12px 16px 12px 0; border-top: 1px solid var(--line); }
.fFieldDl dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); word-break: break-word; color: var(--ink); }
.fFieldDl dt:first-of-type, .fFieldDl dd:first-of-type { border-top: none; }
.fFieldDl a { color: var(--brand-d); }
.fRight { text-align: right; }
.fLinkOut { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--brand-d); text-decoration: none; }
.fLinkOut:hover { text-decoration: underline; }
.fLinkOut svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fLink-sm { font-size: 12.5px; color: var(--brand-d); text-decoration: none; font-weight: 600; }
.fLink-sm:hover { text-decoration: underline; }
.fTable-scroll { display: block; max-height: 300px; overflow-y: auto; }
.fTable-scroll thead, .fTable-scroll tbody tr { display: table; width: 100%; table-layout: fixed; }
.fTable-scroll thead { position: sticky; top: 0; background: var(--panel); z-index: 1; }

/* ---- Feeds note / status ---- */
.fNote { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; max-width: 80ch; }
.fNote b { color: var(--ink); }
.fHint { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.fHint code { font-family: "IBM Plex Mono", monospace; font-size: 12px; background: #eef2f0; padding: 1px 6px; border-radius: 5px; color: var(--ink); }
.fStatus { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.fStatus.ok { color: var(--brand-d); background: #e7f4e7; }
.fStatus.err { color: #c0573c; background: #faece7; }
.fStatus-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---- Forms / panels ---- */
.fPanel { margin-bottom: 16px; }
.fPanel h2 { font-size: 17px; margin-bottom: 4px; }
.fText { font: inherit; font-size: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; color: var(--ink); min-width: 180px; width: 100%; transition: border-color .15s, box-shadow .15s; }
.fText:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51,153,51,.14); }
.fField2 { display: flex; flex-direction: column; gap: 7px; }
.fField2 span { font-size: 13px; font-weight: 600; }
.fBtn-wide { padding: 12px; font-size: 14.5px; }
.fBtn-danger { background: #faece7; color: #c0573c; border: 1px solid #f0d3c9; }
.fBtn-danger:hover { background: #f5ddd3; }
.fTag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--brand-d); background: #e7f4e7; border-radius: 6px; padding: 1px 7px; margin-left: 8px; vertical-align: middle; }
.fRole { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fRole.admin { color: var(--brand-d); }

/* ---- Profiel beheren ---- */
.fProfile { display: flex; flex-direction: column; gap: 16px; }
.fFlash { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 11px; font-size: 13.5px; font-weight: 500; margin-bottom: 16px; }
.fFlash.ok { background: #e7f4e7; color: var(--brand-d); border: 1px solid #cfe8cf; }
.fFlash.err { background: #faece7; color: #c0573c; border: 1px solid #f0d3c9; }
.fFlash svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fCard.fHero { padding: 0; overflow: hidden; }
.fHero-bg { height: 104px; background: linear-gradient(110deg, #15401a 0%, #2d862d 48%, #339933 100%); }
.fHero-body { display: flex; align-items: flex-end; gap: 20px; padding: 0 26px 22px; }
.fAvatarWrap { position: relative; margin-top: -56px; flex: 0 0 auto; }
.fAvatar { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 8px 22px -10px rgba(0,0,0,.45); background: #eef2f0; display: block; }
.fAvatar-cam { position: absolute; right: 2px; bottom: 4px; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s; }
.fAvatar-cam:hover { background: var(--brand-d); }
.fAvatar-cam svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fHero-id { flex: 1; min-width: 0; padding-bottom: 3px; }
.fHero-name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.fHero-sub { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.fHero-since { font-size: 12.5px; color: var(--muted); margin-top: 9px; }
.fHero-btn { margin-bottom: 3px; align-self: flex-end; flex: 0 0 auto; }
.fForm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.fField-full { grid-column: 1 / -1; }
.fField-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.fForm-actions { margin-top: 22px; display: flex; justify-content: flex-end; }
.fForm-actions .fBtn { width: auto; padding: 12px 26px; }
.fText:disabled { background: #f1f4f2; color: var(--muted); cursor: not-allowed; }

/* ---- Search typeahead ---- */
.fSearchBox { position: relative; width: 290px; }
.fSearch-top { width: 100%; }
.fSearch-top.is-open { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(51,153,51,.13); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fSearch-clear { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fSearch-clear:hover { color: var(--ink); }
.fSuggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--brand); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: 0 18px 38px -14px rgba(20,40,30,.32); max-height: 360px; overflow-y: auto; padding: 6px; }
.fSuggest-head { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px 6px; }
.fSuggest-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: 9px; font: inherit; text-decoration: none; }
.fSuggest-item:hover { background: #f3f8f5; }
.fSuggest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fSuggest-title { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fSuggest-meta { font-size: 11.5px; color: var(--muted); }
.fSuggest-empty { padding: 16px 12px 20px; font-size: 13px; color: var(--muted); }

/* ---- Chart hover tooltips ---- */
.fChartHost { position: relative; }
.fChart svg { display: block; width: 100%; }
.fTip { position: absolute; top: 4px; z-index: 6; pointer-events: none; background: #16201b; color: #fff; border-radius: 10px; padding: 9px 11px; font-size: 12px; line-height: 1.3; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); min-width: 138px; }
.fTip-date { font-weight: 700; font-size: 11.5px; margin-bottom: 7px; color: #bcd9bc; }
.fTip-row { display: flex; align-items: center; gap: 8px; padding: 2.5px 0; }
.fTip-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.fTip-lbl { flex: 1; color: #dbe4dd; white-space: nowrap; }
.fTip-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.fTip-total { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; font-weight: 700; }
.fTip-center { top: -10px; left: 50%; transform: translate(-50%, -100%); min-width: 0; text-align: center; white-space: nowrap; }
.fTip-big { font-size: 15px; font-weight: 700; margin-top: 4px; }
.fTip-big span { color: #bcd9bc; font-weight: 600; font-size: 12px; }

/* ---- Mobile chrome (hamburger + drawer) ---- */
.fMobileBar { display: none; align-items: center; justify-content: space-between; gap: 12px; background: var(--side); padding: 11px 16px; position: sticky; top: 0; z-index: 40; }
.fMobileBar-logo { height: 30px; width: auto; }
.fHamb { background: none; border: none; cursor: pointer; padding: 6px; margin: -6px; color: #dce8e0; display: grid; place-items: center; }
.fHamb svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fDrawerBack { position: fixed; inset: 0; background: rgba(10,20,14,.55); z-index: 200; display: none; }
.fDrawerBack.is-open { display: flex; }
.fDrawer { width: 274px; max-width: 84%; height: 100%; background: var(--side); color: #c2d4c2; padding: 18px 14px; display: flex; flex-direction: column; box-shadow: 0 0 50px rgba(0,0,0,.45); animation: fSlideIn .24s ease; }
@keyframes fSlideIn { from { transform: translateX(-100%); } to { transform: none; } }
.fDrawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 16px; }
.fDrawer-head img { height: 30px; width: auto; }
.fDrawer-close { background: none; border: none; color: #9cc39c; cursor: pointer; padding: 6px; display: grid; place-items: center; }
.fDrawer-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fDrawer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.fDrawer-nav a { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 10px; color: #a9c6a9; text-decoration: none; font-size: 15px; font-weight: 500; }
.fDrawer-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.fDrawer-nav .is-active a { background: var(--brand); color: #fff; }
.fDrawer-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fDrawer-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; margin-top: 8px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  body { overflow-y: auto; }
  .fApp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: auto; min-height: 100vh; }
  .fSide { display: none; }
  .fMobileBar { display: flex; }
  .fMain { overflow: visible; height: auto; padding: 18px 16px 30px; min-width: 0; }
  .fKpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fGridMain, .fGridLower { grid-template-columns: minmax(0, 1fr); }
  .fCard-head { flex-wrap: wrap; row-gap: 8px; }
  .fSearchBox { width: 100%; }
  .fTop-right { width: 100%; }
  .fLogin { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; }
  .fLogin-photo { min-height: 210px; padding: 30px; }
  .fLogin-head { font-size: 30px; }
  .fLogin-lede { font-size: 14.5px; }
  .fLogin-main { padding: 30px 22px 44px; }
}
@media (max-width: 560px) {
  .fKpis { grid-template-columns: 1fr 1fr; }
  .fKpi-value { font-size: 24px; }
  .fText { min-width: 0; }
  .fForm-grid { grid-template-columns: 1fr; }
  .fFieldDl { grid-template-columns: 1fr; gap: 0; }
  .fFieldDl dt { padding: 10px 0 2px; border-top: 1px solid var(--line); }
  .fFieldDl dd { padding: 0 0 10px; border-top: none; }
  .fDetail-head { flex-direction: column; }
  .fHero-body { flex-wrap: wrap; }
  .fHero-btn { display: none; }
  .fTop-title { white-space: normal; }
  .fLogin-photo { min-height: 150px; }
  .fLogin-head { font-size: 25px; }
}

/* ---- Foutpagina ---- */
.fErrWrap { min-height: 100vh; display: grid; place-items: center; padding: 30px;
  background: linear-gradient(180deg, rgba(12,24,16,.55) 0%, rgba(12,24,16,.32) 40%, rgba(12,24,16,.7) 100%), linear-gradient(80deg, rgba(31,94,31,.42) 0%, rgba(31,94,31,0) 62%), url('/static/login-bg.jpg') center/cover no-repeat fixed; }
.fErrCard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 42px 46px; max-width: 460px; text-align: center; box-shadow: 0 18px 50px -22px rgba(0,0,0,.3); }
.fErr-logo { height: 40px; margin-bottom: 20px; }
.fErrCode { font-size: 64px; font-weight: 700; color: var(--brand-d); letter-spacing: -.03em; line-height: 1; }
.fErrMsg { font-size: 18px; font-weight: 600; margin: 14px 0 6px; }
.fErrSub { color: var(--muted); font-size: 13.5px; margin-bottom: 24px; line-height: 1.5; }
.fErrCard .fBtn { width: auto; padding: 17px 40px; font-size: 16px; color: #16201b; display: inline-block; text-decoration: none; }

/* ---- Generieke modal + icoon-knop ---- */
.fModal { position: fixed; inset: 0; z-index: 300; background: rgba(10,20,14,.6); display: grid; place-items: center; padding: 20px; }
.fModal[hidden] { display: none; }
.fModal-box { background: var(--panel); border-radius: 16px; padding: 22px 24px; width: 400px; max-width: 92vw; box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); }
.fModal-box h3 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.fIconBtn { background: none; border: 1px solid var(--line); border-radius: 8px; width: 32px; height: 32px; display: inline-grid; place-items: center; cursor: pointer; color: var(--muted); margin-right: 6px; vertical-align: middle; }
.fIconBtn:hover { border-color: var(--brand); color: var(--brand-d); }
.fIconBtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Avatar-cropper ---- */
.fCropper { position: fixed; inset: 0; z-index: 300; background: rgba(10,20,14,.6); display: grid; place-items: center; padding: 20px; }
.fCropper[hidden] { display: none; }
.fCropper-box { background: var(--panel); border-radius: 16px; padding: 22px 24px; width: 340px; max-width: 92vw; text-align: center; box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); }
.fCropper-box h3 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.fCropper-view { width: 260px; max-width: 78vw; aspect-ratio: 1 / 1; height: auto; margin: 0 auto; border-radius: 50%; overflow: hidden; position: relative; background: #eef2f0; cursor: grab; touch-action: none; }
.fCropper-view:active { cursor: grabbing; }
.fCropper-view img { position: absolute; top: 0; left: 0; transform-origin: top left; user-select: none; -webkit-user-drag: none; pointer-events: none; max-width: none; }
.fCropper-hint { font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
#cropZoom { width: 100%; accent-color: var(--brand); margin: 6px 0 16px; }
.fCropper-actions { display: flex; gap: 10px; justify-content: center; }
.fCropper-actions .fBtn { padding: 11px 20px; }

/* ---- Load animations ---- */
.fReveal > * { opacity: 0; transform: translateY(16px); }
.fReveal .fChart-wipe { clip-path: inset(0 100% 0 0); }
.fReveal .fChart-pop { opacity: 0; transform: scale(.92); }
@media (prefers-reduced-motion: no-preference) {
  .fReveal > * { transition: opacity .5s cubic-bezier(.22,.7,.3,1), transform .5s cubic-bezier(.22,.7,.3,1); }
  .fReveal > *:nth-child(1) { transition-delay: .03s; }
  .fReveal > *:nth-child(2) { transition-delay: .09s; }
  .fReveal > *:nth-child(3) { transition-delay: .15s; }
  .fReveal > *:nth-child(4) { transition-delay: .21s; }
  .fReveal > *:nth-child(5) { transition-delay: .27s; }
  .fReveal > *:nth-child(n+6) { transition-delay: .33s; }
  .fReveal .fChart-wipe { transition: clip-path 1s cubic-bezier(.45,.05,.2,1) .35s; }
  .fReveal .fChart-pop { transition: opacity .6s ease .4s, transform .6s cubic-bezier(.2,.8,.3,1) .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .fReveal > * { opacity: 1; transform: none; }
  .fReveal .fChart-wipe { clip-path: none; }
  .fReveal .fChart-pop { opacity: 1; transform: none; }
}
.fReveal.is-in > * { opacity: 1; transform: none; }
.fReveal.is-in .fChart-wipe { clip-path: inset(0 0 0 0); }
.fReveal.is-in .fChart-pop { opacity: 1; transform: none; }


/* ================= Online Actief — aanpassingen ================= */
/* Login/foutpagina: merkgradient i.p.v. foto (geen losse asset nodig) */
.fLogin-photo{background:url('/static/oa-login.jpg') center 30%/cover no-repeat !important;}
.fErrWrap{background:linear-gradient(150deg,#0f2413 0%,#1f5e1f 46%,#339933 100%) !important;}
.fLogin-formlogo{height:clamp(54px,6.5vw,74px)}
.fSide-brand img{height:50px}
.fMobileBar-logo{height:34px}
.fDrawer-head img{height:34px}

/* Conic donut voor kanaal-attributie (server-side, geen JS) */
.fDonut{width:172px;height:172px;border-radius:50%;background:var(--g);
  -webkit-mask:radial-gradient(circle 52px at 50% 50%,transparent 98%,#000 100%);
  mask:radial-gradient(circle 52px at 50% 50%,transparent 98%,#000 100%);}
.fDonut-empty{width:172px;height:172px;border-radius:50%;background:#eef2f0;
  -webkit-mask:radial-gradient(circle 52px at 50% 50%,transparent 98%,#000 100%);
  mask:radial-gradient(circle 52px at 50% 50%,transparent 98%,#000 100%);}

/* Eenvoudige staaf-trend (server-side, geen JS) */
.fBars{display:flex;align-items:flex-end;gap:5px;height:160px;padding-top:8px}
.fBars-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;min-width:0;height:100%}
.fBars-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fBars-bar{width:100%;max-width:30px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#3aa83a,#2d862d);min-height:3px;transition:height .5s cubic-bezier(.22,.7,.3,1)}
.fBars-x{font-size:10px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Helpers */
.trunc{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fStatus{color:var(--ink)}

/* Ruimere, rustigere overzichtsindeling */
.fMain .fReveal > .fCard{margin-bottom:18px}
.fKpis{gap:16px;margin-bottom:18px}
.fKpi{padding:16px 18px}
.fKpi-value{margin-top:10px}
.fGridMain{gap:18px;margin-bottom:18px}
.fCard{padding:22px 24px}
.fCard-head{margin-bottom:18px}
.fBars{height:170px}

/* Onboarding-wizard */
.fWizard .fCard{margin-bottom:16px}
.fStep{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px;font-weight:700;margin-right:9px;vertical-align:middle}
.fPickGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:4px}
.fPick{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:13px 36px 13px 14px;cursor:pointer;position:relative;transition:border-color .15s,background .15s}
.fPick:hover{border-color:var(--brand)}
.fPick input{position:absolute;top:13px;right:13px;width:17px;height:17px;accent-color:var(--brand)}
.fPick:has(input:checked){border-color:var(--brand);background:#f1f8ee}
.fPick-name{font-weight:600;font-size:14px}
.fPick-sub{font-size:12px;color:var(--muted)}
.fGroup{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.fGroup-h{font-size:14px;margin:0 0 12px;color:var(--brand-d)}
.fGroup-h:before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--brand);margin-right:8px;vertical-align:middle}

/* Filterbalk (events/conversies) */
.fFilterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.fFilterbar .fSelect{min-width:150px}

/* Gebruikers-grid */
.fUsers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:18px}
.fUser{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.fUser-av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,#3aa83a,#2d862d);flex:0 0 auto}
.fUser-meta{flex:1;min-width:0}
.fUser-name{font-weight:600;font-size:14px}
.fUser-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fUser-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;flex:0 0 auto}
.fUser-del:hover{background:#faece7;color:#c0573c}
.fUser-del svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}

/* Bestemmingen (store-detail) */
.fDest{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.fDest-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fDest-head strong{font-size:14px}
.fDest-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.fDest-meta{font-size:12px;color:var(--muted);margin-top:8px;word-break:break-all}
.fDest-edit{margin-top:10px}
.fDest-edit summary,.fDest-add summary{cursor:pointer;font-size:13px;color:var(--brand-d);font-weight:600;width:fit-content}
.fDest-edit summary{list-style:none}
.fDest-add{margin-top:8px}

/* Stap-voor-stap wizard */
.fStepper{counter-reset:wz;list-style:none;display:flex;gap:8px;padding:0;margin:0 0 18px;flex-wrap:wrap}
.fStepper li{flex:1;min-width:110px;font-size:12.5px;font-weight:600;color:var(--muted);padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--panel);counter-increment:wz}
.fStepper li:before{content:counter(wz) ". ";color:var(--muted);font-weight:700}
.fStepper li.is-active{border-color:var(--brand);color:var(--ink)}
.fStepper li.is-active:before{color:var(--brand-d)}
.fStepper li.is-done{color:var(--brand-d);border-color:#cfe8cf}
.fStepper li.is-done:before{content:"✓ "}
.fWizNav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.fInfo h2{margin-bottom:10px}

/* Link-knoppen: witte tekst op de primaire (groene) knop, nooit onderstreept */
.dir-bf a.fBtn-primary{color:#fff}
.dir-bf a.fBtn{text-decoration:none}

/* Matchkwaliteit-meters */
.fMeters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.fMeter-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:7px}
.fMeter-top b{font-size:18px;font-variant-numeric:tabular-nums}
.fMeter-bar{height:8px;border-radius:5px;background:#eef2f0;overflow:hidden}
.fMeter-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#3aa83a,#2d862d);transition:width .6s cubic-bezier(.22,.7,.3,1)}
.fMeter-hint{display:block;font-size:11.5px;color:var(--muted);margin-top:6px}