/* Roadmap: aanvullingen op style.css van het dashboard (zelfde tokens, knoppen en kaarten) */

:root {
    --rm-klaar: var(--success);
    --rm-bezig: #E6C15A;
    --rm-handwerk: var(--gold);
    --rm-live: #7FB3D5;
    --rm-open: #4A4843;
    --rm-nvt: #33322F;
    --rm-gat: #E07A5F;
    --rm-fout: var(--error);
    --rm-asfalt: #23221F;
    --rm-berm: #1C1B19;
}

.rm-main { padding: 0 24px 40px; max-width: 1500px; margin: 0 auto; }
.rm-keuze { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-right: 8px; }
.rm-keuze select { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font: inherit; min-width: 220px; }
.rm-melding { position: fixed; top: 16px; right: 16px; z-index: 50; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--primary);
              padding: 12px 16px; border-radius: var(--radius); max-width: 460px; box-shadow: var(--shadow-lg); font-size: 14px; }
.rm-melding.fout { border-left-color: var(--error); }

.rm-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin: 22px 0 16px; }
.rm-titel { font-family: var(--font-display); font-weight: 400; font-size: 30px; margin: 0 0 4px; letter-spacing: -0.01em; }
.rm-sub { color: var(--text-muted); margin: 0; font-size: 14px; }
.rm-stats { margin: 0; flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; }
.rm-stats .stat-card { padding: 12px 14px; }
.rm-stats .stat-value { font-size: 20px; }

/* ── De weg ── */
.rm-wegkaart { padding: 10px 10px 14px; margin: 0 0 18px; position: relative; overflow: hidden;
               background: radial-gradient(1200px 400px at 20% 0%, rgba(46,156,127,0.06), transparent 60%), var(--bg-card); }
.rm-weg-scroll { overflow-x: auto; overflow-y: hidden; }
.rm-weg { width: 100%; min-width: 1100px; height: auto; display: block; }

.rm-weg .fase-band { fill: rgba(255,255,255,0.015); }
.rm-weg .fase-band.actief { fill: rgba(46,156,127,0.06); }
.rm-weg .fase-scheiding { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 6; }
.rm-weg .fase-nr { font-family: var(--font-display); font-size: 34px; fill: rgba(255,255,255,0.05); }
.rm-weg .fase-naam { font-family: var(--font-display); font-size: 18px; fill: var(--text-secondary); }
.rm-weg .fase-uitleg { font-size: 11px; fill: var(--text-muted); }

.rm-weg .berm { fill: none; stroke: var(--rm-berm); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.rm-weg .asfalt { fill: none; stroke: var(--rm-asfalt); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.rm-weg .streep { fill: none; stroke: rgba(230,211,170,0.28); stroke-width: 2; stroke-dasharray: 14 12; stroke-linecap: round; }
.rm-weg .voortgang { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .9;
                     filter: drop-shadow(0 0 6px rgba(46,156,127,0.55)); }

.rm-weg .mijlpaal { cursor: pointer; }
.rm-weg .mijlpaal .ring { fill: var(--bg); stroke: var(--rm-open); stroke-width: 3; transition: stroke .3s, fill .3s; }
.rm-weg .mijlpaal .kern { fill: var(--rm-open); opacity: 0; transition: opacity .3s; }
.rm-weg .mijlpaal .teken { fill: var(--bg); font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: central; opacity: 0; pointer-events: none; }
.rm-weg .mijlpaal .label { font-size: 11.5px; fill: var(--text-secondary); text-anchor: middle; pointer-events: none; }
.rm-weg .mijlpaal .label.boven { dominant-baseline: auto; }
.rm-weg .mijlpaal .leider { stroke: var(--border); stroke-width: 1; }
.rm-weg .mijlpaal:hover .ring { stroke-width: 4; }
.rm-weg .mijlpaal.gekozen .ring { stroke: var(--text); stroke-width: 4; }

.rm-weg .mijlpaal.klaar .ring { stroke: var(--rm-klaar); }
.rm-weg .mijlpaal.klaar .kern { fill: var(--rm-klaar); opacity: 1; }
.rm-weg .mijlpaal.klaar .teken { opacity: 1; }
.rm-weg .mijlpaal.bezig .ring { stroke: var(--rm-bezig); }
.rm-weg .mijlpaal.bezig .kern { fill: var(--rm-bezig); opacity: .35; animation: rm-puls 1.6s ease-in-out 5; animation-fill-mode: forwards; }
.rm-weg .mijlpaal.handwerk .ring { stroke: var(--rm-handwerk); }
.rm-weg .mijlpaal.handwerk .kern { fill: var(--rm-handwerk); opacity: 1; }
.rm-weg .mijlpaal.handwerk .teken { opacity: 1; }
.rm-weg .mijlpaal.live .ring { stroke: var(--rm-live); stroke-dasharray: 6 5; animation: rm-draai 2.4s linear 4; transform-box: fill-box; transform-origin: center; }
.rm-weg .mijlpaal.open .ring { stroke: var(--rm-open); }
.rm-weg .mijlpaal.nvt .ring { stroke: var(--rm-nvt); stroke-dasharray: 3 4; }
.rm-weg .mijlpaal.nvt .label { fill: var(--rm-open); }
.rm-weg .mijlpaal.gat .ring { stroke: var(--rm-gat); }
.rm-weg .mijlpaal.gat .werk { opacity: 1; }
.rm-weg .mijlpaal.fout .ring { stroke: var(--rm-fout); }
.rm-weg .mijlpaal.fout .kern { fill: var(--rm-fout); opacity: 1; }
.rm-weg .mijlpaal.fout .teken { opacity: 1; }
.rm-weg .mijlpaal .werk { opacity: 0; pointer-events: none; }
.rm-weg .mijlpaal.aan .ring { animation: rm-pop .45s cubic-bezier(.2,.9,.3,1.4); transform-box: fill-box; transform-origin: center; }

.rm-weg .bot { pointer-events: none; }
.rm-weg .bot .halo { fill: rgba(46,156,127,0.18); }
.rm-weg .bot .lijf { fill: url(#rm-botverloop); }
.rm-weg .bot .oog { fill: #E6D3AA; }
.rm-weg .bot .schaduw { fill: rgba(0,0,0,0.35); }
.rm-weg .bot.rijdt .lijf { animation: rm-wip .5s ease-in-out 8; transform-box: fill-box; transform-origin: 50% 100%; }

.rm-weg .kl-marker { cursor: pointer; }
.rm-weg .kl-marker circle { fill: var(--bg-card); stroke: var(--primary); stroke-width: 2; }
.rm-weg .kl-marker.aanmelding circle { stroke: var(--gold); stroke-dasharray: 3 3; }
.rm-weg .kl-marker text { font-size: 10px; font-weight: 700; fill: var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rm-weg .kl-marker .naam { font-size: 11px; font-weight: 400; fill: var(--text-muted); opacity: 0; transition: opacity .2s; }
.rm-weg .kl-marker:hover .naam { opacity: 1; }
.rm-weg .kl-marker:hover circle { stroke-width: 3; }

.rm-weg .bord { pointer-events: none; }
.rm-weg .bord rect { fill: var(--bg-card); stroke: var(--border); }
.rm-weg .bord.actief rect { stroke: var(--warning); }
.rm-weg .bord text { font-size: 11px; fill: var(--text-secondary); }
.rm-weg .bord.actief text { fill: var(--text); }
.rm-weg .bord.mijlpaal { pointer-events: all; cursor: pointer; }

.rm-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 8px 0; font-size: 12px; color: var(--text-muted); }
.rm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 2px solid var(--rm-open); vertical-align: -1px; }
.rm-dot.klaar { border-color: var(--rm-klaar); background: var(--rm-klaar); }
.rm-dot.bezig { border-color: var(--rm-bezig); background: rgba(230,193,90,.35); }
.rm-dot.handwerk { border-color: var(--rm-handwerk); background: var(--rm-handwerk); }
.rm-dot.live { border-color: var(--rm-live); border-style: dashed; }
.rm-dot.nvt { border-color: var(--rm-nvt); border-style: dotted; }
.rm-dot.gat { border-color: var(--rm-gat); background: repeating-linear-gradient(45deg, var(--rm-gat) 0 2px, transparent 2px 4px); }
.rm-dot.fout { border-color: var(--rm-fout); background: var(--rm-fout); }

/* ── Detail en lijst ── */
.rm-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.3fr); gap: 16px; align-items: start; }
.rm-detail { position: sticky; top: 16px; }
.rm-grid .card { margin: 0; }
.rm-noot { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }
.rm-detail h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0 0 6px; }
.rm-detail .rm-fase-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 4px; }
.rm-status { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(156,151,142,0.15); color: var(--text-secondary); margin: 6px 0 12px; }
.rm-status.klaar { background: var(--success-light); color: var(--success); }
.rm-status.bezig { background: rgba(230,193,90,.15); color: var(--rm-bezig); }
.rm-status.handwerk, .rm-status.fout { background: var(--warning-light); color: var(--gold); }
.rm-status.fout { background: var(--error-light); color: var(--error); }
.rm-status.gat { background: var(--error-light); color: var(--rm-gat); }
.rm-status.live { background: rgba(127,179,213,.15); color: var(--rm-live); }
.rm-detail p { font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.rm-detail .rm-bewijs { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin: 0 0 12px; }
.rm-detail .rm-bewijs .datum { color: var(--text-muted); margin-left: 8px; }
.rm-wie { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }
.rm-wie b { color: var(--text-secondary); font-weight: 600; }
.rm-opdracht { display: flex; gap: 8px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin: 0 0 12px; }
.rm-opdracht code { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; color: var(--info); flex: 1; }
.rm-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rm-vink { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.rm-vink input { width: 16px; height: 16px; accent-color: var(--primary); }
.rm-gatnoot { font-size: 12px; color: var(--rm-gat); margin-top: 10px; }
.rm-volgende { border-left: 3px solid var(--primary); padding-left: 12px; margin: 0 0 14px; }
.rm-volgende .kopje { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); margin-bottom: 2px; }

.rm-lijst h3 { font-size: 16px; margin: 0 0 8px; }
.rm-fase-blok { border-top: 1px solid var(--border); padding: 8px 0 4px; }
.rm-fase-blok:first-of-type { border-top: none; }
.rm-fase-kop { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 0; }
.rm-fase-kop .nr { font-family: var(--font-display); font-size: 18px; color: var(--text-muted); width: 20px; }
.rm-fase-kop .naam { font-weight: 600; font-size: 14px; flex: 1; }
.rm-fase-kop .telling { font-size: 12px; color: var(--text-muted); }
.rm-fase-kop .pijl { color: var(--text-muted); transition: transform .2s; }
.rm-fase-blok.dicht .pijl { transform: rotate(-90deg); }
.rm-fase-blok.dicht .rm-stap-rij { display: none; }
.rm-stap-rij { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: baseline; padding: 5px 0 5px 30px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.rm-stap-rij:hover { background: rgba(255,255,255,0.03); }
.rm-stap-rij.gekozen { background: var(--primary-light); }
.rm-stap-rij .titel { color: var(--text); }
.rm-stap-rij .tekst { color: var(--text-muted); font-size: 12px; display: block; }
.rm-stap-rij .stand { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.rm-stap-rij .stand.klaar { color: var(--success); }
.rm-stap-rij .stand.handwerk, .rm-stap-rij .stand.bezig { color: var(--gold); }
.rm-stap-rij .stand.gat, .rm-stap-rij .stand.fout { color: var(--rm-gat); }

@keyframes rm-puls { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
/* ── Beheerpanelen buiten het dashboard ── */
.rm-panelen { margin: 16px 0 0; }
.rm-panelen h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin: 0; }
.rm-panelen-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.rm-paneel { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-card); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.rm-paneel:hover { border-color: var(--primary); transform: translateY(-1px); }
.rm-paneel-naam { font-weight: 600; font-size: 14px; }
.rm-paneel-naam::after { content: " ↗"; color: var(--text-muted); font-weight: 400; }
.rm-paneel-uitleg { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

@keyframes rm-draai { to { transform: rotate(360deg); } }
@keyframes rm-pop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes rm-wip { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } }

@media (prefers-reduced-motion: reduce) {
    .rm-weg .mijlpaal.bezig .kern, .rm-weg .mijlpaal.live .ring, .rm-weg .bot.rijdt .lijf, .rm-weg .mijlpaal.aan .ring { animation: none; }
}
@media (max-width: 900px) {
    .rm-grid { grid-template-columns: 1fr; }
    .rm-detail { position: static; }
    .rm-stats { grid-template-columns: repeat(2, 1fr); width: 100%; }
    .rm-keuze { margin-right: 0; width: 100%; }
    .rm-keuze select { min-width: 0; flex: 1; }
    #rm-app .dashboard-header { flex-wrap: wrap; gap: 8px; }
    #rm-app .header-right { flex-wrap: wrap; width: 100%; }
    .rm-titel { font-size: 24px; }
}