/**
 * Pensioen Emigratie Calculator v4
 * Fluid responsive, geen max-width beperking.
 */

/* -----------------------------------------------------------------------
   Tokens
   ----------------------------------------------------------------------- */
:root {
    --rc-primary:     #1a6eba;
    --rc-primary-dk:  #155a9e;
    --rc-primary-lt:  #e8f1fb;
    --rc-success:     #1a7f4b;
    --rc-success-bg:  #e6f7ee;
    --rc-danger:      #c0392b;
    --rc-danger-bg:   #fdf0ef;
    --rc-warn:        #c97a10;
    --rc-warn-bg:     #fff8e1;
    --rc-info-bg:     #eff6ff;
    --rc-info-border: #bfdbfe;
    --rc-info-text:   #1d4ed8;
    --rc-bg:          #f1f4f9;
    --rc-panel:       #ffffff;
    --rc-border:      #d0dbe8;
    --rc-text:        #1c2b3a;
    --rc-muted:       #6b7c93;
    --rc-track:       #dde5ef;
    --rc-radius:      14px;
    --rc-radius-sm:   8px;
    --rc-shadow:      0 2px 18px rgba(0,0,0,.07);
    --rc-tr:          .17s ease;
}

*,*::before,*::after { box-sizing: border-box; }

/* -----------------------------------------------------------------------
   Wrapper — fluid
   ----------------------------------------------------------------------- */
.rc-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    color: var(--rc-text);
    background: var(--rc-bg);
    border-radius: var(--rc-radius);
    padding: clamp(1rem, 2.5vw, 2rem);
    box-sizing: border-box;
    /* Vult de volledige breedte van de container die het thema geeft.
       Wilt u het écht schermvullend, plaats de shortcode dan op een
       full-width paginasjabloon (zonder zijbalk). */
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 2rem);
}

/* Inhoud gecapt op ultrabrede schermen, gecentreerd binnen de container. */
.rc-header,
.rc-layout {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* -----------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------- */
.rc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: clamp(.75rem, 1.5vw, 1.25rem);
    flex-wrap: wrap;
    /* Nette kaart, consistent met de panelen eronder */
    background: var(--rc-panel);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    box-shadow: var(--rc-shadow);
    padding: clamp(.9rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.5rem);
}
.rc-header__text { flex: 1 1 320px; min-width: 0; }
.rc-header__meta { flex: 0 0 auto; }
.rc-title {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 800;
    margin: 0 0 .35rem;
    color: var(--rc-primary);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.rc-subtitle { color: var(--rc-muted); margin: 0; font-size: .85rem; line-height: 1.5; max-width: 60ch; }

/* Versienummer naast de titel — rood, ter controle van de geladen versie */
.rc-version {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--rc-danger);
    border-radius: 6px;
    padding: .12rem .5rem;
    vertical-align: middle;
    letter-spacing: .02em;
}

.rc-meta-badge {
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}
.rc-badge--ok  { background: var(--rc-success-bg); color: var(--rc-success); }
.rc-badge--nok { background: var(--rc-danger-bg);  color: var(--rc-danger);  }

/* -----------------------------------------------------------------------
   Layout: links invoer, rechts resultaat
   ----------------------------------------------------------------------- */
.rc-layout {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: clamp(.75rem, 1.5vw, 1.5rem);
    align-items: start;
}
/* Grid-kinderen moeten kunnen krimpen, anders duwt brede inhoud
   (zoals de jaar-tabel) het paneel buiten de container. */
.rc-layout > * { min-width: 0; }
/* Stapel naar één kolom zodra er te weinig ruimte is voor twee,
   zodat het rechterpaneel nooit wordt platgedrukt. */
@media (max-width: 960px) {
    .rc-layout { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
   Panelen
   ----------------------------------------------------------------------- */
.rc-panel {
    background: var(--rc-panel);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: clamp(.85rem, 1.8vw, 1.4rem);
    box-shadow: var(--rc-shadow);
    min-width: 0;       /* kan krimpen binnen de grid */
    max-width: 100%;
}
/* Brede inhoud binnen het resultaatpaneel mag nooit uitsteken */
.rc-panel--results { overflow: hidden; }

/* -----------------------------------------------------------------------
   Tabs
   ----------------------------------------------------------------------- */
.rc-tabs {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .3rem;
    margin-bottom: 1rem;
}
.rc-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .45rem .3rem;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-bg);
    color: var(--rc-muted);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rc-tr), color var(--rc-tr);
    line-height: 1.2;
}
.rc-tab__icon  { font-size: 1.1rem; line-height: 1; }
.rc-tab:hover  { background: var(--rc-primary-lt); color: var(--rc-primary); border-color: var(--rc-primary); }
.rc-tab--active{ background: var(--rc-primary); color: #fff; border-color: var(--rc-primary); }

.rc-tab-panel         { display: none; }
.rc-tab-panel--active { display: block; }

/* -----------------------------------------------------------------------
   Sliders
   ----------------------------------------------------------------------- */
.rc-slider-group { margin-bottom: 1rem; }

.rc-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .3rem;
}
.rc-label__text { flex: 1; min-width: 0; }
.rc-value       { color: var(--rc-primary); font-size: .82rem; font-weight: 400; white-space: nowrap; flex-shrink: 0; }
.rc-value strong{ font-weight: 700; }

.rc-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(
        to right,
        var(--rc-primary) 0%,
        var(--rc-primary) var(--rc-fill,30%),
        var(--rc-track)   var(--rc-fill,30%),
        var(--rc-track)   100%
    );
    cursor: pointer;
    outline: none;
}
.rc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--rc-primary);
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.22);
    cursor: grab;
    transition: transform var(--rc-tr);
}
.rc-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
.rc-range::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--rc-primary);
    border: 3px solid #fff;
    cursor: grab;
}
.rc-range:focus-visible { outline: 3px solid var(--rc-primary); outline-offset: 3px; }

.rc-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    color: var(--rc-muted);
    margin-top: .18rem;
}

/* -----------------------------------------------------------------------
   Lijfrentes repeater
   ----------------------------------------------------------------------- */
.rc-repeater {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--rc-border);
}
.rc-repeater__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .55rem;
}
.rc-repeater__title { font-size: .8rem; font-weight: 700; }
.rc-repeater__hint  { font-size: .7rem; color: var(--rc-muted); }

.rc-repeater__list { display: flex; flex-direction: column; gap: .5rem; }

.rc-lijfrente-row {
    display: grid;
    grid-template-columns: 1fr 92px 28px;
    gap: .45rem;
    align-items: end;
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: .5rem;
}

.rc-lr-field { display: flex; flex-direction: column; min-width: 0; }
.rc-lr-field label {
    font-size: .65rem;
    font-weight: 600;
    color: var(--rc-muted);
    margin-bottom: .2rem;
}
.rc-lr-field input {
    width: 100%;
    padding: .35rem .45rem;
    border: 1px solid var(--rc-border);
    border-radius: 5px;
    font-size: .82rem;
    color: var(--rc-text);
    background: #fff;
}
.rc-lr-field input:focus {
    outline: none;
    border-color: var(--rc-primary);
    box-shadow: 0 0 0 2px rgba(26,110,186,.15);
}

.rc-lr-remove {
    width: 28px;
    height: 30px;
    border: 1px solid var(--rc-border);
    border-radius: 5px;
    background: #fff;
    color: var(--rc-danger);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--rc-tr), border-color var(--rc-tr);
}
.rc-lr-remove:hover { background: var(--rc-danger-bg); border-color: var(--rc-danger); }

.rc-repeater__add {
    margin-top: .55rem;
    width: 100%;
    padding: .45rem;
    border: 1px dashed var(--rc-primary);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-primary-lt);
    color: var(--rc-primary);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--rc-tr);
}
.rc-repeater__add:hover { background: #dceafa; }
.rc-repeater__add--warn {
    border-color: var(--rc-warn);
    background: var(--rc-warn-bg);
    color: var(--rc-warn);
}

.rc-country-row {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--rc-border);
}
.rc-select {
    width: 100%;
    padding: .48rem .7rem;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    font-size: .875rem;
    color: var(--rc-text);
    background: #fff;
    cursor: pointer;
    margin-top: .25rem;
}
.rc-select:focus { outline: none; border-color: var(--rc-primary); box-shadow: 0 0 0 3px rgba(26,110,186,.15); }

/* -----------------------------------------------------------------------
   Secties
   ----------------------------------------------------------------------- */
.rc-section { margin-bottom: 1.25rem; }
.rc-section__title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rc-muted);
    margin: 0 0 .6rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
   Indicator
   ----------------------------------------------------------------------- */
.rc-indicator {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    border-radius: var(--rc-radius-sm);
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: .95rem;
    border-left: 5px solid transparent;
}
.rc-indicator__icon { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.rc-indicator--loading { background: #eef2f7; border-color: #a0b2c6; color: var(--rc-muted); }
.rc-indicator--loading .rc-indicator__icon { background: #a0b2c6; }
.rc-indicator--success { background: var(--rc-success-bg); border-color: var(--rc-success); color: var(--rc-success); }
.rc-indicator--success .rc-indicator__icon {
    background: var(--rc-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 70%; background-repeat: no-repeat; background-position: center;
}
.rc-indicator--danger { background: var(--rc-danger-bg); border-color: var(--rc-danger); color: var(--rc-danger); }
.rc-indicator--danger .rc-indicator__icon {
    background: var(--rc-danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-size: 65%; background-repeat: no-repeat; background-position: center;
}
.rc-indicator--error { background: var(--rc-warn-bg); border-color: var(--rc-warn); color: var(--rc-warn); }

/* -----------------------------------------------------------------------
   Info-noot
   ----------------------------------------------------------------------- */
.rc-info-note {
    background: var(--rc-info-bg);
    border: 1px solid var(--rc-info-border);
    border-radius: var(--rc-radius-sm);
    padding: .55rem .85rem;
    font-size: .78rem;
    color: var(--rc-info-text);
    margin-bottom: 1.1rem;
    line-height: 1.6;
}

/* -----------------------------------------------------------------------
   Drieweg-vergelijking
   ----------------------------------------------------------------------- */
.rc-comparison {
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: .9rem 1rem;
}
.rc-bars { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .85rem; }
.rc-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 80px;
    align-items: center;
    gap: .5rem;
}
.rc-bar-label { font-size: .78rem; font-weight: 600; color: var(--rc-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-bar-track { background: var(--rc-track); border-radius: 4px; height: 22px; overflow: hidden; }
.rc-bar { height: 100%; border-radius: 4px; transition: width .4s cubic-bezier(.4,0,.2,1); min-width: 2px; }
.rc-bar--calc   { background: var(--rc-primary); }
.rc-bar--ok     { background: var(--rc-success); }
.rc-bar--warn   { background: var(--rc-warn); }
.rc-bar--bad    { background: var(--rc-danger); }
.rc-bar--target { background: #64748b; }
.rc-bar--min    { background: #94a3b8; }
.rc-bar-val { font-size: .78rem; font-weight: 700; text-align: right; white-space: nowrap; color: var(--rc-text); }

.rc-deltas { display: flex; gap: .6rem; flex-wrap: wrap; }
.rc-delta-chip {
    flex: 1; min-width: 120px;
    display: flex; flex-direction: column; align-items: center;
    background: var(--rc-panel); border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm); padding: .5rem .75rem;
    font-size: .73rem; color: var(--rc-muted); text-align: center; gap: .2rem;
}
.rc-delta-chip strong { font-size: .9rem; font-weight: 700; }

/* -----------------------------------------------------------------------
   Vermogensgrafiek (Canvas)
   ----------------------------------------------------------------------- */
.rc-chart-wrap {
    position: relative;
    width: 100%;
    background: var(--rc-panel);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    overflow: hidden;
    padding: .5rem 0;
}

.rc-chart-canvas {
    display: block;
    width: 100%;
    height: 240px;
}

.rc-chart-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .5rem;
    padding: 0 .5rem;
    font-size: .73rem;
    color: var(--rc-muted);
}
.rc-legend-item {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.rc-legend-item::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 3px;
    border-radius: 2px;
}
.rc-legend--capital::before  { background: var(--rc-primary); }
.rc-legend--periodic::before { background: var(--rc-success); border-top: 2px dashed var(--rc-success); height: 0; }
.rc-legend--draw::before     { background: var(--rc-warn);    border-top: 2px dashed var(--rc-warn);    height: 0; }

/* Uitputtingslabel naast sectietitel */
.rc-depletion-label {
    background: var(--rc-danger-bg);
    color: var(--rc-danger);
    border: 1px solid var(--rc-danger);
    border-radius: 4px;
    padding: .1rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* -----------------------------------------------------------------------
   Tijdlijn
   ----------------------------------------------------------------------- */
.rc-timeline { overflow-x: auto; margin-bottom: .5rem; }
.rc-tl { position: relative; height: 76px; min-width: 280px; }
.rc-tl__seg {
    position: absolute; top: 0; height: 48px;
    border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 .3rem; overflow: hidden; box-sizing: border-box; cursor: default;
    transition: filter var(--rc-tr);
}
.rc-tl__seg:hover { filter: brightness(1.08); }
.rc-tl__seg--ok  { background: var(--rc-success); }
.rc-tl__seg--nok { background: var(--rc-danger);  }
.rc-tl__lbl,.rc-tl__amt {
    color: #fff; font-size: .67rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.3;
}
.rc-tl__axis { position: absolute; bottom: 0; left: 0; right: 0; height: 22px; border-top: 1px solid var(--rc-border); }
.rc-tl__tick { position: absolute; transform: translateX(-50%); top: 4px; font-size: .65rem; color: var(--rc-muted); white-space: nowrap; }

/* -----------------------------------------------------------------------
   Jaar-op-jaar tabel
   ----------------------------------------------------------------------- */
.rc-table-toggle {
    margin-left: auto;
    border: 1px solid var(--rc-border);
    background: var(--rc-panel);
    color: var(--rc-primary);
    font-size: .68rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: .2rem .55rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background var(--rc-tr);
}
.rc-table-toggle:hover { background: var(--rc-primary-lt); }

.rc-table-wrap {
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    overflow: auto;
    max-height: 460px;
}
.rc-table-wrap--collapsed { display: none; }

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
    white-space: nowrap;
}
.rc-table thead th {
    position: sticky;
    background: var(--rc-primary);
    color: #fff;
    font-weight: 700;
    text-align: right;
    padding: .4rem .55rem;
    font-size: .68rem;
    z-index: 1;
}
/* Tweede koprij plakt onder de eerste */
.rc-table thead tr:first-child th { top: 0; }
.rc-table thead tr:nth-child(2) th { top: 26px; }
.rc-table thead tr.rc-th-group th  { top: 0; }

/* Groepskoppen met scheidingskleuren */
.rc-th-in  { background: #14855a !important; text-align: center !important; }
.rc-th-cap { background: var(--rc-primary-dk) !important; text-align: center !important; }
.rc-table thead .rc-td-age { text-align: left; background: #0f4e87 !important; }

.rc-table-hint {
    font-size: .73rem;
    color: var(--rc-muted);
    margin: 0 0 .5rem;
}
.rc-table-actions { margin-top: .6rem; }
.rc-csv-btn {
    border: 1px solid var(--rc-success);
    background: var(--rc-success-bg);
    color: var(--rc-success);
    font-size: .78rem;
    font-weight: 700;
    padding: .45rem .85rem;
    border-radius: var(--rc-radius-sm);
    cursor: pointer;
    transition: background var(--rc-tr);
}
.rc-csv-btn:hover { background: #d3f0de; }

.rc-zero { color: #c2ccd8; }
.rc-td-draw { color: var(--rc-warn); font-weight: 600; }
.rc-td-want { color: var(--rc-muted); background: #f3f6fb; }
.rc-table tbody td {
    padding: .4rem .6rem;
    text-align: right;
    border-bottom: 1px solid var(--rc-border);
    color: var(--rc-text);
}
.rc-table tbody tr:nth-child(even) { background: #f8fafc; }
.rc-table tbody tr:hover           { background: var(--rc-primary-lt); }

/* Leeftijdscel met kalenderjaar eronder */
.rc-td-age { text-align: left !important; }
.rc-td-age strong { display: inline-block; min-width: 1.6em; }
.rc-td-year {
    display: inline-block;
    margin-left: .35rem;
    font-size: .65rem;
    color: var(--rc-muted);
}
.rc-td-end strong { color: var(--rc-primary); }
.rc-event { color: var(--rc-success); }

/* Jaar van uitputting — rood gemarkeerd */
.rc-tr--depleted td {
    background: var(--rc-danger-bg) !important;
    color: var(--rc-danger);
    font-weight: 700;
    border-top: 2px solid var(--rc-danger);
    border-bottom: 2px solid var(--rc-danger);
}
.rc-tr--depleted .rc-td-end strong { color: var(--rc-danger); }

/* Jaren ná uitputting — gedempt */
.rc-tr--empty td { color: var(--rc-muted); background: #fbfcfe; }

/* -----------------------------------------------------------------------
   Fasekaarten
   ----------------------------------------------------------------------- */
.rc-phases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: .75rem;
}
.rc-phase { border-radius: var(--rc-radius-sm); border: 1px solid var(--rc-border); overflow: hidden; }
.rc-phase--ok  { border-color: var(--rc-success); }
.rc-phase--nok { border-color: var(--rc-danger);  }
.rc-phase__hdr { display: flex; align-items: center; gap: .4rem; padding: .45rem .7rem; font-size: .74rem; flex-wrap: wrap; }
.rc-phase--ok  .rc-phase__hdr { background: var(--rc-success-bg); color: var(--rc-success); }
.rc-phase--nok .rc-phase__hdr { background: var(--rc-danger-bg);  color: var(--rc-danger);  }
.rc-phase__num   { font-weight: 800; flex-shrink: 0; }
.rc-phase__age   { flex: 1; font-weight: 600; }
.rc-phase__badge { font-weight: 700; font-size: .72rem; background: rgba(255,255,255,.45); border-radius: 3px; padding: .05rem .35rem; }
.rc-phase__body  { padding: .6rem .7rem; font-size: .8rem; }
.rc-prow { display: flex; justify-content: space-between; padding: .22rem 0; border-bottom: 1px dashed var(--rc-border); gap: .5rem; }
.rc-prow:last-child { border-bottom: none; }
.rc-prow strong { font-weight: 700; text-align: right; }
.rc-prow--total { font-weight: 700; }
.rc-phase__src { list-style: none; margin: .45rem 0 0; padding: .4rem .5rem; background: var(--rc-bg); border-radius: 4px; font-size: .72rem; color: var(--rc-muted); }
.rc-phase__src li { display: flex; justify-content: space-between; padding: .12rem 0; }

/* -----------------------------------------------------------------------
   Banner
   ----------------------------------------------------------------------- */
.rc-banner { border-radius: var(--rc-radius-sm); padding: .7rem .95rem; font-size: .84rem; margin-bottom: 1.1rem; line-height: 1.5; }
.rc-banner--warning { background: var(--rc-warn-bg); border: 1px solid #fde68a; color: #92400e; }

/* -----------------------------------------------------------------------
   Aannames
   ----------------------------------------------------------------------- */
.rc-assumptions { background: #f8fafc; border: 1px solid var(--rc-border); border-radius: var(--rc-radius-sm); overflow: hidden; }
.rc-assumptions__toggle {
    font-size: .78rem; font-weight: 700; color: var(--rc-muted);
    padding: .6rem .9rem; cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: .4rem;
}
.rc-assumptions__toggle::-webkit-details-marker { display: none; }
.rc-assumptions__toggle::before { content: '▶'; font-size: .65rem; transition: transform var(--rc-tr); }
details[open] .rc-assumptions__toggle::before { transform: rotate(90deg); }
.rc-assumptions__list { margin: 0; padding: 0 .9rem .75rem 2rem; font-size: .77rem; color: var(--rc-muted); line-height: 1.7; }

/* -----------------------------------------------------------------------
   Hulpklassen
   ----------------------------------------------------------------------- */
.rc-pos { color: var(--rc-success); }
.rc-neg { color: var(--rc-danger);  }

/* -----------------------------------------------------------------------
   Opslaan
   ----------------------------------------------------------------------- */
.rc-save-row { margin-top: 1rem; }
.rc-btn { display: block; width: 100%; padding: .6rem 1rem; border: none; border-radius: var(--rc-radius-sm); font-size: .875rem; font-weight: 700; cursor: pointer; transition: background var(--rc-tr), transform var(--rc-tr); }
.rc-btn--save { background: var(--rc-primary); color: #fff; }
.rc-btn--save:hover  { background: var(--rc-primary-dk); }
.rc-btn--save:active { transform: scale(.98); }
.rc-btn:disabled     { opacity: .6; cursor: not-allowed; }
.rc-save-msg { margin-top: .4rem; font-size: .8rem; font-weight: 600; }
.rc-msg--ok  { color: var(--rc-success); }
.rc-msg--err { color: var(--rc-danger);  }

/* -----------------------------------------------------------------------
   Spinner
   ----------------------------------------------------------------------- */
.rc-spinner { position: absolute; inset: 0; background: rgba(241,244,249,.78); border-radius: var(--rc-radius); display: flex; align-items: center; justify-content: center; z-index: 20; }
.rc-spinner__ring { width: 40px; height: 40px; border: 4px solid var(--rc-border); border-top-color: var(--rc-primary); border-radius: 50%; animation: rc-spin .7s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------
   Toegankelijkheid & responsief
   ----------------------------------------------------------------------- */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .rc-spinner__ring { animation: none; }
    .rc-bar           { transition: none; }
}

@media (max-width: 480px) {
    .rc-bar-row           { grid-template-columns: 70px 1fr 62px; }
    .rc-phases-grid       { grid-template-columns: 1fr; }
    .rc-tabs              { grid-template-columns: repeat(2,1fr); }
    .rc-tab__label        { display: none; }
    .rc-delta-chip        { min-width: 100px; }
    .rc-chart-canvas      { height: 180px; }
}

@media (min-width: 1400px) {
    .rc-phases-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
}