/* Geldstromen op de hostkant. Eigen bestand omdat de pagina een stroomdiagram en een brede tabel
   draagt die nergens anders voorkomen; de tinten en vormen volgen het donkere thema (rule #14). */

.mny-wrap {
    --mny-paid: #34D399;
    --mny-open: #60A5FA;
    --mny-late: #F87171;
    --mny-draft: #A78BFA;
    --mny-acc: var(--mud-palette-primary, #F5A623);

    /* De kolom, de padding en de kop komen uit de gedeelde paginaschil; hier blijft alleen de
       zijkant iets ruimer, want de tabel en het stroomdiagram lopen breed door. */
    --cp-pad-x: 28px;
    --cp-pad-bottom: 40px;

    color: rgba(255, 255, 255, 0.9);
}

.mny-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8); border-radius: 9px; padding: 7px 13px; font-size: 0.78rem;
    transition: background 0.12s, border-color 0.12s;
}

.mny-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); }

/* ── filterrij ─────────────────────────────────────────────────────── */
.mny-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }

.mny-lb {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.3);
}

.mny-seg {
    display: flex; gap: 3px; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 3px;
}

.mny-seg button {
    padding: 6px 14px; border-radius: 7px; border: none; background: transparent; cursor: pointer;
    color: rgba(255, 255, 255, 0.45); font-size: 0.76rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}

.mny-seg button.mny-on { background: rgba(245, 166, 35, 0.15); color: var(--mny-acc); }

.mny-pill {
    cursor: pointer; border-radius: 9px; padding: 6px 12px; font-size: 0.76rem;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.6);
}

.mny-pill.mny-on {
    background: rgba(245, 166, 35, 0.15); border-color: rgba(245, 166, 35, 0.4); color: var(--mny-acc);
}

.mny-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.1); margin: 0 4px; }

/* ── stat-tegels ───────────────────────────────────────────────────── */
.mny-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }

.mny-kpi {
    border-radius: 11px; padding: 15px 16px; background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.mny-kpi .mny-v {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

.mny-kpi .mny-l { font-size: 0.71rem; color: rgba(255, 255, 255, 0.45); margin-top: 3px; }

.mny-kpi .mny-m { font-size: 0.68rem; margin-top: 5px; color: rgba(255, 255, 255, 0.35); }

.mny-kpi.mny-hero { background: rgba(52, 211, 153, 0.06); border-color: rgba(52, 211, 153, 0.28); }

/* ── kaart ─────────────────────────────────────────────────────────── */
.mny-panel {
    background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px; padding: 18px 20px;
}

.mny-panel h3 { font-size: 0.9rem; font-weight: 600; margin: 0 0 2px; }

.mny-ph { font-size: 0.73rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 12px; }

.mny-tag {
    font-size: 0.72rem; color: rgba(255, 255, 255, 0.35); text-transform: uppercase;
    letter-spacing: 0.08em; margin: 30px 0 10px;
}

.mny-rule { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 32px 0 0; }

.mny-num { font-variant-numeric: tabular-nums; }

/* ── stroomdiagram ─────────────────────────────────────────────────── */

/* De tekening heeft een eigen maat: 1330 bij 602, met bijschriften van 11,5 pixels. Groeit 'ie
   mee met het paneel, dan wordt 'ie op een breed scherm anderhalf keer zo groot en past 'ie
   nergens meer op; krimpt 'ie mee, dan zijn de bijschriften niet meer te lezen. Vandaar een
   boven- en een ondergrens, met een schuifbalk voor wat daar niet tussen past. */
.mny-flowbox { overflow-x: auto; margin: 0 -4px; }

.mny-flow { width: 100%; min-width: 820px; max-width: 1180px; height: auto; display: block; }

.mny-lnk {
    fill-opacity: 0.34; stroke: #1a1a27; stroke-width: 1; transition: fill-opacity 0.12s;
}

.mny-grp:hover .mny-lnk { fill-opacity: 0.62; }

.mny-part { transition: opacity 0.12s; }

.mny-grp:hover .mny-part { opacity: 0.72; }

.mny-nlabel { font-size: 11.5px; fill: rgba(255, 255, 255, 0.82); font-weight: 600; }

.mny-nval { font-size: 11.5px; fill: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }

.mny-nsub { font-size: 10.3px; fill: rgba(255, 255, 255, 0.33); font-variant-numeric: tabular-nums; }

.mny-colhead {
    font-size: 9.5px; fill: rgba(255, 255, 255, 0.28); text-transform: uppercase; letter-spacing: 0.09em;
}

.mny-legend {
    display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

.mny-legend .mny-it { display: inline-flex; align-items: center; gap: 7px; }

.mny-legend .mny-d { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.mny-legend .mny-d.mny-shop {
    background: #34D399;
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.62) 0 2px, transparent 2px 4px);
}

/* ── tabel ─────────────────────────────────────────────────────────── */
.mny-t { width: 100%; border-collapse: collapse; font-size: 0.78rem; }

.mny-t th {
    text-align: left; padding: 9px 10px; font-size: 0.66rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09); font-weight: 600;
}

.mny-t td {
    padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-variant-numeric: tabular-nums;
}

.mny-t th.mny-r, .mny-t td.mny-r { text-align: right; }

.mny-t tr.mny-tot td {
    border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: none; font-weight: 700;
    background: rgba(255, 255, 255, 0.02);
}

.mny-t tr.mny-warn td { background: rgba(248, 113, 113, 0.04); }

.mny-t tr.mny-click { cursor: pointer; }

.mny-t tr.mny-click:hover td { background: rgba(255, 255, 255, 0.04); }

.mny-t .mny-none { color: rgba(255, 255, 255, 0.25); }

.mny-share {
    position: relative; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.07);
    margin-top: 5px; overflow: hidden; max-width: 240px;
}

.mny-share i { display: block; height: 100%; border-radius: 3px; background: var(--mny-paid); }

/* ── uitleg ────────────────────────────────────────────────────────── */
.mny-call {
    border-left: 2px solid var(--mny-acc); padding: 2px 0 2px 13px; margin-top: 14px;
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.62); line-height: 1.7; max-width: 900px;
}

.mny-note {
    font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); line-height: 1.6; margin-top: 10px;
    max-width: 900px;
}

.mny-warnbox {
    border-radius: 11px; padding: 12px 15px; margin-bottom: 16px; font-size: 0.76rem;
    background: rgba(248, 113, 113, 0.07); border: 1px solid rgba(248, 113, 113, 0.25);
    color: rgba(255, 255, 255, 0.72); line-height: 1.6;
}

.mny-loading {
    display: flex; align-items: center; gap: 10px; padding: 40px 0;
    color: rgba(255, 255, 255, 0.4); font-size: 0.82rem;
}

.mny-empty {
    padding: 40px 0; text-align: center; color: rgba(255, 255, 255, 0.35); font-size: 0.82rem;
}

/* ── facturatie-analyse (hostpagina) ──────────────────────────
   Eigen voorvoegsel hin- zodat deze pagina niets deelt met de geldstromen ernaast; die twee gaan
   over verschillende dingen en horen niet met elkaar mee te bewegen. */
:root { --hin-mollie:#34D399; --hin-manual:#F5A623; }

.hin-loading { display:flex; align-items:center; gap:10px; padding:40px; color:rgba(255,255,255,0.45); }

.hin-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:12px 14px; margin-bottom:18px; }
.hin-lb { font-size:0.7rem; font-weight:600; color:rgba(255,255,255,0.45); letter-spacing:0.4px; text-transform:uppercase; }
.hin-spacer { flex:1; }
.hin-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; flex-basis:100%;
    margin-top:11px; padding-top:11px; border-top:1px solid rgba(255,255,255,0.08); }

.hin-seg { display:inline-flex; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
    border-radius:9px; overflow:hidden; }
.hin-seg button { background:none; border:none; color:rgba(255,255,255,0.6); padding:7px 13px;
    font-size:0.78rem; cursor:pointer; font-family:inherit; border-right:1px solid rgba(255,255,255,0.08); }
.hin-seg button:last-child { border-right:none; }
.hin-seg .hin-on { background:rgba(245,166,35,0.16); color:var(--mud-palette-primary); font-weight:600; }

.hin-step { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08); border-radius:9px; padding:2px 4px; }
.hin-step b { font-size:0.8rem; min-width:112px; text-align:center; }

.hin-pill, .hin-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
    border-radius:999px; font-size:0.75rem; border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.6); cursor:pointer; }
.hin-pill.hin-on, .hin-chip.hin-on { background:rgba(245,166,35,0.15);
    border-color:var(--mud-palette-primary); color:var(--mud-palette-primary); font-weight:600; }
.hin-chip.hin-all { border-style:dashed; }
.hin-chosen { font-size:0.72rem; color:rgba(255,255,255,0.45); margin-left:4px; }

.hin-warnbox { background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.3);
    border-radius:10px; padding:10px 14px; font-size:0.8rem; color:#F87171; margin-bottom:16px; }

.hin-kpis { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-bottom:18px; }
.hin-kpi { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    border-radius:12px; padding:14px 16px; }
.hin-kpi .v { font-size:1.45rem; font-weight:700; letter-spacing:-0.5px; }
.hin-kpi .l { font-size:0.76rem; color:rgba(255,255,255,0.7); margin-top:3px; }
.hin-kpi .m { font-size:0.68rem; color:rgba(255,255,255,0.45); margin-top:5px; line-height:1.35; }
.hin-kpi.hin-hero { border-color:rgba(245,166,35,0.4); background:rgba(245,166,35,0.06); }

.hin-tag { font-size:0.7rem; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:0.6px; margin:22px 0 9px; }

.hin-t { width:100%; border-collapse:collapse; font-size:0.78rem; }
.hin-t th { text-align:left; font-size:0.68rem; font-weight:600; color:rgba(255,255,255,0.45);
    text-transform:uppercase; letter-spacing:0.3px; padding:7px 9px; border-bottom:1px solid rgba(255,255,255,0.08); }
.hin-t td { padding:9px; border-bottom:1px solid rgba(255,255,255,0.04); }
.hin-t tr:hover td { background:rgba(255,255,255,0.02); }
.hin-t .r { text-align:right; }
.hin-t .hin-tot td { border-top:1px solid rgba(255,255,255,0.08); font-weight:700; background:rgba(255,255,255,0.02); }
.hin-mono { font-family:ui-monospace, monospace; font-size:0.72rem; color:rgba(255,255,255,0.45); }

.hin-share { height:5px; border-radius:3px; background:rgba(255,255,255,0.06); margin-top:5px;
    overflow:hidden; width:118px; }
.hin-share i { display:block; height:100%; background:var(--hin-mollie); }

.hin-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
    font-size:0.66rem; font-weight:600; }
.hin-b-paid, .hin-b-mollie { background:rgba(52,211,153,0.14); color:var(--hin-mollie); }
.hin-b-manual { background:rgba(245,166,35,0.14); color:var(--hin-manual); }
.hin-b-open { background:rgba(96,165,250,0.14); color:#60A5FA; }
.hin-b-late { background:rgba(248,113,113,0.14); color:#F87171; }

.hin-pager { display:flex; justify-content:center; padding:12px 0 4px; }
.hin-note { font-size:0.72rem; color:rgba(255,255,255,0.4); margin-top:12px; line-height:1.5; }

/* ── facturatie-analyse: grafiek, ouderdom en signalen ───────── */
.hin-date { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; padding:6px 10px; font-size:0.78rem; color:#e8eaed; font-family:inherit;
    color-scheme:dark; }

.hin-trend { font-size:0.68rem; font-weight:600; margin-left:6px; }
/* Meer buiten Mollie is slechter nieuws, dus omhoog is rood en omlaag groen. */
.hin-up { color:#F87171; }
.hin-down { color:var(--hin-mollie); }

.hin-grid2 { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin-bottom:18px; }
.hin-ph { display:flex; align-items:center; gap:8px; margin-bottom:3px; font-weight:600; font-size:0.92rem; }
.hin-ph .mud-icon-root { color:var(--mud-palette-primary); font-size:19px; }
.hin-psub { font-size:0.72rem; color:rgba(255,255,255,0.45); margin-bottom:14px; }

.hin-bars { display:flex; align-items:flex-end; gap:9px; height:132px; padding-top:6px; }
.hin-bcol { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; height:100%; }
.hin-bcol i { display:block; border-radius:3px 3px 0 0; }
.hin-bm { background:var(--hin-mollie); }
.hin-bh { background:var(--hin-manual); }
.hin-bo { background:rgba(96,165,250,0.35); border-radius:0 0 3px 3px; }
.hin-blabs { display:flex; gap:9px; margin-top:7px; }
.hin-blabs span { flex:1; text-align:center; font-size:0.63rem; color:rgba(255,255,255,0.45); }
.hin-leg { display:flex; gap:14px; margin-top:12px; font-size:0.7rem; color:rgba(255,255,255,0.45); }
.hin-leg i { width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; }

.hin-age { display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.hin-arow { display:flex; align-items:center; gap:10px; font-size:0.76rem; }
.hin-arow .n { width:118px; color:rgba(255,255,255,0.6); }
.hin-atrack { flex:1; height:9px; border-radius:5px; background:rgba(255,255,255,0.05); overflow:hidden; }
.hin-atrack i { display:block; height:100%; }
.hin-arow .v { width:86px; text-align:right; font-weight:600; }

.hin-flag { display:inline-flex; align-items:center; gap:5px; font-size:0.7rem; color:#F87171; margin-top:4px; }
.hin-chip.hin-more { color:rgba(255,255,255,0.45); }

/* ── facturatie-analyse: prognose, instroom en gezondheid ────── */
.hin-byield { background:var(--hin-mollie); }
/* De lopende maand is nog niet af, en een doorgetrokken lijn is een schatting; allebei gestreept
   zodat ze niet als een gemeten maand gelezen worden. */
.hin-bpartial { background:repeating-linear-gradient(135deg,
    rgba(52,211,153,0.55) 0 5px, rgba(52,211,153,0.2) 5px 10px); }
.hin-bproj { background:repeating-linear-gradient(135deg,
    rgba(167,139,250,0.6) 0 5px, rgba(167,139,250,0.22) 5px 10px); }
.hin-binflow { background:var(--hin-mollie); }
.hin-blate { background:#F87171; border-radius:0 0 3px 3px; }

.hin-fnums { display:flex; gap:22px; margin-top:14px; padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.07); }
.hin-fnums .k { display:block; font-size:0.66rem; color:rgba(255,255,255,0.45);
    text-transform:uppercase; letter-spacing:0.3px; }
.hin-fnums b { font-size:1.05rem; }

.hin-spark { display:inline-flex; align-items:flex-end; gap:2px; height:20px; }
.hin-spark i { width:5px; background:rgba(255,255,255,0.25); border-radius:1px; }
.hin-spark.hin-spark-down i { background:rgba(248,113,113,0.55); }
.hin-spark.hin-spark-up i { background:rgba(52,211,153,0.55); }

/* Hulp nodig is geen fout maar een kans, dus paars en niet rood. */
.hin-b-help { background:rgba(167,139,250,0.16); color:#A78BFA; }