/* ═══════════════════════════════════════════════════════════════════════
   Natura Indosso — wallet module
   Pastelvlakken dragen betekenis: tegoed is perzik, verdiensten mint,
   netwerk lavendel, bestellingen salie. Bedragen altijd in messing met
   tabulaire cijfers, zodat kolommen uitlijnen en je oog geld direct vindt.
   ═══════════════════════════════════════════════════════════════════════ */

.nw {
    --nw-peach:      #FBEDE2;
    --nw-peach-ink:  #8A5A2B;
    --nw-mint:       #E4F1E8;
    --nw-mint-ink:   #2E7D5B;
    --nw-lav:        #EAEAF6;
    --nw-lav-ink:    #4C4F86;
    --nw-sage:       #EAF1E5;
    --nw-sage-ink:   #4A6B39;
    --nw-brass:      #B08D4F;
    --nw-ink:        #2A2E27;
    --nw-muted:      #646B5E;
    --nw-subtle:     #969C8E;
    --nw-line:       #E7E7DF;
    --nw-surface:    #FFFFFF;

    color: var(--nw-ink);
}

.nw * { box-sizing: border-box; }

/* ── Kop ─────────────────────────────────────────────────────────────── */
.nw-head { margin-bottom: 1.75rem; }
.nw-head h1 { margin: 0 0 .25rem; font-size: 1.65rem; font-weight: 600; letter-spacing: -.02em; }
.nw-head p  { margin: 0; color: var(--nw-muted); font-size: .95rem; }

.nw-section { margin: 2rem 0 .9rem; display: flex; align-items: baseline; justify-content: space-between; }
.nw-section h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.nw-section a  { font-size: .85rem; color: var(--nw-muted); text-decoration: none; }
.nw-section a:hover { color: var(--nw-brass); }

/* ── Held: saldo ─────────────────────────────────────────────────────── */
.nw-hero {
    background: linear-gradient(135deg, var(--nw-peach) 0%, #FDF6EE 100%);
    border: 1px solid #F0DFCC;
    border-radius: 20px;
    padding: 2rem 2.25rem;
    margin-bottom: 1.25rem;
    display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;
    justify-content: space-between;
}
.nw-hero__label {
    font-size: .75rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--nw-peach-ink); opacity: .8;
    margin: 0 0 .35rem;
}
.nw-hero__amount {
    margin: 0; font-size: 3rem; font-weight: 300; letter-spacing: -.03em;
    color: var(--nw-brass); font-variant-numeric: tabular-nums; line-height: 1;
}
.nw-hero__note { margin: .6rem 0 0; font-size: .9rem; color: var(--nw-peach-ink); }
.nw-hero__side { text-align: right; min-width: 190px; }

.nw-locked {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.7); border: 1px solid #EFE0CE;
    border-radius: 999px; padding: .4rem .85rem;
    font-size: .82rem; color: var(--nw-peach-ink);
}
.nw-locked strong { font-variant-numeric: tabular-nums; }

/* ── Statkaarten ─────────────────────────────────────────────────────── */
.nw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.nw-card {
    border-radius: 16px; padding: 1.25rem 1.35rem;
    border: 1px solid transparent; position: relative;
    display: flex; flex-direction: column; gap: .3rem;
}
.nw-card--peach { background: var(--nw-peach); border-color: #F2E1D0; }
.nw-card--mint  { background: var(--nw-mint);  border-color: #D5E8DC; }
.nw-card--lav   { background: var(--nw-lav);   border-color: #DCDCEE; }
.nw-card--sage  { background: var(--nw-sage);  border-color: #DBE6D4; }
.nw-card--plain { background: var(--nw-surface); border-color: var(--nw-line); }

.nw-card__label { font-size: .82rem; font-weight: 600; color: var(--nw-ink); opacity: .75; }
.nw-card__value {
    font-size: 1.75rem; font-weight: 400; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.nw-card__note { font-size: .78rem; color: var(--nw-muted); }
.nw-card__icon {
    position: absolute; top: 1.1rem; right: 1.1rem;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.75);
    display: flex; align-items: center; justify-content: center;
}
.nw-card__icon svg { width: 15px; height: 15px; }

.nw-delta { font-size: .78rem; font-weight: 600; }
.nw-delta--up   { color: var(--nw-mint-ink); }
.nw-delta--down { color: #B0453A; }

/* ── Panelen ─────────────────────────────────────────────────────────── */
.nw-panel {
    background: var(--nw-surface); border: 1px solid var(--nw-line);
    border-radius: 16px; padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.nw-panel > h2 { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; }
.nw-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }

/* ── Voortgang ───────────────────────────────────────────────────────── */
.nw-progress { display: flex; align-items: center; gap: 1.25rem; }
.nw-progress__bar {
    flex: 1; height: 10px; border-radius: 999px;
    background: #EFEFE8; overflow: hidden;
}
.nw-progress__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #C9DCC0, var(--nw-brass));
}
.nw-progress__label { font-size: .88rem; color: var(--nw-muted); white-space: nowrap; }

/* ── Bewegingen ──────────────────────────────────────────────────────── */
.nw-moves { list-style: none; margin: 0; padding: 0; }
.nw-moves li {
    display: flex; align-items: center; gap: .9rem;
    padding: .8rem 0; border-bottom: 1px solid var(--nw-line);
}
.nw-moves li:last-child { border-bottom: 0; }
.nw-moves__dot {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
}
.nw-moves__dot svg { width: 16px; height: 16px; }
.nw-moves__dot--in  { background: var(--nw-mint);  color: var(--nw-mint-ink); }
.nw-moves__dot--out { background: var(--nw-peach); color: var(--nw-peach-ink); }
.nw-moves__dot--net { background: var(--nw-lav);   color: var(--nw-lav-ink); }
.nw-moves__body { flex: 1; min-width: 0; }
.nw-moves__title { font-size: .93rem; }
.nw-moves__meta  { font-size: .78rem; color: var(--nw-subtle); }
.nw-moves__amt {
    font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}
.nw-moves__amt--in  { color: var(--nw-mint-ink); }
.nw-moves__amt--out { color: var(--nw-peach-ink); }

/* ── Tabellen ────────────────────────────────────────────────────────── */
.nw-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.nw-table th {
    text-align: left; padding: .6rem .7rem; font-size: .72rem;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--nw-subtle); border-bottom: 1px solid var(--nw-line); font-weight: 600;
}
.nw-table td { padding: .75rem .7rem; border-bottom: 1px solid #F2F2EC; vertical-align: middle; }
.nw-table tr:last-child td { border-bottom: 0; }
.nw-table tbody tr:hover { background: #FBFBF7; }
.nw-num { text-align: right; font-variant-numeric: tabular-nums; }
.nw-neg { color: #B0453A; }
.nw-pos { color: var(--nw-mint-ink); }
.nw-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .82rem; }
.nw-sub  { display: block; font-size: .76rem; color: var(--nw-subtle); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.nw-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.nw-badge--paid      { background: var(--nw-lav);  color: var(--nw-lav-ink); }
.nw-badge--packed    { background: var(--nw-peach);color: var(--nw-peach-ink); }
.nw-badge--shipped   { background: var(--nw-sage); color: var(--nw-sage-ink); }
.nw-badge--delivered { background: var(--nw-mint); color: var(--nw-mint-ink); }
.nw-badge--l1 { background: var(--nw-mint); color: var(--nw-mint-ink); }
.nw-badge--l2 { background: var(--nw-lav);  color: var(--nw-lav-ink); }
.nw-badge--l3 { background: var(--nw-sage); color: var(--nw-sage-ink); }

/* ── Netwerkniveaus ──────────────────────────────────────────────────── */
.nw-level {
    border: 1px solid var(--nw-line); border-radius: 14px;
    padding: 1.1rem 1.25rem; margin-bottom: .9rem; background: var(--nw-surface);
}
.nw-level__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: .9rem;
}
.nw-level__title { font-weight: 600; display: flex; align-items: center; gap: .6rem; }
.nw-level__earn  { font-variant-numeric: tabular-nums; color: var(--nw-brass); font-weight: 600; }
.nw-people { display: flex; flex-wrap: wrap; gap: .5rem; }
.nw-person {
    display: flex; align-items: center; gap: .5rem;
    background: #FAFAF6; border: 1px solid var(--nw-line);
    border-radius: 999px; padding: .35rem .8rem .35rem .4rem; font-size: .85rem;
}
.nw-person__ini {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--nw-sage); color: var(--nw-sage-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
}
.nw-person__earn { color: var(--nw-brass); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Deelvak ─────────────────────────────────────────────────────────── */
.nw-share {
    background: linear-gradient(135deg, var(--nw-sage) 0%, #F4F8F1 100%);
    border: 1px solid #DBE6D4; border-radius: 16px; padding: 1.4rem 1.5rem;
    margin-bottom: 1.25rem;
}
.nw-share__row { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.nw-share input {
    flex: 1; min-width: 240px; padding: .65rem .85rem;
    border: 1px solid #DBE6D4; border-radius: 10px;
    background: #fff; font-size: .9rem; color: var(--nw-ink);
}
.nw-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .65rem 1.1rem; border-radius: 10px; border: 0;
    background: #6E9159; color: #fff; font-size: .9rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
}
.nw-btn:hover { background: #5B7A49; color: #fff; }
.nw-btn--ghost {
    background: #fff; color: var(--nw-ink); border: 1px solid var(--nw-line);
}
.nw-btn--ghost:hover { background: #FAFAF6; color: var(--nw-ink); }
.nw-btn svg { width: 16px; height: 16px; }

/* ── Meldingen ───────────────────────────────────────────────────────── */
.nw-alert {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .85rem 1rem; border-radius: 12px; margin-bottom: .6rem;
    background: #FBF1DE; border: 1px solid #F0DFBB; color: #7A5A18; font-size: .9rem;
}
.nw-alert svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .1rem; }
.nw-alert a { color: inherit; font-weight: 600; }

.nw-empty { padding: 2rem 1rem; text-align: center; color: var(--nw-subtle); font-size: .92rem; }

/* ── Uitleg ──────────────────────────────────────────────────────────── */
.nw-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.nw-explain div { padding: .9rem 1rem; border-radius: 12px; background: #FAFAF6; border: 1px solid var(--nw-line); }
.nw-explain dt { font-size: 1.3rem; font-weight: 600; color: var(--nw-brass); font-variant-numeric: tabular-nums; }
.nw-explain dd { margin: .2rem 0 0; font-size: .82rem; color: var(--nw-muted); }

/* ── Voorbeeldbanner ─────────────────────────────────────────────────── */
.nw-preview {
    display: flex; align-items: center; gap: .7rem;
    background: var(--nw-lav); border: 1px solid #DCDCEE; color: var(--nw-lav-ink);
    border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1.25rem; font-size: .88rem;
}
.nw-preview svg { width: 16px; height: 16px; }
.nw-preview select {
    margin-left: auto; padding: .35rem .6rem; border-radius: 8px;
    border: 1px solid #DCDCEE; background: #fff; font-size: .85rem;
}

@media (max-width: 720px) {
    .nw-hero { flex-direction: column; }
    .nw-hero__side { text-align: left; }
    .nw-hero__amount { font-size: 2.4rem; }
}

/* ── Teruggedraaide verdiensten ───────────────────────────────────────
   Een retour verwijdert een verdienste niet maar boekt hem tegen. Op het
   scherm blijft het oorspronkelijke bedrag staan met een streep erdoor, zodat
   zichtbaar blijft dát er verdiend is én dat het weer van het saldo af is. */
.nw-struck {
    opacity: .5;
    text-decoration-thickness: 1px;
    font-variant-numeric: tabular-nums;
}
.nw-struck--was {
    margin-right: .4rem;
    font-size: .85em;
}
.nw-moves li.is-reversed .nw-moves__title { opacity: .65; }
.nw-moves li.is-reversed .nw-moves__amt   { color: inherit; }
.nw-sub--reversed {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    opacity: .6;
}

/* ── Interactieve grafiek ─────────────────────────────────────────────
   Kolommen reageren op muis én toetsenbord (tabbaar), met één tooltip die
   meebeweegt in plaats van de trage native title-tekst. */
.nw-chart { position: relative; display: flex; align-items: flex-end; gap: .5rem; height: 190px; padding-top: 1rem; }
.nw-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%;
                 cursor: default; outline: none; transition: opacity .12s ease; }
.nw-chart__col.is-dim { opacity: .35; }
.nw-chart__col:focus-visible .nw-chart__bars { outline: 2px solid var(--nw-sage, #6E9159); outline-offset: 3px; border-radius: 4px; }
.nw-chart__bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; }
.nw-chart__bar { width: 42%; border-radius: 4px 4px 0 0; transition: filter .12s ease; min-height: 2px; }
.nw-chart__bar--granted { background: #C9DCC0; }
.nw-chart__bar--spent   { background: #EBD9BC; }
.nw-chart__col:hover .nw-chart__bar { filter: brightness(.93); }
.nw-chart__label { font-size: .7rem; color: var(--nw-subtle, #969C8E); }

.nw-chart__tip {
    position: absolute; bottom: 100%; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: .15rem;
    padding: .6rem .75rem; margin-bottom: .5rem;
    background: #2A2E27; color: #F7F7F3;
    border-radius: 8px; font-size: .8rem; line-height: 1.45;
    white-space: nowrap; pointer-events: none; z-index: 5;
    box-shadow: 0 4px 14px rgba(42,46,39,.18);
}
/* Zonder deze regel doet het hidden-attribuut niets: de eigen display:flex
   hierboven wint van de browserregel [hidden] { display: none }. Dat liet de
   tooltip permanent in beeld staan. */
.nw-chart__tip[hidden] { display: none; }
.nw-chart__tip strong { font-size: .85rem; margin-bottom: .15rem; }
.nw-chart__tip b { font-variant-numeric: tabular-nums; }
.nw-chart__tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .4rem; }
.nw-chart__tip i.g { background: #C9DCC0; }
.nw-chart__tip i.s { background: #EBD9BC; }

/* ── Werkbalk met weergaveschakelaar ─────────────────────────────── */
.nw-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.nw-switch { display: inline-flex; border: 1px solid var(--nw-border, #E7E7DF); border-radius: 8px; overflow: hidden; }
.nw-switch a { padding: .4rem .9rem; font-size: .85rem; text-decoration: none; color: var(--nw-muted, #646B5E); background: #fff; }
.nw-switch a + a { border-left: 1px solid var(--nw-border, #E7E7DF); }
.nw-switch a.is-on { background: rgba(110,145,89,.13); color: #3D5331; font-weight: 600; }
.nw-btn--ghost { background: #fff; color: var(--nw-ink, #2A2E27); border: 1px solid var(--nw-border, #E7E7DF);
                 padding: .4rem .9rem; border-radius: 8px; font-size: .85rem; text-decoration: none; }
.nw-btn--ghost:hover { border-color: #C9DCC0; background: #F7FAF4; }
.nw-ok { color: #2E7D5B; font-weight: 600; }
.nw-hero__explain { margin: .7rem 0 0; max-width: 46ch; font-size: .82rem; line-height: 1.5; opacity: .7; }




/* ══════════════════════════════════════════════════════════════════════
   NATURA INDOSSO WALLET
   ══════════════════════════════════════════════════════════════════════

   Vier beslissingen, en alles volgt daaruit:

   1. GEEN ZIJBALK. De navigatie zit in de header. Een zijbalk kost 300–440px
      voor vijf items; horizontaal kost het niets en is het hele scherm inhoud.
      Dát is waarom het referentieontwerp groots voelt.

   2. GENEST, NIET ZWEVEND. Tegels zitten in een paneel met 8px ertussen. Het
      paneel vat ze samen, en juist daarom mogen de kleuren fel zijn.

   3. TWEE AFRONDINGEN. 22px buiten, 14px binnen. Dat verschil maakt het genest.

   4. GEEN RANDEN. Scheiding komt uit kleurvlakken en ruimte, nooit uit een lijn.
   ────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Palet volgens de referentie ────────────────────────────────
       Wit als drager, diep bosgroen voor blokken en knoppen, messing als
       tweede accent. Geen pastelvlakken meer: die maakten het speels, en de
       klant wil hoogwaardige biocosmetica — dat leest als rust, niet als
       kleur. De intensiteit zit nu in het groen, niet in de variatie. */

    --nx-canvas:  #F6F2E9;   /* de pagina */
    --nx-header:  #FFFFFF;   /* chroom */
    --nx-panel:   #FBF8F2;   /* zachte vlakken binnen een kaart */
    --nx-sheet:   #FFFFFF;   /* kaarten */
    --nx-line:    #EBE4D6;   /* de enige lijn die we gebruiken */

    --nx-forest:      #1C4232;   /* het merkgroen */
    --nx-forest-deep: #143025;
    --nx-forest-soft: #2A5A44;

    --nx-gold:      #B5822B;   /* messing accent */
    --nx-gold-soft: #D9B978;

    --nx-ink:   #16241D;
    --nx-body:  #4E5A52;
    --nx-mute:  #8B8D82;

    --nx-pos:   #2E6B47;
    --nx-neg:   #A63A2E;

    /* Kleurvlakken blijven bestaan voor de beheerkant, maar gedempt. */
    --nx-peach:  #F3E7D5;
    --nx-blush:  #EFDDD6;
    --nx-rose:   #E9D6DA;
    --nx-lilac:  #DFDCE8;
    --nx-sky:    #D9E3E8;
    --nx-mint:   #DCE7DC;
    --nx-butter: #F2EBD2;
    --nx-sage:   #1C4232;

    --nx-r-out: 22px;
    --nx-r-in:  16px;
    --nx-gap:   12px;

    --nx-display: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --nx-text:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body, .crm-shell {
    font-family: var(--nx-text);
    color: var(--nx-ink);
    background: var(--nx-canvas) !important;
    -webkit-font-smoothing: antialiased;
}

/* ══ 1. DE SCHIL ════════════════════════════════════════════════════
   Wit chroom, crème canvas, gekleurde tegels. In die volgorde valt het oog
   waar het hoort: het menu mag niet concurreren met de inhoud. ═════════ */
.crm-shell {
    grid-template-columns: 264px 1fr !important;
    grid-template-rows: 72px 1fr !important;
    grid-template-areas:
        "brand topbar"
        "sidebar panel" !important;
    background: var(--nx-canvas) !important;
}
.crm-sidebar-collapsed .crm-shell { grid-template-columns: 78px 1fr !important; }

.crm-shell__brand   { grid-area: brand !important; }
.crm-shell__sidebar { grid-area: sidebar !important; }
.crm-shell__panel   { grid-area: panel !important; }

.crm-shell__brand,
.crm-shell__sidebar {
    background: var(--nx-header) !important;
    border: 0 !important; box-shadow: none !important;
    margin: 0 !important; border-radius: 0 !important;
}
.crm-shell__brand {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: .8rem; padding: 0 1.1rem 0 1.5rem !important;
}
.crm-shell__sidebar {
    padding: .4rem .8rem 1.2rem !important;
    display: flex !important; flex-direction: column;
    overflow-y: auto;
}

.crm-shell__brand-lockup  { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.crm-shell__brand-company { font-size: .55rem; font-weight: 600; letter-spacing: .21em; text-transform: uppercase; color: var(--nx-mute); margin-bottom: .3rem; }
.crm-shell__brand-name    { font-family: var(--nx-display); font-size: 1.34rem; font-weight: 700; letter-spacing: -.038em; color: var(--nx-ink); }
.crm-shell__logo { max-height: 32px; width: auto; filter: none; }

/* ══ 2. NAVIGATIE ═══════════════════════════════════════════════════ */
.crm-nav { display: block !important; padding: 0 !important; }

.crm-nav__section {
    display: block !important;
    font-family: var(--nx-display);
    font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--nx-mute);
    padding: 1.35rem .9rem .5rem;
}
.crm-nav__section:first-child { padding-top: .7rem; }

/* Dunne scheiding tussen de groepen — één haarlijn is hier wél op zijn
   plaats: hij scheidt twee werelden (eigen wallet versus beheer). */
.crm-nav__divider {
    display: block !important;
    height: 1px; border: 0 !important;
    background: rgba(25,29,24,.09);
    margin: .9rem .9rem .2rem;
}

.crm-nav__item {
    position: relative;
    display: flex !important; align-items: center; gap: .8rem;
    padding: .62rem .9rem;
    margin: .1rem 0;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: var(--nx-display);
    font-size: .95rem; font-weight: 500; letter-spacing: -.018em;
    color: var(--nx-body); text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.crm-nav__item:hover { background: rgba(79,112,64,.07); color: var(--nx-ink); }

/* Actief: zachte salietint met een staafje aan de kop. Geen zwart vlak —
   dat trekt het oog weg van de tegels die de inhoud dragen. */
.crm-nav__item--active {
    background: rgba(79,112,64,.11) !important;
    color: #2E4426 !important;
    font-weight: 700;
}
.crm-nav__item--active::before {
    content: "" !important; display: block !important;
    position: absolute; left: -.8rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--nx-sage) !important;
}
.crm-nav__item--active svg { color: #2E4426; }

/* Versienummer onderaan */
.crm-shell__sidebar .crm-version,
.crm-shell__sidebar > small { margin-top: auto; padding: 1rem .9rem 0; font-size: .7rem; color: var(--nx-mute); }

/* ══ 3. INHOUD ══════════════════════════════════════════════════════ */
/*
 * De inhoud heet .crm-shell__panel, niet __main. Op de verkeerde klasse mikken
 * betekende dat de achtergrond, de binnenmarge én de afgeronde hoek allemaal
 * niet aankwamen — de basisstijl bleef staan en het viel niet op omdat de
 * kleuren toevallig in de buurt lagen.
 */
.crm-shell__panel {
    background: var(--nx-canvas) !important;
    border-top-left-radius: 28px !important;
    overflow: visible;
}
.crm-panel__inner {
    padding: 2.8rem 3.8rem 3.4rem !important;
    max-width: none !important;
}

/*
 * Uitlijning op grote schermen.
 *
 * Volledige breedte werkt tot een meter of zo; daarboven wordt een regel
 * onleesbaar lang en drijven de kolommen uit elkaar. Daarom een plafond van
 * 1560px met de inhoud gecentreerd: op een gewone laptop vult het scherm, op
 * een grote monitor staat het als een blok in het midden in plaats van
 * uitgesmeerd tot aan de randen.
 */
/* (vervangen door de leesbreedteregel verderop) */

/* Kop met contextstrip, zoals in de referentie */
.nw-head {
    display: flex; align-items: center; gap: 1.5rem;
    flex-wrap: wrap; margin-bottom: 1.1rem;
}
.nw h1, .nw h2, .nw h3 { font-family: var(--nx-display); font-weight: 700; letter-spacing: -.04em; margin: 0; }
.nw-head h1 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; }
.nw-eyebrow { font-family: var(--nx-display); font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--nx-sage); margin: 0 0 .2rem; }
.nw-head__meta { font-size: .82rem; color: var(--nx-mute); margin: .25rem 0 0; }
.nw-dot { margin: 0 .35rem; opacity: .4; }

/* Contextchips naast de titel */
.nw-strip { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.nw-strip__item {
    display: flex; align-items: center; gap: .6rem;
    background: var(--nx-sheet); border-radius: 999px;
    padding: .35rem .95rem .35rem .35rem;
}
.nw-strip__ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 30px; }
.nw-strip__ico svg { width: 15px; height: 15px; }
.nw-strip__t { font-family: var(--nx-display); font-size: .82rem; font-weight: 600; line-height: 1.15; display: block; }
.nw-strip__m { font-size: .68rem; color: var(--nx-mute); display: block; }

/* ══ 4. PANELEN ═════════════════════════════════════════════════════ */
.nw-panel {
    background: var(--nx-panel) !important;
    border: 0 !important; box-shadow: none !important;
    border-radius: var(--nx-r-out);
    padding: var(--nx-gap);
    margin-bottom: 12px;
}
.nw-panel__bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem .7rem; }
.nw-panel__ico { width: 30px; height: 30px; border-radius: 50%; background: var(--nx-ink); color: #FBF6EF; display: grid; place-items: center; flex: 0 0 30px; }
.nw-panel__ico svg { width: 15px; height: 15px; }
.nw-panel h2, .nw-panel__ttl { font-family: var(--nx-display); font-size: .95rem; font-weight: 600; letter-spacing: -.02em; }
.nw-panel__act { margin-left: auto; display: flex; gap: .3rem; }
.nw-panel__act a, .nw-panel__act button {
    width: 28px; height: 28px; border-radius: 50%; background: var(--nx-sheet); border: 0;
    display: grid; place-items: center; color: var(--nx-body); transition: transform .15s ease;
}
.nw-panel__act a:hover { transform: scale(1.1); }
.nw-panel__act svg { width: 13px; height: 13px; }

.nw-sheet { background: var(--nx-sheet); border-radius: var(--nx-r-in); padding: 1.1rem 1.2rem; }
.nw-sheet + .nw-sheet { margin-top: var(--nx-gap); }

/* ══ 5. MOZAÏEK ═════════════════════════════════════════════════════ */
.nw-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nx-gap); }
.nw-tile {
    position: relative; border: 0 !important;
    border-radius: var(--nx-r-in);
    padding: .95rem 1rem 1rem;
    min-height: 118px;
    display: flex; flex-direction: column;
    transition: transform .16s cubic-bezier(.2,.8,.3,1);
}
.nw-tile:hover { transform: translateY(-2px); }
.nw-tile__top { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.nw-tile__ico { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.7); display: grid; place-items: center; flex: 0 0 28px; }
.nw-tile__ico svg { width: 14px; height: 14px; }
.nw-tile__lbl { font-size: .77rem; font-weight: 600; letter-spacing: -.01em; }
.nw-tile__exp { margin-left: auto; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.6); display: grid; place-items: center; color: rgba(25,29,24,.5); }
.nw-tile__exp svg { width: 11px; height: 11px; }
.nw-tile__val { font-family: var(--nx-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: auto; }
.nw-tile__sub { font-size: .72rem; color: rgba(25,29,24,.68); margin-top: .35rem; }
.nw-tile__sub strong { color: var(--nx-ink); }
.nw-tile--wide { grid-column: span 2; }
.nw-tile--wide .nw-tile__val { font-size: 2.4rem; }

.nw-t-peach { background: var(--nx-peach); }
.nw-t-blush { background: var(--nx-blush); }
.nw-t-rose  { background: var(--nx-rose); }
.nw-t-lilac { background: var(--nx-lilac); }
.nw-t-sky   { background: var(--nx-sky); }
.nw-t-mint  { background: var(--nx-mint); }
.nw-t-butter{ background: var(--nx-butter); }

/* Oude kaartnamen erven het nieuwe uiterlijk */
.nw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--nx-gap); margin-bottom: 12px; }
.nw-card {
    border: 0 !important; border-radius: var(--nx-r-in);
    padding: .95rem 1rem 1rem; position: relative;
    display: flex; flex-direction: column; gap: .25rem;
    background: var(--nx-panel); box-shadow: none;
    transition: transform .16s cubic-bezier(.2,.8,.3,1);
}
.nw-card:hover { transform: translateY(-2px); }
.nw-card__label { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(25,29,24,.5); }
.nw-card__value { font-family: var(--nx-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.02; font-variant-numeric: tabular-nums; }
.nw-card__note  { font-size: .73rem; color: rgba(25,29,24,.66); }
.nw-card--peach { background: var(--nx-peach); }
.nw-card--mint, .nw-card--sage { background: var(--nx-mint); }
.nw-card--lav, .nw-card--plum  { background: var(--nx-lilac); }
.nw-card--mist  { background: var(--nx-sky); }
.nw-card--clay  { background: var(--nx-blush); }
.nw-card--plain { background: var(--nx-butter); }

.nw-hero {
    border: 0 !important; box-shadow: none !important;
    border-radius: var(--nx-r-out); padding: 1.9rem 2rem; margin-bottom: 12px;
    background: var(--nx-peach);
}
.nw-hero__label  { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(25,29,24,.55); margin: 0 0 .45rem; }
.nw-hero__amount { font-family: var(--nx-display); font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -.05em; line-height: .95; color: var(--nx-ink); font-variant-numeric: tabular-nums; margin: 0; }
.nw-hero__note, .nw-hero__explain { color: rgba(25,29,24,.6); }

/* ══ 6. INDELING ════════════════════════════════════════════════════ */
.nw-split { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 12px; align-items: start; }
.nw-duo   { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1180px) { .nw-split { grid-template-columns: 1fr; } .nw-duo { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .nw-mosaic { grid-template-columns: repeat(2, 1fr); } .nw-tile--wide { grid-column: span 2; } }

/* ══ 7. RIJEN, PROFIEL, DETAILS ═════════════════════════════════════ */
.nw-row { display: flex; align-items: center; gap: .75rem; padding: .58rem 0; }
.nw-row + .nw-row { box-shadow: inset 0 1px 0 rgba(25,29,24,.06); }
.nw-row__ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 34px; }
.nw-row__ico svg { width: 16px; height: 16px; }
.nw-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .08rem; }
.nw-row__t { font-size: .85rem; font-weight: 500; display: block; }
.nw-row__m { font-size: .72rem; color: var(--nx-mute); display: block; }
.nw-row__amt { font-family: var(--nx-display); font-weight: 600; font-size: .94rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw-row__amt.is-neg { color: #A6543E; }
.nw-row__amt s { opacity: .45; }

.nw-profile { text-align: center; padding: 1.5rem 1.2rem 1.15rem; }
.nw-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto .75rem; background: linear-gradient(140deg, var(--nx-rose), var(--nx-lilac)); display: grid; place-items: center; font-family: var(--nx-display); font-size: 1.8rem; font-weight: 700; color: #fff; }
.nw-profile__nm { font-family: var(--nx-display); font-size: 1.14rem; font-weight: 700; letter-spacing: -.03em; }
.nw-profile__rl { font-size: .76rem; color: var(--nx-mute); margin-top: .18rem; line-height: 1.45; }
.nw-profile__acts { display: flex; justify-content: center; gap: .4rem; margin-top: .9rem; }
.nw-profile__acts a { width: 34px; height: 34px; border-radius: 50%; background: var(--nx-panel); display: grid; place-items: center; color: var(--nx-ink); transition: background .15s ease, transform .15s ease; }
.nw-profile__acts a:hover { background: var(--nx-mint); transform: translateY(-1px); }
.nw-profile__acts svg { width: 15px; height: 15px; }

.nw-detail { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; }
.nw-detail + .nw-detail { box-shadow: inset 0 1px 0 rgba(25,29,24,.06); }
.nw-detail > span { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.nw-detail__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--nx-panel); display: grid; place-items: center; flex: 0 0 30px; }
.nw-detail__ico svg { width: 14px; height: 14px; }
.nw-detail__k { font-size: .65rem; color: var(--nx-mute); letter-spacing: .04em; display: block; }
.nw-detail__v { font-size: .85rem; font-weight: 600; display: block; }

/* ══ 8. VOORTGANG, PILLEN, TABELLEN ═════════════════════════════════ */
.nw-prog__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.nw-prog__lbl { font-size: .8rem; font-weight: 500; }
.nw-prog__val { font-family: var(--nx-display); font-weight: 600; font-size: .83rem; }
.nw-bar { height: 9px; border-radius: 99px; background: rgba(25,29,24,.07); overflow: hidden; }
.nw-bar span, .nw-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--nx-mint), var(--nx-sage)); }
.nw-scale { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .65rem; color: var(--nx-mute); }

.nw-btn, .nw-btn--ghost, .nw-switch a, .nw-badge, .nw-chip {
    font-family: var(--nx-display); font-weight: 600; letter-spacing: -.01em;
    border: 0 !important; border-radius: 999px;
}
.nw-btn { background: var(--nx-ink); color: #FBF6EF; padding: .62rem 1.3rem; }
.nw-btn:hover { background: #272D26; transform: translateY(-1px); }
.nw-btn--ghost { background: var(--nx-sheet); color: var(--nx-ink); padding: .55rem 1.15rem; }
.nw-btn--ghost:hover { background: var(--nx-panel); transform: translateY(-1px); }
.nw-switch { border: 0 !important; background: var(--nx-panel); border-radius: 999px; padding: .22rem; }
.nw-switch a { padding: .42rem 1.05rem; color: var(--nx-body); font-weight: 500; }
.nw-switch a.is-on { background: var(--nx-sheet); color: var(--nx-ink); }
.nw-badge { padding: .26rem .68rem; font-size: .72rem; background: var(--nx-panel); color: var(--nx-body); }
.nw-badge--delivered { background: var(--nx-mint); color: #2F5A35; }
.nw-badge--packed    { background: var(--nx-peach); color: #855C22; }
.nw-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .62rem; font-size: .7rem; }
.nw-chip--mint { background: var(--nx-mint); color: #2F5A35; }
.nw-chip--rose { background: var(--nx-rose); color: #8B3354; }
.nw-chip--sky  { background: var(--nx-sky);  color: #2A5271; }

.nw-table { border-collapse: separate; border-spacing: 0 4px; width: 100%; }
.nw-table th { border: 0 !important; padding: .35rem .9rem .6rem; font-size: .63rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-mute); text-align: left; }
.nw-table td { border: 0 !important; padding: .85rem .9rem; font-size: .9rem; background: transparent; }
.nw-table tbody tr:hover td { background: var(--nx-panel); }
.nw-table tbody tr td:first-child { border-radius: 12px 0 0 12px; }
.nw-table tbody tr td:last-child  { border-radius: 0 12px 12px 0; }
.nw-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

.nw-alert {
    display: block !important; border: 0 !important; border-radius: var(--nx-r-in);
    padding: .95rem 1.2rem; font-size: .88rem; line-height: 1.55;
    background: var(--nx-butter); color: #6A5316; box-shadow: none; margin-bottom: 12px;
}
.nw-alert--ok    { background: var(--nx-mint);  color: #2F5A35; }
.nw-alert--error { background: var(--nx-blush); color: #8A3D2A; }
.nw-alert a { text-decoration: underline; text-underline-offset: 2px; }

.nw-fine, .nw-sub, .nw-empty { color: var(--nx-mute); }
.nw-chart__bar--granted { background: var(--nx-mint); }
.nw-chart__bar--spent   { background: var(--nx-peach); }
.nw-chart__tip { background: var(--nx-ink); border-radius: 14px; }
.nw-chart__tip i.g { background: var(--nx-mint); }
.nw-chart__tip i.s { background: var(--nx-peach); }

/* ══ RESPONSIEF ═════════════════════════════════════════════════════ */

/* Tot 1400px: de rechterkolom smaller, mozaïek blijft drie breed. */
@media (max-width: 1400px) {
    .nw-split { grid-template-columns: minmax(0,1fr) 300px; }
}

/* Tablet: rechterkolom onder de hoofdkolom, panelen naast elkaar blijven. */
@media (max-width: 1180px) {
    .nw-split { grid-template-columns: 1fr; }
    .nw-duo   { grid-template-columns: 1fr; }
    .crm-shell { grid-template-columns: 224px 1fr !important; }
}

/* Vanaf hier stapelt alles: de zijbalk gaat naar boven, de tegels onder
   elkaar. Een mozaïek van drie kolommen is op een telefoon onleesbaar. */
@media (max-width: 900px) {
    .crm-shell {
        grid-template-columns: 1fr !important;
        grid-template-rows: 64px auto 1fr !important;
        grid-template-areas:
            "brand"
            "topbar"
            "panel" !important;
        height: auto !important;
        min-height: 100vh;
    }
    .crm-shell__sidebar { display: none !important; }
    .crm-shell__brand   { padding: 0 1rem !important; }
    /* topbalk-opmaak staat in het eigen blok onderaan dit bestand */
    .crm-shell__panel   { border-top-left-radius: 0 !important; }
    .crm-panel__inner   { padding: 1.2rem !important; }

    .nw-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .nw-strip { margin-left: 0; width: 100%; }
    .nw-strip__item { flex: 1 1 auto; }

    .nw-mosaic { grid-template-columns: 1fr; }
    .nw-tile--wide { grid-column: span 1; }
    .nw-tile { min-height: 0; }
    .nw-tile__val { font-size: 1.9rem; }
    .nw-tile--wide .nw-tile__val { font-size: 2.2rem; }

    .nw-head h1 { font-size: 2.1rem; }
    .nw-panel { padding: 6px; border-radius: 18px; }
    .nw-sheet { padding: .95rem 1rem; }
}

@media (max-width: 520px) {
    .nw-strip { flex-direction: column; }
    .nw-strip__item { width: 100%; }
    .nw-row__amt { font-size: .88rem; }
}

.nw-strip__ico,
.nw-panel__ico,
.nw-tile__ico,
.nw-tile__exp,
.nw-row__ico,
.nw-detail__ico,
.nw-profile__acts a,
.nw-panel__act a,
.nw-panel__act button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

/* De navigatie-iconen op één vaste breedte, anders schuiven de labels. */
.crm-nav__item svg { width: 18px; height: 18px; opacity: .72; }
.crm-nav__item--active svg { opacity: 1; }
.crm-nav__icon { display: inline-flex !important; align-items: center; justify-content: center; width: 18px; flex: 0 0 18px; }

/* Titel en icoon in een paneelkop delen dezelfde middellijn. */
.nw-panel__bar { align-items: center; }
.nw-panel h2, .nw-panel__ttl { line-height: 1.15; }

/* Tegel-kop: label optisch centreren naast de chip. */
.nw-tile__top { align-items: center; }
.nw-tile__lbl { line-height: 1.2; }

/* ══ CORRECTIES NA REVIEW ═══════════════════════════════════════════ */

/* De hoek linksboven: het canvas ligt als een vlak op het witte chroom in
   plaats van er strak tegenaan. Ruim genoeg om te zien — 28px. */
.crm-shell__panel { border-top-left-radius: 28px !important; }

/* Inklappen is eruit: één hamburger, en die alleen op mobiel. */
.crm-shell__collapse { display: none !important; }
.crm-shell__mobile-menu { display: none !important; }
@media (max-width: 900px) { .crm-shell__mobile-menu { display: inline-flex !important; } }

@media (max-width: 640px) {
    .crm-shell__user-name { display: none; }
}

/* ── Eén raster, één tegelmaat ─────────────────────────────────────
   De heldtegel over de volle breedte, daaronder vier gelijke tegels. Zo
   loopt elke rasterlijn door en zijn de bedragen binnen een rij even groot. */
.nw-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nw-tile--hero { grid-column: 1 / -1; }
.nw-tile--wide { grid-column: 1 / -1; }
.nw-tile__val { font-size: 1.8rem; }
.nw-tile--hero .nw-tile__val { font-size: clamp(2.4rem, 4vw, 3.2rem); }
.nw-tile--hero { padding: 1.3rem 1.4rem 1.4rem; }

/* Actieknop in de heldtegel — het dashboard hoort naar de winkel te leiden. */
.nw-tile__cta {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: .9rem; align-self: flex-start;
    background: var(--nx-ink); color: #FBF6EF;
    font-family: var(--nx-display); font-weight: 600; font-size: .85rem;
    padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none;
    transition: transform .15s ease, background .15s ease;
}
.nw-tile__cta:hover { background: #2A312A; transform: translateY(-1px); color: #FBF6EF; }

/* ── Voortgang naast bewegingen: 42/58 in plaats van half om half ──
   De voortgangskaart draagt minder inhoud, dus die hoeft ook minder ruimte. */
.nw-duo { grid-template-columns: 42fr 58fr; }
@media (max-width: 1180px) { .nw-duo { grid-template-columns: 1fr; } }

/* Mijlpalen vullen de voortgangskaart */
.nw-steps { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.nw-steps li { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 0; }
.nw-steps li + li { box-shadow: inset 0 1px 0 rgba(25,29,24,.06); }
.nw-steps li > span:last-child { display: flex; flex-direction: column; gap: .1rem; }
.nw-steps__ico {
    width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nx-panel); color: var(--nx-mute); margin-top: .1rem;
}
.nw-steps li.is-done .nw-steps__ico { background: var(--nx-mint); color: #2F5A35; }
.nw-steps__t { font-size: .85rem; font-weight: 500; }
.nw-steps__m { font-size: .74rem; color: var(--nx-mute); }
.nw-vat { margin: 1rem 0 0; font-size: .74rem; line-height: 1.5; }

/* ── Eén icoonstijl ────────────────────────────────────────────────
   De tegels hadden witte vierkantjes en "Mijn gegevens" ronde beige vlakjes:
   twee stijlen voor hetzelfde element. Overal een afgerond vierkant. */
.nw-detail__ico { border-radius: 9px; }
.nw-tile__ico   { border-radius: 9px; }
.nw-row__ico    { border-radius: 9px; }
.nw-panel__ico  { border-radius: 9px; }
.nw-strip__ico  { border-radius: 9px; }

/* ── Eén avatarkleur ───────────────────────────────────────────────
   De avatar in de topbalk was groen, die op de profielkaart roze. Zelfde
   persoon, dus dezelfde kleur — en roze staat in dit palet voor "netwerk". */
.nw-avatar {
    background: var(--nx-sage);
    color: #FBF6EF;
}

/* Doorgestreepte bedragen in dezelfde grijstint als de rest van de subtekst. */
.nw-row__amt s { color: var(--nx-mute); opacity: 1; }

/* ── Kopieerknop bij de deel-link ─────────────────────────────────── */
.nw-copy { display: flex; gap: .4rem; align-items: stretch; }
.nw-copy__field {
    flex: 1 1 auto; min-width: 0;
    background: var(--nx-panel); border: 0; border-radius: 11px;
    padding: .65rem .8rem; font-family: var(--nx-text); font-size: .78rem;
    color: var(--nx-body);
}
.nw-copy__btn {
    flex: 0 0 42px; border: 0; border-radius: 11px; cursor: pointer;
    background: var(--nx-ink); color: #FBF6EF;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.nw-copy__btn:hover { background: #2A312A; }
.nw-copy__btn.is-done { background: var(--nx-sage); }

/* Panelen in de rechterkolom sluiten netjes af onderaan het scherm. */
.nw-split > div:last-child > .nw-panel:last-child { margin-bottom: 0; }

/* ══ COMPACT: alles binnen de vouw op 1200×800 ══════════════════════
   Gecomprimeerd met indeling, niet met lettergrootte. Sublabels blijven op
   13px; wat kleiner wordt is onleesbaar en dan is de winst geen winst. ══ */

.nw--compact { --nx-gap: 8px; }
.nw--compact .nw-panel { margin-bottom: 10px; padding: var(--nx-gap); }
.nw--compact .nw-sheet { padding: .85rem 1rem; }
.nw--compact .nw-panel__bar { padding: .4rem .55rem .55rem; }
.nw--compact .nw-duo { gap: 10px; }
.nw--compact .nw-split { gap: 10px; }
.nw-panel--flush { padding: var(--nx-gap) !important; }

/* Kop: twee regels, chips verticaal gecentreerd op de naam. */
.nw--compact .nw-head { align-items: center; margin-bottom: .9rem; gap: 1.2rem; }
.nw--compact .nw-head h1 { font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.1; }
.nw--compact .nw-head__meta { font-size: .81rem; margin-top: .15rem; }
.nw-head__who { min-width: 0; }

/* ── 1. Heldstrip: bedrag en actie op één regel ────────────────────
   Was een halve viewport hoog door label, bedrag, subtekst en knop onder
   elkaar. Naast elkaar is dezelfde informatie in een derde van de hoogte. */
.nw-hero-strip {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 1.2rem;
    border-radius: var(--nx-r-in);
    min-height: 0;
}
.nw-hero-strip__ico {
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.7);
}
.nw-hero-strip__body { display: flex; flex-direction: column; gap: .1rem; }
.nw-hero-strip__lbl { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: rgba(25,29,24,.62); }
.nw-hero-strip__val {
    font-family: var(--nx-display); font-weight: 700;
    font-size: clamp(2rem, 3vw, 2.75rem);   /* ~44px */
    letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums;
}
.nw-hero-strip__sub { margin: 0; font-size: .81rem; color: rgba(25,29,24,.68); max-width: 34ch; }
.nw-hero-strip__cta {
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    background: var(--nx-ink); color: #FBF6EF;
    font-family: var(--nx-display); font-weight: 600; font-size: .86rem;
    padding: .6rem 1.2rem; border-radius: 999px; text-decoration: none;
    transition: transform .15s ease, background .15s ease;
}
.nw-hero-strip__cta:hover { background: #2A312A; color: #FBF6EF; transform: translateY(-1px); }

/* ── 2. Vier statistieken op één rij ───────────────────────────────── */
.nw-statrow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--nx-gap); }
.nw-stat {
    border-radius: var(--nx-r-in);
    padding: .8rem .9rem .85rem;
    display: flex; flex-direction: column; gap: .15rem;
    transition: transform .16s cubic-bezier(.2,.8,.3,1);
}
.nw-stat:hover { transform: translateY(-2px); }
.nw-stat__top {
    display: flex; align-items: center; gap: .4rem;
    font-size: .74rem; font-weight: 600; color: rgba(25,29,24,.72);
}
.nw-stat__top svg { flex: 0 0 auto; opacity: .8; }
.nw-stat__val {
    font-family: var(--nx-display); font-weight: 700;
    font-size: 1.75rem;   /* ~28px */
    letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.nw-stat__sub {
    font-size: .74rem; color: rgba(25,29,24,.62);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 4. Rechterkolom ───────────────────────────────────────────────── */
.nw-idcard { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; background: #fff; border-radius: var(--nx-r-in); }
.nw-avatar--sm {
    width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nx-sage); color: #FBF6EF;
    font-family: var(--nx-display); font-weight: 700; font-size: 1rem;
}
.nw-idcard__txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nw-idcard__nm { font-family: var(--nx-display); font-size: 1rem; font-weight: 700; letter-spacing: -.025em; }
.nw-idcard__rl { font-size: .78rem; color: var(--nx-mute); }

/* Definitielijst zonder badges: label links, waarde rechts, één regel. */
.nw-dl { margin: 0; }
.nw-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .45rem 0; }
.nw-dl > div + div { box-shadow: inset 0 1px 0 rgba(25,29,24,.06); }
.nw-dl dt { font-size: .78rem; color: var(--nx-mute); margin: 0; }
.nw-dl dd { margin: 0; font-size: .84rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Uitlegballon ──────────────────────────────────────────────────
   Het title-attribuut gaf de trage grijze browsertooltip: pas na ongeveer een
   seconde zichtbaar, op aanraakschermen helemaal niet, en niet vorm te geven.
   Deze verschijnt direct bij hover én bij toetsenbordfocus.

   De ballon opent naar linksonder. Dat is geen smaak maar noodzaak: het
   paneel eromheen scrollt, en alles wat buiten de rechterrand valt wordt
   afgeknipt. */
.nw-tip {
    position: relative;
    width: 26px; height: 26px; border-radius: 50%; cursor: help;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: #fff; color: var(--nx-mute);
    transition: color .15s ease, background .15s ease;
}
.nw-tip:hover, .nw-tip:focus-visible { color: var(--nx-ink); background: var(--nx-panel); outline: none; }
.nw-tip:focus-visible { box-shadow: 0 0 0 2px var(--nx-sage); }

.nw-tip__bubble {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: max-content; max-width: 250px;
    padding: .6rem .75rem;
    background: var(--nx-ink); color: #FBF6EF;
    border-radius: 12px;
    font-family: var(--nx-text); font-size: .78rem; font-weight: 400;
    line-height: 1.45; text-align: left;
    box-shadow: 0 8px 24px -10px rgba(25,29,24,.5);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    pointer-events: none; z-index: 30;
}
.nw-tip__bubble::before {
    content: ""; position: absolute; bottom: 100%; right: 9px;
    border: 6px solid transparent; border-bottom-color: var(--nx-ink);
}
.nw-tip:hover .nw-tip__bubble,
.nw-tip:focus .nw-tip__bubble,
.nw-tip:focus-visible .nw-tip__bubble {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* De kopbalk mag de ballon niet afknippen. */
.nw-panel__act { overflow: visible; }
.nw-panel__bar { position: relative; z-index: 2; }

/* ── 5. Transacties krapper ────────────────────────────────────────── */
.nw--compact .nw-row { padding: .48rem 0; gap: .65rem; }
.nw--compact .nw-row__ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; }
.nw--compact .nw-row__t { font-size: .84rem; }
.nw--compact .nw-row__m { font-size: .72rem; }
.nw-more {
    display: block; margin-top: .55rem; padding-top: .55rem;
    box-shadow: inset 0 1px 0 rgba(25,29,24,.06);
    font-family: var(--nx-display); font-size: .8rem; font-weight: 600;
    color: var(--nx-sage); text-decoration: none;
}
.nw-more:hover { color: var(--nx-ink); }

/* Voortgang compact */
.nw--compact .nw-scale { margin-top: .3rem; }
.nw--compact .nw-vat { margin-top: .7rem; font-size: .76rem; }

/* ── 6. Breekpunten ────────────────────────────────────────────────
   De eis "alles binnen de vouw" geldt vanaf 1200px. Daaronder mag er
   gescrold worden — anders wordt alles een postzegel. */
@media (max-width: 1180px) {
    .nw-statrow { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .nw-hero-strip { grid-template-columns: auto 1fr; row-gap: .8rem; }
    .nw-hero-strip__sub { grid-column: 1 / -1; max-width: none; }
    .nw-hero-strip__cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 620px) {
    .nw-statrow { grid-template-columns: 1fr; }
    .nw-hero-strip { grid-template-columns: 1fr; }
    .nw-hero-strip__ico { display: none; }
}

/* Verdienstappen (Beloningen-pagina) */
.nw-steps { list-style: none; margin: 0; padding: 0; }
.nw-steps li { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 0; }
.nw-steps li + li { box-shadow: inset 0 1px 0 rgba(25,29,24,.06); }
.nw-steps li > span:last-child { display: flex; flex-direction: column; gap: .1rem; }
.nw-steps__ico {
    width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nx-panel); color: var(--nx-mute); margin-top: .1rem;
}
.nw-steps li.is-done .nw-steps__ico { background: var(--nx-mint); color: #2F5A35; }
.nw-steps__t { font-size: .87rem; font-weight: 500; }
.nw-steps__m { font-size: .76rem; color: var(--nx-mute); }

/* ══ MAATVOERING: structuur van 5.4, ruimte van 5.3 ═════════════════
   De compacte ronde schoot door: alles even strak, geen ademruimte, en de
   pagina eindigde op tweederde met een gapend gat eronder. De indeling was
   goed, de maatvoering niet. Richtpunt: inhoud eindigt rond 90% van een
   viewport van 800px — niet vol gepropt, niet halfleeg. ═══════════════ */

.crm-shell { background: #FFFFFF !important; }

/* ── Hero: subtekst weer ónder het bedrag ──────────────────────────
   Naast elkaar lazen bedrag en toelichting als twee concurrerende blokken.
   Onder elkaar hoort de toelichting bij het bedrag, en dat is wat het is. */
.nw-hero-strip {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 1.5rem;
}
.nw-hero-strip__body { gap: .2rem; }
.nw-hero-strip__lbl { font-size: .76rem; }
.nw-hero-strip__val { font-size: clamp(2.3rem, 3.4vw, 3.1rem); }
.nw-hero-strip__sub {
    display: block; margin: .15rem 0 0;
    font-size: .84rem; color: rgba(25,29,24,.68); max-width: 42ch;
}
.nw-hero-strip__ico { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
.nw-hero-strip__cta { padding: .68rem 1.3rem; font-size: .88rem; }

/* ── Statrij: zelfde vier kolommen, meer lucht ─────────────────────── */
.nw-stat { padding: 1.15rem 1.05rem 1.2rem; gap: .28rem; }
.nw-stat__val { font-size: 1.85rem; }
.nw-stat__top { font-size: .76rem; margin-bottom: .15rem; }
.nw-stat__sub { font-size: .76rem; }

/* ── Profielkaart: tussenmaat, twee regels ─────────────────────────── */
.nw-idcard { padding: 1.05rem 1.15rem; gap: .9rem; align-items: center; }
.nw-avatar--sm { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.25rem; }
.nw-idcard__nm { font-size: 1.05rem; }
.nw-idcard__rl { font-size: .79rem; line-height: 1.45; }

/* ── Mijn gegevens: icoontjes terug, regelhoogte compact ───────────── */
.nw-dl > div { padding: .55rem 0; }
.nw-dl dt { display: flex; align-items: center; gap: .55rem; font-size: .8rem; }
.nw-dl__ico {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nx-panel); color: var(--nx-mute);
}
.nw-dl dd { font-size: .85rem; }

/* ── Kaarten in een rij lopen gelijk af ────────────────────────────
   Transacties is hoger door het derde item plus de link; zonder dit eindigt
   Voortgang eerder en oogt de rij scheef. */
.nw-duo { align-items: stretch; }
.nw-duo > .nw-panel { display: flex; flex-direction: column; height: 100%; margin-bottom: 0; }
.nw-duo > .nw-panel > .nw-sheet { flex: 1 1 auto; }

/* De uitleg hoort bij de balk, niet als losse alinea eronder. */
.nw-prog__note {
    margin: .5rem 0 0;
    font-size: .76rem; line-height: 1.5;
    color: var(--nx-mute);
}

/* ── Ademruimte terug ──────────────────────────────────────────────── */
.nw--compact .nw-panel { margin-bottom: 12px; }
.nw--compact .nw-sheet { padding: 1rem 1.15rem; }
.nw--compact .nw-duo   { gap: 12px; margin-bottom: 12px; }
.nw--compact .nw-split { gap: 12px; }
.nw--compact .nw-head  { margin-bottom: 1.15rem; }
.nw--compact .nw-row   { padding: .58rem 0; }

@media (max-width: 1180px) {
    .nw-hero-strip { grid-template-columns: auto 1fr; }
    .nw-hero-strip__cta { grid-column: 1 / -1; justify-self: start; margin-top: .3rem; }
    .nw-duo > .nw-panel { height: auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   STYLINGHAKEN — ambassadeur-dashboard
   ══════════════════════════════════════════════════════════════════════

   Elk vlak heeft een eigen klasse, zodat je één element kunt aanpassen
   zonder de structuur te raken of een selector te moeten uitvogelen.
   Hieronder staan ze allemaal, met wat ze omvatten.

   ── PANELEN (de crème vlakken met de kop erboven) ──────────────────
   .nw-panel--balance        heldstrip met het besteedbaar tegoed
   .nw-panel--stats          de rij van vier statistieken
   .nw-panel--progress       voortgang naar de beloning
   .nw-panel--transactions   de laatste drie transacties
   .nw-panel--profile        naam en avatar, rechtsboven
   .nw-panel--details        Mijn gegevens
   .nw-panel--share          Deel je link
   .nw-panel--flush          variant zonder kopbalk (alleen binnenmarge)

   ── STATISTIEKTEGELS ───────────────────────────────────────────────
   .nw-stat--locked          Geblokkeerd
   .nw-stat--month           Deze maand
   .nw-stat--lifetime        Totaal verdiend
   .nw-stat--redeemed        Al ingewisseld

   ── CHIPS NAAST DE BEGROETING ──────────────────────────────────────
   .nw-strip__item--orders   aantal bestellingen
   .nw-strip__item--network  omvang van het netwerk

   ── TRANSACTIEREGELS (per soort) ───────────────────────────────────
   .nw-row--earn             cashback binnengekomen
   .nw-row--reward           beloning uit het netwerk
   .nw-row--welcome          welkomstbonus
   .nw-row--spend            tegoed uitgegeven
   .nw-row--reversed         teruggedraaid na retour

   ── REGELS IN MIJN GEGEVENS ────────────────────────────────────────
   .nw-dl__row--code         ambassadeurnummer
   .nw-dl__row--network      direct en indirect
   .nw-dl__row--cumulative   cumulatief besteed
   .nw-dl__row--order        laatste bestelling

   ── KLEURVLAKKEN (los te gebruiken op elke tegel) ──────────────────
   .nw-t-peach  .nw-t-blush  .nw-t-rose  .nw-t-lilac
   .nw-t-sky    .nw-t-mint   .nw-t-butter

   Voorbeeld — alleen de tegel "Deze maand" een andere kleur geven:

       .nw-stat--month { background: var(--nx-blush); }

   Voorbeeld — de heldstrip lager maken zonder de rest te raken:

       .nw-panel--balance .nw-hero-strip { padding-block: 1rem; }

   De kleurvariabelen (--nx-peach en verder) staan bovenaan dit bestand en
   gelden voor het hele platform; wijzig je die, dan verandert alles mee.
   ────────────────────────────────────────────────────────────────────── */

/* Escape sluit de ballon: zonder dit blijft hij open zolang de focus staat. */
.nw-tip.is-hidden .nw-tip__bubble { opacity: 0 !important; visibility: hidden !important; }

/* ══ BELONINGEN ═════════════════════════════════════════════════════ */
.nw-hero-strip--reward { align-items: center; }
.nw-reward-side { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.nw-reward-pct {
    font-family: var(--nx-display); font-weight: 700; font-size: 1.5rem;
    letter-spacing: -.03em; color: #2F5A35; font-variant-numeric: tabular-nums;
}
.nw-reward-bar { padding: 1rem 1.5rem 1.15rem; background: #fff; border-radius: var(--nx-r-in); margin-top: var(--nx-gap); }
.nw-panel--explain .nw-sheet { padding: 1.3rem 1.4rem 1.4rem; }
.nw-chip strong { font-weight: 700; }

/* Eén kleur in de balk. Een verloop van salie naar messing suggereert dat er
   onderweg iets verandert, en dat is niet zo — het is één doorlopende teller. */
.nw-bar span, .nw-bar i { background: var(--nx-sage) !important; }

/* ══ BESTELLINGEN & TABELLEN ════════════════════════════════════════
   De kolommen stonden uitgesmeerd over de volle breedte, waardoor een order
   met vier waarden aan weerszijden van het scherm hing. Links uitlijnen en
   afkappen op 1200px leest als een lijst in plaats van als een spreadsheet. */
.nw-table-wrap { max-width: none; }
.nw-table th, .nw-table td { text-align: left; }
.nw-table th.nw-num, .nw-table td.nw-num { text-align: left; }
.nw-table th:first-child, .nw-table td:first-child { padding-left: 1rem; }

/* Kolommen krijgen hun natuurlijke breedte, met de laatste die de rest opeet
   zodat er geen gaten tussen vallen. */
.nw-table { table-layout: auto; width: 100%; }
.nw-table td:last-child, .nw-table th:last-child { width: 100%; }

/* ══ LEESBREEDTE ════════════════════════════════════════════════════
   Eén maat voor alles: 1200px, gecentreerd. Op een laptop vult dat het
   scherm, op een grote monitor staat het als blok in het midden.

   700px bleek te smal: een tabel met zes kolommen brak daar de koppen over
   drie regels en de datums over drie. Een pagina die smal moet blijven —
   een formulier bijvoorbeeld — vraagt dat zelf aan met .nw--narrow. ══════ */
.nw {
    max-width: 1200px;
    margin-inline: auto;
    width: 100%;
}
.nw--narrow { max-width: 760px; }
.nw--wide   { max-width: 1200px; }

/* Tabellen vullen hun paneel; de kolommen krijgen hun natuurlijke breedte. */
.nw .nw-table,
.nw .nw-panel--table { max-width: none; }

/* Koppen en datums breken niet meer af — dat was de kolomdruk, niet de tekst. */
.nw-table th { white-space: nowrap; }
.nw-table td:first-child { white-space: nowrap; }
.nw-table .nw-nowrap { white-space: nowrap; }

/* ══ NETWERK — deelblok ═════════════════════════════════════════════
   Het blok had een eigen opmaak met eigen marges, waardoor de buitenrand
   niet aansloot op de panelen eronder. Het is nu een gewoon paneel. ═════ */
.nw-share__row { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.nw-share__row .nw-copy__field { flex: 1 1 320px; min-width: 0; }
.nw-share__copy, .nw-share__send {
    display: inline-flex !important; align-items: center; gap: .45rem;
    white-space: nowrap; text-decoration: none;
}
.nw-share__send { background: #fff; }
.nw-share__code { margin: .8rem 0 0; font-size: .84rem; color: var(--nx-mute); }
.nw-share__code strong {
    font-family: var(--nx-display); letter-spacing: .04em;
    color: var(--nx-ink); font-size: .92rem;
}

/* ══ TABELLEN — uitlijning ══════════════════════════════════════════
   Bedragen rechts, tekst links. Dat is geen smaak: cijferkolommen lees je
   op de laatste cijfers, en die moeten dus onder elkaar staan. */
.nw-table td.nw-num, .nw-table th.nw-num { text-align: right; }
.nw-table td, .nw-table th { vertical-align: middle; }
.nw-table td .nw-badge { white-space: nowrap; }

/* De omschrijvingskolom krijgt de ruimte, de rest zo smal als nodig. */
.nw-table td:nth-child(2), .nw-table th:nth-child(2) { width: 100%; }
.nw-table td:last-child, .nw-table th:last-child { width: auto; }

/* ══ TABELRIJEN OP EIGEN VLAK ═══════════════════════════════════════
   De rijen stonden rechtstreeks op het crème paneel, waardoor de tabel als
   één blok las in plaats van als losse regels. Elke rij krijgt nu een wit
   vlak met afgeronde uiteinden — hetzelfde principe als de tegels: het
   paneel vat samen, de items erin staan los. ══════════════════════════ */
.nw-table { border-collapse: separate; border-spacing: 0 6px; }
.nw-table tbody tr td {
    background: var(--nx-sheet);
    padding: .95rem 1rem;
    vertical-align: middle;
    transition: background .14s ease;
}
.nw-table tbody tr td:first-child { border-radius: var(--nx-r-in) 0 0 var(--nx-r-in); padding-left: 1.2rem; }
.nw-table tbody tr td:last-child  { border-radius: 0 var(--nx-r-in) var(--nx-r-in) 0; padding-right: 1.2rem; }
.nw-table tbody tr:hover td { background: #FFFDF9; }
.nw-table thead th { background: transparent; padding: .3rem 1rem .5rem; }
.nw-table thead th:first-child { padding-left: 1.2rem; }
.nw-table thead th:last-child  { padding-right: 1.2rem; }

/* Rijen die naar een detailpagina wijzen mogen dat laten merken. */
.nw-table tbody tr[onclick], .nw-table tbody tr.is-clickable { cursor: pointer; }

/* ── Kolombreedtes ────────────────────────────────────────────────
   Bedragen breken nooit af: "€ 76,50" over twee regels leest als twee
   getallen. De omschrijving krijgt wat overblijft, de rest zo smal als
   de inhoud vraagt. */
.nw-table td, .nw-table th { white-space: nowrap; }
.nw-table td.nw-desc, .nw-table th.nw-desc { white-space: normal; width: 100%; }
.nw-table td:nth-child(2), .nw-table th:nth-child(2) { width: auto; }
.nw-table td.nw-num, .nw-table th.nw-num { text-align: right; white-space: nowrap; }

/* De regel onder een omschrijving mag wél omlopen. */
.nw-table .nw-sub, .nw-table .nw-muted, .nw-table small { white-space: normal; }
/* geen gereserveerde ruimte nodig: de indicator zweeft over de inhoud */

/* ══════════════════════════════════════════════════════════════════════
   TOPBALK — één blok, opnieuw geschreven
   ══════════════════════════════════════════════════════════════════════
   Hiervoor stonden hier zevenenzeventig regels die over vier rondes op
   elkaar gestapeld waren: drie keer een gap, twee keer een avatarmaat, een
   hover-cirkel die groter was dan het element eronder. Die vochten met
   elkaar, en elke losse fix maakte het erger.

   Alles hieronder is de enige plek waar de topbalk wordt opgemaakt.
   Structuur van de markup:

       header.crm-shell__topbar
         └ button.crm-shell__mobile-menu     (alleen op mobiel)
         └ div.crm-topbar__spacer            (duwt de rest naar rechts)
         └ div.crm-shell__notifications
             └ button.crm-shell__icon-btn    (bel)
             └ div.crm-dropdown              (meldingen)
         └ div.crm-shell__user
             └ button.crm-shell__user-btn    (avatar + naam + chevron)
             └ div.crm-dropdown--user        (profiel / uitloggen)
   ────────────────────────────────────────────────────────────────────── */

/* ── De balk zelf ──────────────────────────────────────────────────── */
.crm-shell__topbar {
    display: flex;
    align-items: center;
    gap: 0;                       /* afstand komt uit de elementen zelf */
    height: 100%;
    padding: 0 1rem 0 1.25rem;
    background: var(--nx-header);
    border: 0;
    box-shadow: none;
}
.crm-topbar__spacer { flex: 1 1 auto; }

/* ── Belknop ───────────────────────────────────────────────────────── */
.crm-shell__notifications { position: relative; display: flex; align-items: center; }

.crm-shell__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nx-body);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.crm-shell__icon-btn:hover { background: var(--nx-panel); color: var(--nx-ink); }
.crm-shell__icon-btn:focus-visible { outline: 2px solid var(--nx-sage); outline-offset: 2px; }
.crm-shell__icon-btn svg { width: 20px; height: 20px; display: block; }

.crm-shell__badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #C4553C;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--nx-header);
}

/* ── Gebruikersknop ────────────────────────────────────────────────
   Marge links van 8px: dát is de enige afstand tussen bel en avatar.
   Eerder stonden hier drie regels die elkaar overschreven, waardoor de
   avatar over de bel heen schoof. */
.crm-shell__user { position: relative; display: flex; align-items: center; margin-left: 8px; }

.crm-shell__user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 12px 0 5px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background .15s ease;
}
.crm-shell__user-btn:hover { background: var(--nx-panel); }
.crm-shell__user-btn:focus-visible { outline: 2px solid var(--nx-sage); outline-offset: 2px; }

/* Precies één avatar, vaste maat, niets eromheen. */
.crm-shell__user-btn .crm-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--nx-sage);
    color: #FBF6EF;
    font-family: var(--nx-display);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
}

/* De naam mag krimpen maar niet verdwijnen; hij verdween eerder doordat
   flex hem tot nul terugbracht zonder min-width. */
.crm-shell__user-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--nx-display);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--nx-ink);
}

.crm-shell__user-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--nx-mute);
    transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
.crm-shell__user-chevron.is-open { transform: rotate(180deg); }
.crm-shell__user-chevron svg { width: 15px; height: 15px; display: block; }

/* ── Uitklapmenu's ─────────────────────────────────────────────────── */
.crm-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 210px;
    width: max-content;
    max-width: 300px;
    padding: 4px;
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 44px -18px rgba(25, 29, 24, .34), 0 2px 6px rgba(25, 29, 24, .06);
    z-index: 70;
}
.crm-dropdown--notifications { min-width: 300px; }

.crm-dropdown form { display: block; width: 100%; margin: 0; padding: 0; }

.crm-dropdown__item {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--nx-ink);
    font-family: var(--nx-text);
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .13s ease;
}
.crm-dropdown__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--nx-mute);
}
.crm-dropdown__ico svg { width: 18px; height: 18px; display: block; }
.crm-dropdown__label { min-width: 0; }

.crm-dropdown__item:hover { background: var(--nx-panel); }
.crm-dropdown__item:hover .crm-dropdown__ico { color: var(--nx-ink); }
.crm-dropdown__item:focus-visible {
    outline: 2px solid var(--nx-sage);
    outline-offset: -2px;
    background: var(--nx-panel);
}

/* Destructief: label en icoon dezelfde tint. Alleen een rood icoon naast
   grijze tekst leest als een foutmelding in plaats van een keuze. */
.crm-dropdown__item--danger,
.crm-dropdown__item--danger .crm-dropdown__label,
.crm-dropdown__item--danger .crm-dropdown__ico { color: #A6432E; }
.crm-dropdown__item--danger:hover { background: #FBEDE9; }

.crm-dropdown__divider { height: 1px; margin: 4px 0; border: 0; background: rgba(25, 29, 24, .09); }

.crm-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px 16px 8px;
    font-size: .84rem;
}
.crm-dropdown__body { padding: 0 4px; max-height: 320px; overflow-y: auto; }
.crm-dropdown__footer-link {
    display: block;
    padding: 10px 16px;
    margin-top: 2px;
    border-radius: 8px;
    color: var(--nx-sage);
    font-size: .84rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.crm-dropdown__footer-link:hover { background: var(--nx-panel); }

/* ── Scrollen: geen systeembalk, wel een eigen indicator ───────────
   De systeembalk neemt ruimte in en tekent een spoor dat afsteekt tegen het
   crème. Smaller maken hielp niet, verplaatsen naar de vensterrand ook niet
   echt — hij blijft een grijze streep in een ontwerp dat er geen heeft.

   Daarom is hij helemaal weg, en tekenen we er zelf een: vier pixels breed,
   zwevend over de inhoud dus zonder ruimte in te nemen, en alleen zichtbaar
   terwijl je scrollt. Na een halve seconde stilte vervaagt hij.

   Het scrollen zelf verandert niet — wiel, trackpad, toetsenbord en
   spatiebalk werken gewoon. Alleen het slepen aan een balk vervalt, en dat
   doet vrijwel niemand op een dashboard. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

.crm-shell {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}
.crm-shell__brand,
.crm-shell__topbar { position: sticky; top: 0; z-index: 40; }
.crm-shell__sidebar {
    position: sticky;
    top: 72px;
    align-self: start;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    scrollbar-width: none;
}
.crm-shell__sidebar::-webkit-scrollbar { width: 0; display: none; }

/* De eigen indicator */
.nw-scrollbar {
    position: fixed;
    top: 80px;
    right: 6px;
    bottom: 10px;
    width: 4px;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s ease;
}
.nw-scrollbar.is-visible { opacity: 1; }
.nw-scrollbar__thumb {
    position: absolute;
    left: 0;
    width: 100%;
    min-height: 32px;
    border-radius: 99px;
    background: rgba(25, 29, 24, .22);
}
@media (prefers-reduced-motion: reduce) {
    .nw-scrollbar { transition: none; }
}
@media (max-width: 900px) {
    .nw-scrollbar { display: none; }   /* op aanraakschermen overbodig */
}

/* Ook binnen de uitklapmenu's geen brede balk. */
.crm-dropdown__body { scrollbar-width: thin; scrollbar-color: rgba(25, 29, 24, .16) transparent; }
.crm-dropdown__body::-webkit-scrollbar { width: 8px; }
.crm-dropdown__body::-webkit-scrollbar-track { background: transparent; }
.crm-dropdown__body::-webkit-scrollbar-thumb {
    background: rgba(25, 29, 24, .15); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
}

@media (max-width: 900px) {
    .crm-shell__topbar { padding: 0 .75rem; }
    .crm-shell__user-name { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   AMBASSADEUR-DASHBOARD — stijl volgens de referentie
   ══════════════════════════════════════════════════════════════════════
   Wit als drager, één diep groen blok als anker, messing als tweede accent.
   Geen pastelvlakken: die maakten het speels, en dit moet hoogwaardige
   biocosmetica uitstralen. De intensiteit zit in het groen, niet in variatie.

   Alle kaarten hebben dezelfde vorm — wit, 16px afronding, één dunne lijn —
   zodat het scherm rustig oogt en de aandacht naar het bedrag gaat.
   ══════════════════════════════════════════════════════════════════════ */

.nw--classic { max-width: 1180px; margin-inline: auto; }

/* ── Kop: persoonlijke aanhef ──────────────────────────────────────
   Het merk staat al in de zijbalk, dus hier hoort te staan wie je bent en
   waar je staat. De twee chips rechts dragen dezelfde informatie die anders
   een rij tegels zou kosten, in een fractie van de hoogte. */
.nwc-intro {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.nwc-intro__who { min-width: 0; }
.nwc-intro__greet {
    margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 700;
    letter-spacing: -.03em; line-height: 1.1; color: var(--nx-ink);
}
.nwc-intro__meta { margin: .4rem 0 0; font-size: .86rem; color: var(--nx-mute); }
.nwc-intro__dot  { margin: 0 .4rem; opacity: .5; }

.nwc-chips { display: flex; gap: .6rem; flex-wrap: wrap; }
.nwc-chip {
    display: flex; align-items: center; gap: .65rem;
    background: var(--nx-sheet); border-radius: 999px;
    padding: .45rem 1.1rem .45rem .45rem;
    box-shadow: 0 1px 2px rgba(22,36,29,.04), 0 8px 24px -18px rgba(22,36,29,.14);
}
.nwc-chip__ico {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(28,66,50,.09); color: var(--nx-forest);
}
.nwc-chip__ico svg { width: 16px; height: 16px; display: block; }
.nwc-chip__txt { display: flex; flex-direction: column; gap: .05rem; }
.nwc-chip__t { font-size: .87rem; font-weight: 600; color: var(--nx-ink); line-height: 1.2; }
.nwc-chip__m { font-size: .73rem; color: var(--nx-mute); line-height: 1.2; }

/* De tweede chip krijgt messing, zodat de twee niet als één blok lezen. */
.nwc-chip:nth-child(2) .nwc-chip__ico { background: rgba(181,130,43,.12); color: var(--nx-gold); }

@media (max-width: 720px) {
    .nwc-intro { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .nwc-chips { width: 100%; }
    .nwc-chip { flex: 1 1 auto; }
}

/* ── Raster ────────────────────────────────────────────────────────── */
.nwc-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.nwc-col { display: flex; flex-direction: column; gap: 1.1rem; }
@media (max-width: 1000px) { .nwc-grid { grid-template-columns: 1fr; } }

/* ── Het saldoblok ─────────────────────────────────────────────────── */
.nwc-balance {
    background: var(--nx-forest);
    border-radius: var(--nx-r-out);
    padding: 1.9rem 2rem 2rem;
    color: #F3F0E6;
}
.nwc-balance__label {
    margin: 0 0 .55rem; font-size: .7rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--nx-gold-soft);
}
.nwc-balance__amount {
    margin: 0; font-family: var(--nx-display);
    font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700;
    letter-spacing: -.04em; line-height: 1; color: #FFFDF7;
    font-variant-numeric: tabular-nums;
}
.nwc-balance__note { margin: .9rem 0 0; font-size: .88rem; color: rgba(243,240,230,.82); }
.nwc-balance__note strong { color: #FFFDF7; font-weight: 600; }
.nwc-balance__fine { margin: .5rem 0 0; font-size: .78rem; color: rgba(243,240,230,.6); }

/* ── Kaarten ───────────────────────────────────────────────────────── */
/* Geen randen: scheiding komt uit het witte vlak op het crème canvas, met
   één zachte schaduw als diepte. Een lijntje om elk vlak maakt het strak
   ogende ontwerp juist rommelig. */
.nwc-card, .nwc-stat, .nwc-redeem, .nwc-progress {
    background: var(--nx-sheet);
    border: 0;
    border-radius: var(--nx-r-out);
    box-shadow: 0 1px 2px rgba(22,36,29,.04), 0 8px 24px -18px rgba(22,36,29,.14);
}
.nwc-card { padding: 1.3rem 1.4rem; }
.nwc-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }

.nwc-h2 { font-family: var(--nx-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; margin: .3rem 0 0; color: var(--nx-ink); }
.nwc-h3 { font-family: var(--nx-display); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .9rem; color: var(--nx-ink); }
.nwc-card__head .nwc-h3 { margin: 0; }
.nwc-link { font-size: .82rem; font-weight: 600; color: var(--nx-forest); text-decoration: none; }
.nwc-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── De twee posten onder het saldo ───────────────────────────────── */
.nwc-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.nwc-split2--tight { gap: .7rem; margin-top: 1rem; }
.nwc-split3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 720px) { .nwc-split3 { grid-template-columns: 1fr; } .nwc-split2 { grid-template-columns: 1fr; } }

.nwc-stat { padding: 1.15rem 1.25rem 1.25rem; }
.nwc-stat__label {
    margin: 0 0 .4rem; font-size: .68rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--nx-mute);
}
.nwc-stat__value {
    margin: 0; font-family: var(--nx-display); font-size: 1.6rem; font-weight: 700;
    letter-spacing: -.03em; color: var(--nx-forest); font-variant-numeric: tabular-nums;
}

/* ── Voortgang ─────────────────────────────────────────────────────── */
.nwc-progress { padding: 1.15rem 1.3rem 1.25rem; }
.nwc-progress__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.nwc-progress__label { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nx-mute); }
.nwc-progress__figure { font-family: var(--nx-display); font-size: .88rem; font-weight: 600; color: var(--nx-body); font-variant-numeric: tabular-nums; }
.nwc-progress__track { height: 9px; border-radius: 99px; background: var(--nx-panel); overflow: hidden; }
.nwc-progress__track span { display: block; height: 100%; border-radius: 99px; background: var(--nx-gold); }

/* ── Inwisselen ────────────────────────────────────────────────────── */
.nwc-redeem { padding: 1.2rem 1.1rem 1.3rem; text-align: center; display: flex; flex-direction: column; gap: .3rem; }
.nwc-redeem__title { margin: 0; font-family: var(--nx-display); font-size: .95rem; font-weight: 700; color: var(--nx-ink); }
.nwc-redeem__text  { margin: 0 0 .9rem; font-size: .8rem; color: var(--nx-mute); }

.nwc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: auto; align-self: center;
    padding: .6rem 1.4rem; border: 0; border-radius: 999px;
    font-family: var(--nx-display); font-size: .85rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, transform .15s ease;
}
.nwc-btn--forest { background: var(--nx-forest); color: #FFFDF7; }
.nwc-btn--forest:hover { background: var(--nx-forest-deep); transform: translateY(-1px); color: #FFFDF7; }
.nwc-btn--gold { background: var(--nx-gold); color: #FFFDF7; }
.nwc-btn--gold:hover { background: #9C6F22; transform: translateY(-1px); color: #FFFDF7; }
.nwc-btn--muted { background: var(--nx-panel); color: var(--nx-mute); cursor: default; }

/* ── Recente activiteit ────────────────────────────────────────────── */
.nwc-activity { list-style: none; margin: 0; padding: 0; }
.nwc-activity li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .75rem 0; font-size: .88rem; color: var(--nx-body);
}
.nwc-activity li + li { box-shadow: inset 0 1px 0 rgba(22,36,29,.07); }
.nwc-activity__what { min-width: 0; }
.nwc-activity__amt {
    font-family: var(--nx-display); font-weight: 700; white-space: nowrap;
    color: var(--nx-pos); font-variant-numeric: tabular-nums;
}
.nwc-activity__amt.is-neg { color: var(--nx-neg); }
.nwc-activity__amt s { color: var(--nx-mute); font-weight: 500; }
.nwc-empty { margin: 0; font-size: .88rem; color: var(--nx-mute); }

/* ── Uitnodigingslink ──────────────────────────────────────────────── */
.nwc-refrow { display: flex; gap: .55rem; }
.nwc-reffield {
    flex: 1 1 auto; min-width: 0;
    padding: .62rem .8rem; border: 0; border-radius: 10px;
    background: var(--nx-panel); color: var(--nx-body);
    font-family: var(--nx-text); font-size: .8rem;
}
.nwc-copy { margin-top: 0; align-self: stretch; }

.nwc-count { text-align: center; padding: 1rem .5rem; border: 0; border-radius: var(--nx-r-in); background: var(--nx-panel); }
.nwc-count__n { display: block; font-family: var(--nx-display); font-size: 1.6rem; font-weight: 700; color: var(--nx-forest); line-height: 1; }
.nwc-count__l { display: block; margin-top: .35rem; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nx-mute); }

/* ── Netwerkniveaus ────────────────────────────────────────────────── */
.nwc-levels { list-style: none; margin: 0; padding: 0; }
.nwc-levels li { display: grid; grid-template-columns: 72px 1fr 28px; align-items: center; gap: .7rem; padding: .38rem 0; }
.nwc-levels__l { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-mute); }
.nwc-levels__bar { height: 9px; border-radius: 99px; background: var(--nx-panel); overflow: hidden; }
.nwc-levels__bar span { display: block; height: 100%; border-radius: 99px; }
.nwc-levels__n { font-family: var(--nx-display); font-size: .86rem; font-weight: 700; color: var(--nx-ink); text-align: right; }
.nwc-note { margin: .9rem 0 0; font-size: .78rem; font-style: italic; color: var(--nx-mute); }

/* ── De rest van het platform volgt hetzelfde palet ────────────────
   Panelen, tabellen en knoppen elders erven wit met één dunne lijn en
   bosgroen als accent, zodat de beheerkant niet uit de toon valt. */
.nw-panel { background: var(--nx-panel) !important; }
.nw-sheet, .nw-card, .nw-tile, .nw-stat { border: 0; }
.nw-tile, .nw-card { background: var(--nx-sheet); }
.nw-tile__val, .nw-card__value, .nw-stat__val { color: var(--nx-forest); }
.nw-panel__ico { background: var(--nx-forest); }
.nw-btn { background: var(--nx-forest); }
.nw-btn:hover { background: var(--nx-forest-deep); }
.nw-bar span, .nw-bar i { background: var(--nx-gold) !important; }
.nw-hero, .nw-hero-strip { background: var(--nx-forest); color: #F3F0E6; }
.nw-hero__label, .nw-hero-strip__lbl { color: var(--nx-gold-soft); }
.nw-hero__amount, .nw-hero-strip__val { color: #FFFDF7; }
.nw-hero__note, .nw-hero-strip__sub, .nw-hero__explain { color: rgba(243,240,230,.8); }
.nw-hero-strip__ico { background: rgba(255,255,255,.12); color: #F3F0E6; }
.nw-hero-strip__cta { background: var(--nx-gold); color: #FFFDF7; }
.nw-hero-strip__cta:hover { background: #9C6F22; color: #FFFDF7; }
.crm-nav__item--active { background: rgba(28,66,50,.09) !important; color: var(--nx-forest) !important; }
.crm-nav__item--active::before { background: var(--nx-forest) !important; }
.crm-shell__user-btn .crm-avatar { background: var(--nx-forest) !important; }
.nw-avatar, .nw-avatar--sm { background: var(--nx-forest) !important; }
.nw-badge--delivered { background: rgba(28,66,50,.1); color: var(--nx-forest); }
.nw-badge--packed    { background: rgba(181,130,43,.14); color: var(--nx-gold); }
.nw-chip--mint { background: rgba(28,66,50,.1); color: var(--nx-forest); }

/* ── Inter: fijnafstelling ─────────────────────────────────────────
   Inter heeft een grote x-hoogte, dus koppen mogen strakker gespatieerd en
   iets minder zwaar dan bij een display-familie. Bedragen krijgen tabulaire
   cijfers, zodat kolommen uitlijnen — dat is bij een wallet geen detail. */
body, .crm-shell, .nw {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-feature-settings: 'cv05' 1, 'ss03' 1;   /* enkelvoudige l en a */
}
.nwc-intro__greet, .nwc-h2, .nwc-h3,
.nwc-balance__amount, .nwc-stat__value, .nwc-count__n,
.nw h1, .nw h2, .nw h3 { letter-spacing: -.022em; }
.nwc-balance__amount { letter-spacing: -.035em; font-weight: 700; }
.nwc-balance__amount, .nwc-stat__value, .nwc-count__n,
.nwc-activity__amt, .nwc-progress__figure, .nwc-levels__n,
.nw-tile__val, .nw-card__value, .nw-num { font-variant-numeric: tabular-nums; }

/* Randen die elders nog opdoken, ook weg. */
.nwc-card, .nwc-stat, .nwc-redeem, .nwc-progress, .nwc-count,
.nw-panel, .nw-sheet, .nw-card, .nw-tile, .nw-stat, .nw-alert { border: 0 !important; }
.nwc-balance { border-radius: var(--nx-r-out); }
.nw-panel, .nw-hero, .nw-hero-strip { border-radius: var(--nx-r-out); }
.nw-sheet, .nw-tile, .nw-card, .nw-stat { border-radius: var(--nx-r-in); }

/* ══ CORRECTIES ═════════════════════════════════════════════════════ */

/* ── Knoppen ──────────────────────────────────────────────────────
   De filterpillen stonden donkergroen op donkergroen: onleesbaar. Oorzaak
   was volgorde — mijn .nw-btn-regel kwam ná .nw-btn--ghost en overschreef
   die. De variant staat nu achteraan, waar hij hoort. */
.nw-btn--ghost,
a.nw-btn--ghost,
.nw-btn.nw-btn--ghost {
    background: var(--nx-sheet) !important;
    color: var(--nx-forest) !important;
    box-shadow: inset 0 0 0 1px rgba(28,66,50,.14);
}
.nw-btn--ghost:hover,
.nw-btn.nw-btn--ghost:hover {
    background: var(--nx-panel) !important;
    color: var(--nx-forest-deep) !important;
    box-shadow: inset 0 0 0 1px rgba(28,66,50,.26);
}
.nw-btn:not(.nw-btn--ghost) { background: var(--nx-forest); color: #FFFDF7; }
.nw-btn:not(.nw-btn--ghost):hover { background: var(--nx-forest-deep); color: #FFFDF7; }

.nw-switch a.is-on { background: var(--nx-forest); color: #FFFDF7; }

/* ── Voortgangsbalk op groen ─────────────────────────────────────
   Het percentage stond in wit op het groene vlak en verdween daardoor.
   Nu in messing, dezelfde kleur als de balk zelf. */
.nw-hero .nw-progress__label,
.nw-hero-strip .nw-progress__label,
.nwc-balance .nwc-progress__label { color: var(--nx-gold-soft); }
.nw-progress__label--on-forest,
.nw-hero .nw-progress__value,
.nw-reward-pct { color: var(--nx-gold-soft) !important; }
.nw-hero-strip--reward .nw-reward-pct,
.nw-t-mint .nw-reward-pct { color: var(--nx-forest) !important; }

/* ── Netwerkpagina: één achtergrond, gelijke ruimte ──────────────
   Er stonden drie soorten vlak door elkaar: witte kaarten, crème panelen en
   getinte blokjes daarbinnen. Alles wat inhoud draagt is nu wit met dezelfde
   binnenmarge; het paneel eromheen is de enige crème laag. */
.nw-panel--share-wide,
.nw-panel { background: var(--nx-panel) !important; }
.nw-panel > .nw-sheet { background: var(--nx-sheet); padding: 1.4rem 1.5rem; }

.nw-level {
    background: var(--nx-sheet) !important;
    border: 0 !important;
    border-radius: var(--nx-r-out);
    padding: 1.3rem 1.5rem !important;
    margin-bottom: 12px;
}
.nw-level__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.nw-badge[class*='nw-badge--l'] {
    background: var(--nx-panel); color: var(--nx-body);
    border-radius: 999px; padding: .28rem .8rem;
    font-size: .75rem; font-weight: 600;
}
.nw-level__earn { margin-left: auto; color: var(--nx-gold); font-weight: 700; }

/* De personen erbinnen: één vorm, één achtergrond, gelijke hoogte. */
.nw-person {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--nx-panel) !important;
    border: 0 !important;
    border-radius: 999px;
    padding: .42rem .95rem .42rem .42rem;
    font-size: .88rem;
}
.nw-person__ini {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(28,66,50,.12); color: var(--nx-forest);
    font-size: .72rem; font-weight: 700;
}
.nw-person__earn { color: var(--nx-gold); font-weight: 700; }

/* "How it works" onderaan: zelfde witte vlak als de rest. */
.nw-howto { background: var(--nx-sheet) !important; border-radius: var(--nx-r-out); padding: 1.4rem 1.5rem !important; }
.nw-howto__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 1rem; }
.nw-howto__item { background: var(--nx-panel); border: 0 !important; border-radius: var(--nx-r-in); padding: 1.1rem 1.2rem; }
.nw-howto__pct { font-size: 1.5rem; font-weight: 700; color: var(--nx-gold); line-height: 1; }
.nw-howto__txt { margin-top: .35rem; font-size: .85rem; color: var(--nx-body); }
@media (max-width: 760px) { .nw-howto__grid { grid-template-columns: 1fr; } }

/* Netwerk: kop en personenrij netjes uitlijnen. */
.nw-level__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.nw-level__title { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; }
.nw-level__earn { margin-left: auto; color: var(--nx-gold); font-weight: 700; white-space: nowrap; }
.nw-people { display: flex; flex-wrap: wrap; gap: .5rem; }
.nw-badge[class*="nw-badge--l"] {
    background: var(--nx-panel) !important; color: var(--nx-body) !important;
    border-radius: 999px; padding: .3rem .8rem; font-size: .75rem; font-weight: 600;
}

/* De kaartjes boven de niveaus krijgen dezelfde witte vorm als de rest. */
.nw-cards .nw-card { background: var(--nx-sheet) !important; padding: 1.25rem 1.4rem; }
.nw-card__icon {
    position: absolute; top: 1.25rem; right: 1.4rem;
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nx-panel); color: var(--nx-forest);
}
.nw-card__label { color: var(--nx-mute) !important; }
.nw-card__value { color: var(--nx-forest) !important; }

/* De uitleg onderaan de netwerkpagina: witte kaart in plaats van een crème
   paneel.

   Bewust vastgemaakt aan .nw-page-network. Eerder stond hier alleen
   .nw-panel:last-child, en dat raakt het laatste paneel van élke rij op élke
   pagina — waardoor het rechterblok van het beheerdersoverzicht er anders
   uitzag dan het linker. */
.nw-page-network .nw > .nw-panel:last-child { background: var(--nx-sheet) !important; padding: 1.4rem 1.5rem !important; }
.nw-page-network .nw > .nw-panel:last-child .nw-cards { gap: 12px; margin-bottom: 0; }
.nw-page-network .nw > .nw-panel:last-child .nw-card { background: var(--nx-panel) !important; }

/* ── Beloningen: contrast op het groene vlak ──────────────────────
   Het percentage stond in een donkere kleur op donkergroen en was daardoor
   nauwelijks te lezen. Op een groen vlak hoort alles licht of messing te
   zijn — dat is de enige regel die dit blok nodig heeft. */
.nw-hero-strip--reward { background: var(--nx-forest) !important; }
.nw-hero-strip--reward .nw-hero-strip__lbl { color: var(--nx-gold-soft) !important; }
.nw-hero-strip--reward .nw-hero-strip__val { color: #FFFDF7 !important; }
.nw-hero-strip--reward .nw-hero-strip__sub { color: rgba(243,240,230,.78) !important; }
.nw-hero-strip--reward .nw-hero-strip__ico { background: rgba(255,255,255,.12); color: #F3F0E6; }
.nw-hero-strip--reward .nw-reward-pct {
    color: var(--nx-gold-soft) !important;
    font-size: 1.7rem; font-weight: 700; line-height: 1;
}
.nw-hero-strip--reward .nw-chip--mint {
    background: rgba(255,255,255,.14) !important;
    color: #F3F0E6 !important;
}
.nw-hero-strip--reward .nw-chip--mint strong { color: #FFFDF7; }
.nw-reward-side { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }

/* De balk eronder staat op wit; daar mag de schaal gewoon donker zijn. */
.nw-reward-bar { background: var(--nx-sheet) !important; padding: 1.2rem 1.5rem 1.3rem; border-radius: var(--nx-r-in); margin-top: 12px; }
.nw-reward-bar .nw-scale { color: var(--nx-mute); margin-top: .5rem; }

/* ══════════════════════════════════════════════════════════════════════
   AANMELDPAGINA  /r/{code}
   ══════════════════════════════════════════════════════════════════════
   Twee kolommen: links wie je uitnodigde en wat het oplevert, rechts het
   formulier. Wie hier komt is nog geen lid, dus geen menu en geen schil —
   alleen de vraag en het antwoord.
   ══════════════════════════════════════════════════════════════════════ */

.nw-signup-page {
    margin: 0; min-height: 100vh;
    background: var(--nx-canvas);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: var(--nx-ink);
    -webkit-font-smoothing: antialiased;
}

.nws {
    display: grid; grid-template-columns: 1.05fr 1fr;
    min-height: 100vh; align-items: stretch;
}
@media (max-width: 900px) { .nws { grid-template-columns: 1fr; } }

/* ── Links: het aanbod ─────────────────────────────────────────────── */
.nws__panel {
    background: var(--nx-forest);
    color: #F3F0E6;
    padding: clamp(2rem, 5vw, 4rem);
    display: flex; flex-direction: column; justify-content: center;
}
.nws__logo  { max-height: 44px; width: auto; margin-bottom: 2.2rem; filter: brightness(0) invert(1); }
.nws__brand { margin: 0 0 2.2rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: #FFFDF7; }

.nws__eyebrow {
    margin: 0 0 .4rem; font-size: .72rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--nx-gold-soft);
}
.nws__title {
    margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700;
    letter-spacing: -.035em; line-height: 1.05; color: #FFFDF7;
}
.nws__lead { margin: 0 0 2.2rem; font-size: 1rem; line-height: 1.6; color: rgba(243,240,230,.82); max-width: 46ch; }

.nws__perks { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.nws__perks li { display: flex; align-items: baseline; gap: 1rem; }
.nws__perk-n {
    flex: 0 0 auto; min-width: 84px;
    font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em;
    color: var(--nx-gold-soft); font-variant-numeric: tabular-nums;
}
.nws__perk-t { font-size: .92rem; line-height: 1.5; color: rgba(243,240,230,.86); }
.nws__fine { margin: 0; font-size: .8rem; line-height: 1.55; color: rgba(243,240,230,.55); max-width: 46ch; }

/* ── Rechts: het formulier ─────────────────────────────────────────── */
.nws__form {
    padding: clamp(2rem, 5vw, 4rem);
    display: flex; flex-direction: column; justify-content: center;
    max-width: 520px; width: 100%; margin-inline: auto;
}
.nws__formtitle { margin: 0 0 1.6rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -.025em; }

.nws__error {
    margin-bottom: 1.2rem; padding: .85rem 1.1rem;
    background: rgba(166,58,46,.09); color: var(--nx-neg);
    border-radius: var(--nx-r-in); font-size: .88rem;
}

.nws__label { display: block; margin-bottom: .4rem; font-size: .84rem; font-weight: 600; color: var(--nx-body); }
.nws__input {
    display: block; width: 100%; box-sizing: border-box;
    padding: .85rem 1rem; margin-bottom: .35rem;
    background: var(--nx-sheet); border: 0; border-radius: var(--nx-r-in);
    box-shadow: inset 0 0 0 1px rgba(22,36,29,.1);
    font-family: inherit; font-size: .95rem; color: var(--nx-ink);
    transition: box-shadow .15s ease;
}
.nws__input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--nx-forest);
}
.nws__hint { display: block; margin-bottom: 1.15rem; font-size: .78rem; color: var(--nx-mute); }

.nws__submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    width: 100%; margin-top: .6rem; padding: .95rem 1.4rem;
    background: var(--nx-forest); color: #FFFDF7;
    border: 0; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: .95rem; font-weight: 600;
    overflow: hidden;
    transition: background .2s ease, transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.nws__arrow {
    display: inline-flex; align-items: center;
    width: 0; opacity: 0; transform: translateX(-6px);
    transition: width .2s cubic-bezier(.2,.8,.3,1), opacity .16s ease, transform .2s cubic-bezier(.2,.8,.3,1);
}
.nws__submit:hover {
    background: var(--nx-forest-deep);
    transform: translateY(-1px);
}
.nws__submit:hover .nws__arrow { width: 24px; opacity: 1; transform: translateX(6px); }
.nws__submit:active { transform: translateY(0); }
.nws__submit:focus-visible { outline: 2px solid var(--nx-gold); outline-offset: 3px; }

.nws__alt { margin: 1.4rem 0 0; font-size: .88rem; color: var(--nx-mute); text-align: center; }
.nws__alt a { color: var(--nx-forest); font-weight: 600; text-decoration: none; }
.nws__alt a:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .nws__submit, .nws__arrow { transition: none; }
}

/* ── Aanmeldpagina: correcties ─────────────────────────────────────── */

/* Het logo stond gecentreerd doordat de kolom zijn kinderen uitrekte. Alles
   in dit paneel lijnt links uit, net als de tekst eronder. */
.nws__panel { align-items: flex-start; }
.nws__logo {
    align-self: flex-start !important;
    margin-right: auto !important;
    max-height: 48px; width: auto;
}
.nws__brand, .nws__eyebrow, .nws__title, .nws__lead, .nws__perks, .nws__fine {
    align-self: flex-start;
    text-align: left;
}

/* Elk veld is een blok met een vaste onderruimte. Eerder hing de afstand af
   van of er een hulptekst onder stond, waardoor het ritme per veld verschilde:
   "Full name" plakte tegen "Email address", terwijl de tekst onder het
   e-mailveld juist tegen het volgende label aan liep. */
.nws__field { margin-bottom: 1.4rem; }
.nws__field:last-of-type { margin-bottom: 0; }
.nws__label { display: block; margin: 0 0 .45rem; }
.nws__input { margin: 0; }
.nws__hint  { display: block; margin: .45rem 0 0; }
.nws__submit { margin-top: 1.8rem; }

/* ── De e-mailmelding ──────────────────────────────────────────────
   Dit is de belangrijkste zin op de pagina: klopt het adres niet met dat van
   de webshop, dan worden bestellingen niet gekoppeld en blijft de cashback
   uit. Grijze subtekst leest niemand, dus dit is een blok met een icoon. */
.nws__notice {
    display: flex; gap: .8rem; align-items: flex-start;
    margin: 0 0 1.4rem;
    padding: .95rem 1.1rem;
    background: rgba(181,130,43,.09);
    border-radius: var(--nx-r-in);
}
.nws__notice-ico {
    flex: 0 0 20px; width: 20px; height: 20px; margin-top: .1rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--nx-gold);
}
.nws__notice-ico svg { display: block; }
.nws__notice-txt { font-size: .84rem; line-height: 1.55; color: var(--nx-body); }
.nws__notice-txt strong { display: block; color: var(--nx-ink); font-weight: 600; margin-bottom: .15rem; }

/* De placeholder draagt nu de wachtwoordeis; die verdween als losse regel. */
.nws__input::placeholder { color: var(--nx-mute); opacity: 1; }

/* ── Aanmeldpagina: geweigerde uitnodiging ─────────────────────────
   Eén kolom in plaats van twee: er valt niets in te vullen, dus een leeg
   formulierpaneel ernaast zou alleen suggereren dat er iets kan. */
.nws--single { grid-template-columns: 1fr; }
.nws__panel--full {
    max-width: 640px; margin-inline: auto;
    justify-content: center; min-height: 100vh;
}
.nws__panel--full .nws__fine { margin-top: 1.2rem; }
.nws__panel--full code {
    background: rgba(255,255,255,.12); color: #F3F0E6;
    padding: .1rem .4rem; border-radius: 5px;
    font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: .82em;
    letter-spacing: .04em;
}
.nws__alt--onforest { margin-top: 2rem; text-align: left; color: rgba(243,240,230,.7); }
.nws__alt--onforest a { color: var(--nx-gold-soft); }

/* ── Profielpagina ─────────────────────────────────────────────────
   Hergebruikt de veldopmaak van de aanmeldpagina, zodat een formulier er
   overal hetzelfde uitziet. Alleen de knop staat hier links in plaats van
   over de volle breedte: het is een bevestiging, geen hoofdactie. */
.nw--narrow .nwc-card { padding: 1.5rem 1.6rem; }
.nw--narrow .nws__field { margin-bottom: 1.1rem; }
.nw--narrow .nws__notice { margin-bottom: 1.2rem; }
.nw--narrow form .nwc-btn { align-self: flex-start; margin-top: 1rem; }
.nw--narrow .nw-dl__row dt { font-size: .82rem; }
.nw--narrow .nw-dl__row dd { font-size: .88rem; }

/* ══════════════════════════════════════════════════════════════════════
   BODY-CLASSES — overzicht
   ══════════════════════════════════════════════════════════════════════
   Op de body staat per pagina een set klassen, zodat je één scherm kunt
   aanpassen zonder de rest te raken.

   ── Pagina ─────────────────────────────────────────────────────────
   .nw-page-dashboard          startpagina van de ambassadeur
   .nw-page-movements          transacties
   .nw-page-network            mijn netwerk
   .nw-page-orders             bestellingen
   .nw-page-rewards            beloningen
   .nw-page-profile            profiel
   .nw-page-admin-dashboard    beheer: overzicht
   .nw-page-admin-ledger       beheer: ledger
   .nw-page-admin-ambassadors  beheer: ambassadeurs
   .nw-page-admin-orders       beheer: bestellingen
   .nw-page-admin-products     beheer: producten
   .nw-page-admin-rewards      beheer: beloningen
   .nw-page-admin-reports      beheer: rapportage
   .nw-page-login              inlogscherm  (+ .nw-login-client / --admin)

   ── Deel van de applicatie ─────────────────────────────────────────
   .nw-section-wallet          alles wat de ambassadeur ziet
   .nw-section-admin           de beheerkant

   ── Wie kijkt ──────────────────────────────────────────────────────
   .nw-role-ambassador
   .nw-role-admin
   .nw-is-preview              beheerder kijkt mee met een lid

   ── Staat ──────────────────────────────────────────────────────────
   .nw-has-balance             er staat tegoed
   .nw-no-balance              nog niets verdiend — handig voor lege staten

   ── Aanmeldpagina ──────────────────────────────────────────────────
   .nw-signup-page             de pagina achter /r/{code}
   .nw-signup-valid            geldige uitnodiging, formulier zichtbaar
   .nw-signup-invalid          geweigerd

   Voorbeeld — alleen op de netwerkpagina de kaarten smaller:

       .nw-page-network .nwc-card { max-width: 720px; }

   Voorbeeld — het saldoblok verbergen zolang er niets verdiend is:

       .nw-no-balance .nwc-balance { display: none; }

   Voorbeeld — de beheerkant iets compacter zetten:

       .nw-section-admin .nw-panel { padding: 6px; }
   ══════════════════════════════════════════════════════════════════════ */

/* ── "How it works" op de netwerkpagina ────────────────────────────
   Stond nog in de oude vorm: getinte blokjes met een rand op een crème
   paneel. Nu dezelfde opbouw als de rest — wit vel, geen randen, het
   percentage in messing en de uitleg eronder. */
.nw-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 760px) { .nw-tiers { grid-template-columns: 1fr; } }

.nw-tier {
    background: var(--nx-panel);
    border: 0 !important;
    border-radius: var(--nx-r-in);
    padding: 1.15rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: .3rem;
}
.nw-tier__pct {
    font-size: 1.6rem; font-weight: 700; line-height: 1;
    letter-spacing: -.03em; color: var(--nx-gold);
    font-variant-numeric: tabular-nums;
}
.nw-tier__txt { font-size: .85rem; color: var(--nx-body); }

.nw-tiers__note {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    box-shadow: inset 0 1px 0 rgba(22,36,29,.07);
    font-size: .82rem; line-height: 1.55; color: var(--nx-mute);
}

/* De oude definitielijst is niet meer in gebruik. */
.nw-explain { display: none; }

/* ── Producten in de bestellijst ───────────────────────────────────
   De kolom vult de ruimte die tussen status en bedragen leeg stond. Eén
   regel, afgekapt met een ellips: dit is een overzicht, geen bon. Wie de
   volledige inhoud wil, klikt de bestelling open. */
.nw-items {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;              /* dwingt de kolom te krimpen in plaats van te duwen */
    color: var(--nx-body);
    font-size: .88rem;
}
.nw-table td.nw-desc.nw-items { width: 100%; }

/* ── Protocolblok op het beheerdersoverzicht ───────────────────────
   Stond op .nw-explain, en die had ik elders op display:none gezet — het
   werd daardoor een lege balk onderaan de pagina. */
.nw-protocol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0;
}
.nw-protocol > div {
    background: var(--nx-panel);
    border-radius: var(--nx-r-in);
    padding: 1rem 1.15rem 1.1rem;
}
.nw-protocol dt {
    margin: 0 0 .25rem;
    font-size: 1.4rem; font-weight: 700; line-height: 1;
    letter-spacing: -.03em; color: var(--nx-forest);
    font-variant-numeric: tabular-nums;
}
.nw-protocol dd { margin: 0; font-size: .8rem; color: var(--nx-mute); }

/* ── Twee panelen naast elkaar gelijk opmaken ──────────────────────
   Links stond een tabel in een crème paneel, rechts een op een wit vel.
   Beide krijgen nu dezelfde vorm. */
.nw-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.nw-grid-2 > .nw-panel { margin-bottom: 0; }
.nw-grid-2 > .nw-panel > h2 {
    font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
    margin: 0 0 .8rem; padding: .5rem .7rem 0;
}
.nw-grid-2 .nw-table { background: transparent; }
@media (max-width: 900px) { .nw-grid-2 { grid-template-columns: 1fr; } }

/* ── Klikcursor weg waar niets klikbaar is ─────────────────────────
   De bestellijst gaf een handje terwijl er geen detailpagina achter zit.
   Dat belooft iets wat er niet is. */
.nw-table tbody tr { cursor: default; }
.nw-table tbody tr[onclick] { cursor: pointer; }

/* ══ BEHEERPAGINA'S — opmaak gelijktrekken ═════════════════════════
   De beheerkant erfde de nieuwe kleuren maar niet de vormtaal: blokken met
   verschillende binnenmarges, koppen die niet uitlijnen, tabellen zonder
   ruimte eromheen. Hieronder krijgt alles dezelfde maat als het
   ambassadeur-dashboard. ═══════════════════════════════════════════════ */

.nw-section-admin .nw-panel { padding: var(--nx-gap); margin-bottom: 12px; }
.nw-section-admin .nw-panel > h2 {
    font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
    margin: 0 0 .8rem; padding: .6rem .8rem 0; color: var(--nx-ink);
}
.nw-section-admin .nw-sheet { padding: 1.2rem 1.4rem; }
.nw-section-admin .nw-cards { gap: 12px; margin-bottom: 12px; }
.nw-section-admin .nw-card { background: var(--nx-sheet) !important; padding: 1.15rem 1.3rem 1.25rem; }

/* Detailpagina van een ambassadeur: kop op één lijn met de rest. */
.nw-detail-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.nw-detail-head h1 { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; }
.nw-detail-head .nw-sub { display: block; margin-top: .25rem; font-size: .85rem; color: var(--nx-mute); }
.nw-back {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .85rem; font-weight: 600; color: var(--nx-forest);
    text-decoration: none; margin-bottom: .8rem;
}
.nw-back:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Rewards-pagina: dezelfde blokmaat als elders. */
.nw-page-admin-rewards .nw-panel,
.nw-page-rewards .nw-panel { padding: var(--nx-gap); }
.nw-page-admin-rewards .nw-panel > h2,
.nw-page-rewards .nw-panel > h2 { padding: .6rem .8rem 0; margin-bottom: .8rem; }
.nw-page-admin-rewards .nw-table,
.nw-page-rewards .nw-table { margin: 0; }

/* Tabellen in het beheer krijgen dezelfde witte rijen als elders. */
.nw-section-admin .nw-table tbody tr td { background: var(--nx-sheet); }
.nw-section-admin .nw-table thead th { padding-left: 1.2rem; }

/* Knoppenrij naast een zoekveld: gelijke hoogte, compacter. */
.nw-toolbar {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: 12px;
}
.nw-toolbar input[type="search"],
.nw-toolbar input[type="text"] {
    flex: 1 1 260px; min-width: 0;
    padding: .58rem .9rem; border: 0; border-radius: 999px;
    background: var(--nx-sheet); box-shadow: inset 0 0 0 1px rgba(22,36,29,.1);
    font-family: inherit; font-size: .88rem;
}
.nw-toolbar .nw-btn,
.nw-toolbar .nw-btn--ghost {
    padding: .55rem 1.1rem; font-size: .85rem; white-space: nowrap;
}

/* ══ DIALOOGVENSTER ═════════════════════════════════════════════════
   Een uitnodiging uitdelen is iets wat je tussendoor doet; met een aparte
   pagina raak je je plek in de lijst kwijt. <dialog> regelt focus, Escape
   en de achtergrond zelf. ═══════════════════════════════════════════ */
.nw-dialog {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 2rem 2.1rem 1.8rem;
    border: 0;
    border-radius: var(--nx-r-out);
    background: var(--nx-sheet);
    color: var(--nx-ink);
    font-family: var(--nx-text);
    box-shadow: 0 24px 60px -20px rgba(22, 36, 29, .4);
    overflow-y: auto;
}
.nw-dialog::backdrop { background: rgba(22, 36, 29, .42); backdrop-filter: blur(2px); }

.nw-dialog__close-form { position: absolute; top: 1rem; right: 1.1rem; margin: 0; }
.nw-dialog__close {
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: var(--nx-panel); color: var(--nx-body);
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    transition: background .15s ease;
}
.nw-dialog__close:hover { background: var(--nx-blush); color: var(--nx-ink); }

.nw-dialog__title { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; }
.nw-dialog__lead  { margin: 0 0 1.6rem; font-size: .9rem; line-height: 1.55; color: var(--nx-mute); max-width: 46ch; }
.nw-dialog__subtitle { margin: 0 0 .8rem; font-size: .9rem; font-weight: 700; }

.nw-dialog select.nws__input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E6459' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
    cursor: pointer;
}

.nw-dialog__actions { display: flex; gap: .6rem; margin-top: 1.6rem; }
.nw-dialog__actions .nw-btn,
.nw-dialog__actions .nw-btn--ghost { padding: .68rem 1.4rem; }

.nw-dialog__list {
    margin-top: 1.8rem; padding-top: 1.4rem;
    box-shadow: inset 0 1px 0 rgba(22, 36, 29, .09);
}
.nw-invite-row {
    display: flex; align-items: center; gap: .8rem;
    padding: .65rem 0;
}
.nw-invite-row + .nw-invite-row { box-shadow: inset 0 1px 0 rgba(22, 36, 29, .07); }
.nw-invite-row__code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: .82rem; font-weight: 600; letter-spacing: .04em;
    color: var(--nx-forest);
}
.nw-invite-row__meta { flex: 1 1 auto; font-size: .78rem; color: var(--nx-mute); }
.nw-invite-row form { margin: 0; }
.nw-invite-row__revoke {
    border: 0; background: transparent; cursor: pointer;
    font-family: inherit; font-size: .8rem; font-weight: 600;
    color: var(--nx-neg); padding: .3rem .55rem; border-radius: 8px;
}
.nw-invite-row__revoke:hover { background: rgba(166, 58, 46, .09); }

/* De zojuist aangemaakte link, boven de lijst. */
.nw-invite-made { margin-bottom: 12px; }
.nw-invite-made .nw-copy__field { background: rgba(255, 255, 255, .7); }

/* Uitleg in het dialoogvenster, in plaats van een veld dat niets doet. */
.nw-dialog__hint {
    margin: 0 0 1.4rem;
    padding: .9rem 1.05rem;
    background: var(--nx-panel);
    border-radius: var(--nx-r-in);
    font-size: .84rem; line-height: 1.55; color: var(--nx-body);
}
.nw-dialog [hidden] { display: none !important; }

/* ── Twee panelen naast elkaar: identiek ───────────────────────────
   Beide kolommen krijgen exact dezelfde vorm, ongeacht of ze de eerste of
   de laatste in de rij zijn. */
.nw-grid-2 > .nw-panel {
    background: var(--nx-panel) !important;
    padding: var(--nx-gap) !important;
    margin-bottom: 0;
    border-radius: var(--nx-r-out);
    align-self: stretch;
}
.nw-grid-2 > .nw-panel > h2 {
    margin: 0 0 .8rem;
    padding: .7rem .9rem 0;
    font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
}
.nw-grid-2 > .nw-panel > p {
    margin: 0 0 .9rem; padding: 0 .9rem;
    font-size: .85rem; color: var(--nx-mute);
}
.nw-grid-2 .nw-table { width: 100%; margin: 0; }
.nw-grid-2 .nw-table thead th { padding: .3rem 1rem .6rem; }
.nw-grid-2 .nw-table tbody tr td { background: var(--nx-sheet); }

/* Link in een tabelrij: zichtbaar klikbaar, in plaats van een hele rij die
   stilletjes navigeert. */
.nw-rowlink {
    color: var(--nx-forest);
    font-weight: 600;
    text-decoration: none;
}
.nw-rowlink:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Detailpagina van een ambassadeur ──────────────────────────────
   Drie lagen: terug-link, naam met kerngegevens, actie rechts. Eerder liep
   dat door elkaar met een negatieve marge om het weer bij elkaar te trekken. */
.nw-back {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-bottom: 1rem;
    font-size: .85rem; font-weight: 600;
    color: var(--nx-forest); text-decoration: none;
}
.nw-back svg { transform: rotate(-135deg); }
.nw-back:hover { text-decoration: underline; text-underline-offset: 2px; }

.nw-detail-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    margin-bottom: 1.4rem;
}
.nw-detail-head__who { min-width: 0; }
.nw-detail-head h1 {
    margin: 0; font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
}
.nw-detail-head__meta {
    margin: .45rem 0 0;
    font-size: .85rem; color: var(--nx-mute);
}
.nw-detail-head__meta .nw-mono {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: .82rem; letter-spacing: .02em;
}
.nw-detail-head .nw-btn--ghost {
    display: inline-flex; align-items: center; gap: .45rem;
    flex: 0 0 auto; text-decoration: none;
}

/* De herstelpagina's draaien door de inlogtemplate heen, dus daar is hier
   geen aparte opmaak meer voor nodig. Zie templates/auth/login.php. */

/* De rij van twee panelen had marge onder de panelen weggehaald, waardoor het
   volgende blok ertegenaan plakte. De marge hoort op de rij, niet op de kolom. */
.nw-grid-2 { margin-bottom: 12px; }

/* 404-tekst: gebalanceerd afbreken in plaats van een ragged blok.
   text-wrap: balance verdeelt de regels gelijkmatig; de max-width zorgt dat
   het er ook zonder die ondersteuning netjes uitziet. */
.backbone-404__text {
    max-width: 30ch;
    margin-inline: auto;
    text-wrap: balance;
}