/* =======================================================================
   DASHBOARD (mockup: docs/mockup-dashboard-airco-holland.html)
   Eigen bento-panelen in de .ah-*-naamruimte, geplaatst in het Filament-
   widgetraster (12 koloms). Kleuren flippen mee met het licht/donker-thema.
   ======================================================================= */

:root {
    --ah-card: #ffffff;
    --ah-ink: #1c2030;
    --ah-muted: #6b7180;
    --ah-line: #e7e9f1;
    --ah-veld: #f7f8fc;
    --ah-chip: #eef0f7;
    --ah-oranje-bg: #fff4e3;
    --ah-groen: #1f9d57;
    --ah-groen-bg: #e7f5ee;
    --ah-amber: #c9820a;
    --ah-amber-bg: #fdf1da;
    --ah-rood: #d4493f;
    --ah-rood-bg: #fbe9e7;
    --ah-blauw: #2f6fdb;
    --ah-blauw-bg: #e8f0fd;
    --ah-paars: #5b46c9;
    --ah-paars-bg: #ece9fb;
}

html.dark {
    --ah-card: #1f2733;
    --ah-ink: #f1f3f8;
    --ah-muted: #9aa3b2;
    --ah-line: rgba(255, 255, 255, 0.08);
    --ah-veld: rgba(255, 255, 255, 0.04);
    --ah-chip: rgba(255, 255, 255, 0.06);
    --ah-oranje-bg: rgba(249, 147, 0, 0.16);
}

.ah-ico {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* Begroeting */
.ah-hi {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.ah-hi-groet {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ah-marine);
}
html.dark .ah-hi-groet {
    color: #fff;
}
.ah-hi-sub {
    margin: 0.25rem 0 0;
    color: var(--ah-muted);
    font-size: 0.9rem;
}
.ah-hi-datum {
    color: var(--ah-muted);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--ah-card);
    border: 1px solid var(--ah-line);
    padding: 0.55rem 0.9rem;
    border-radius: 0.7rem;
}

/* KPI-tegels */
.ah-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 68rem) {
    .ah-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 34rem) {
    .ah-kpis {
        grid-template-columns: 1fr;
    }
}
.ah-kpi {
    display: block;
    background: var(--ah-card);
    border: 1px solid var(--ah-line);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ah-kpi:hover {
    border-color: var(--ah-oranje);
    box-shadow: 0 2px 12px rgba(33, 38, 80, 0.08);
}
.ah-kpi-lab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ah-muted);
    font-size: 0.78rem;
    font-weight: 600;
}
.ah-kpi-pic {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    background: var(--ah-oranje-bg);
    color: var(--ah-oranje-d);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ah-kpi-num {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ah-marine);
    margin: 0.6rem 0 0.15rem;
    line-height: 1;
}
html.dark .ah-kpi-num {
    color: #fff;
}
.ah-kpi-vs {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ah-muted);
}
/* De subregel kleurt mee met wat hij zegt: groei groen, open kansen oranje, feit grijs. */
.ah-kpi-groen {
    color: var(--ah-groen);
}
.ah-kpi-oranje {
    color: var(--ah-amber);
}
/* Het omzetcijfer wordt met duizendscheiding lang; iets kleiner zodat het niet afbreekt. */
.ah-kpi-num {
    overflow-wrap: anywhere;
}

/* Paneel (kaart) */
.ah-panel {
    height: 100%;
    background: var(--ah-card);
    border: 1px solid var(--ah-line);
    border-radius: 1rem;
    padding: 1.1rem 1.1rem 0.5rem;
    display: flex;
    flex-direction: column;
    color: var(--ah-ink);
}
.ah-p-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.ah-p-head .ah-tt {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ah-marine);
}
html.dark .ah-p-head .ah-tt {
    color: #fff;
}
.ah-pic {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    background: var(--ah-chip);
    color: var(--ah-marine);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
html.dark .ah-pic {
    color: #cdd3f0;
}
.ah-meer {
    margin-left: auto;
    color: var(--ah-muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
}
a.ah-meer:hover {
    color: var(--ah-oranje-d);
}
.ah-leeg {
    color: var(--ah-muted);
    font-size: 0.85rem;
    padding: 0.6rem 0 1rem;
}

/* Openstaande acties */
.ah-taak {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--ah-line);
    text-decoration: none;
    color: inherit;
}
.ah-taak:first-of-type {
    border-top: none;
}
.ah-taak:hover .ah-t1 {
    color: var(--ah-oranje-d);
}
.ah-chk {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.4rem;
    border: 2px solid #cdd1e0;
    flex: none;
    margin-top: 0.1rem;
}
.ah-taak-body {
    flex: 1;
    min-width: 0;
}
.ah-t1 {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ah-ink);
}
.ah-t2 {
    font-size: 0.78rem;
    color: var(--ah-muted);
    margin-top: 0.1rem;
}
.ah-pill {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    flex: none;
}
.ah-pill-hoog {
    background: var(--ah-rood-bg);
    color: var(--ah-rood);
}
.ah-pill-vandaag {
    background: var(--ah-amber-bg);
    color: var(--ah-amber);
}
.ah-pill-week {
    background: var(--ah-blauw-bg);
    color: var(--ah-blauw);
}

/* Planning vandaag */
.ah-ev {
    display: flex;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--ah-line);
    text-decoration: none;
    color: inherit;
}
.ah-ev:first-of-type {
    border-top: none;
}
.ah-ev:hover .ah-t1 {
    color: var(--ah-oranje-d);
}
.ah-tijd {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ah-marine);
    width: 2.6rem;
    flex: none;
    padding-top: 0.05rem;
}
html.dark .ah-tijd {
    color: #cdd3f0;
}
.ah-streep {
    width: 4px;
    border-radius: 4px;
    flex: none;
    background: var(--ah-groen);
}
.ah-route {
    margin-top: auto;
    margin-bottom: 0.6rem;
    background: var(--ah-chip);
    border-radius: 0.7rem;
    padding: 0.6rem 0.75rem;
    color: var(--ah-muted);
    font-size: 0.76rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ah-route .ah-ico {
    color: var(--ah-oranje-d);
    width: 0.95rem;
    height: 0.95rem;
}

/* Berichten */
.ah-bericht {
    display: flex;
    gap: 0.7rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--ah-line);
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.ah-bericht:first-of-type {
    border-top: none;
}
.ah-kan {
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    background: var(--ah-marine);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-weight: 700;
    font-size: 0.8rem;
}
.ah-bericht-body {
    flex: 1;
    min-width: 0;
}
.ah-nm {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ah-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ah-sn {
    font-size: 0.76rem;
    color: var(--ah-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ah-tag {
    font-size: 0.64rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    flex: none;
}
.ah-tag-nieuw {
    background: var(--ah-groen-bg);
    color: var(--ah-groen);
}
.ah-tag-klaar {
    background: var(--ah-blauw-bg);
    color: var(--ah-blauw);
}

/* Finance / in aanbouw */
.ah-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1rem 1rem 1.6rem;
    margin: auto 0;
}
.ah-soon-ic {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    background: var(--ah-oranje-bg);
    color: var(--ah-oranje-d);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
}
.ah-soon-ic .ah-ico {
    width: 1.4rem;
    height: 1.4rem;
}
.ah-soon-tt {
    font-weight: 700;
    color: var(--ah-marine);
    font-size: 0.9rem;
}
html.dark .ah-soon-tt {
    color: #fff;
}
.ah-soon-tx {
    color: var(--ah-muted);
    font-size: 0.78rem;
    max-width: 22rem;
}
.ah-soon-inline {
    margin-top: 0.6rem;
    margin-bottom: 0.8rem;
    background: var(--ah-oranje-bg);
    color: #8a5a06;
    border-radius: 0.7rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}
html.dark .ah-soon-inline {
    color: #f0b968;
}

/* Onderhoud plannen: de switch en de samengevouwen groepen per plaats */
.ah-switch {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
    background: var(--ah-chip);
    border-radius: 0.7rem;
    margin-bottom: 0.9rem;
}
.ah-switch-k {
    border: none;
    background: transparent;
    border-radius: 0.55rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ah-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ah-switch-k span {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--ah-veld);
}
.ah-switch-k.is-aan {
    background: var(--ah-card);
    color: var(--ah-marine);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
html.dark .ah-switch-k.is-aan {
    color: #fff;
}
.ah-groep {
    border-top: 1px solid var(--ah-line);
    position: relative;
}
.ah-groep-kop,
.ah-groep-vastkop {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.7rem 8rem 0.7rem 0;
    border: none;
    background: none;
    text-align: left;
    color: inherit;
    font: inherit;
}
/* Alleen de klikbare kop toont een klik-cursor; de vaste kop (de Regulier-regel, de verre
   maandvensters) is bewust geen knop en hoort er dus ook niet als een uit te zien. */
.ah-groep-kop {
    cursor: pointer;
}
.ah-groep-pijl {
    flex: none;
    width: 0.9rem;
    color: var(--ah-muted);
}
.ah-groep-nm {
    font-weight: 700;
    color: var(--ah-marine);
}
html.dark .ah-groep-nm {
    color: #fff;
}
.ah-groep-tel,
.ah-groep-sub {
    font-size: 0.78rem;
    color: var(--ah-muted);
}
.ah-groep-actie {
    position: absolute;
    top: 0.45rem;
    right: 0;
}
.ah-groep-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0 0 0.7rem 1.45rem;
}
.ah-groep-r {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--ah-line);
    font-size: 0.82rem;
}
.ah-groep-klant {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ah-ink);
}
.ah-groep-klant em {
    font-style: normal;
    font-size: 0.74rem;
    color: var(--ah-muted);
}
.ah-groep-datum {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ah-muted);
}
.ah-groep-datum.is-over {
    color: var(--ah-rood);
}
.ah-groep-knop {
    flex: none;
}
/* De planvraag-knop in de korte-termijn-bak: kleuren via de --ah-*-tokens zodat het donkere
   thema meeflipt; daar krijgt de rand een tikje extra contrast, want --ah-line is er bijna
   onzichtbaar op een knopvlak. */
.ah-groep-vraagknop {
    border: 1px solid var(--ah-line);
    background: var(--ah-card);
    color: var(--ah-ink);
    border-radius: 0.5rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
}
html.dark .ah-groep-vraagknop {
    border-color: rgba(255, 255, 255, 0.16);
}
/* De inhoud van een maandvenster springt in onder de vensterkop. */
.ah-venster-inspring {
    padding-left: 1.45rem;
}
@media (max-width: 640px) {
    .ah-groep-kop,
    .ah-groep-vastkop {
        padding-right: 0;
        flex-wrap: wrap;
    }
    .ah-groep-actie {
        position: static;
        padding-bottom: 0.5rem;
    }
    .ah-groep-r {
        flex-wrap: wrap;
    }
}

/* De voorgestelde rijvolgorde onder de planning van vandaag */
.ah-route-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.4rem 0 0.2rem;
}
.ah-route-r {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.78rem;
}
.ah-route-n {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: var(--ah-chip);
    color: var(--ah-muted);
    font-size: 0.66rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ah-route-t {
    flex: 1;
    min-width: 0;
    color: var(--ah-ink);
}
.ah-route-t em {
    font-style: normal;
    color: var(--ah-muted);
}
.ah-route-m {
    flex: none;
    font-size: 0.7rem;
    color: var(--ah-muted);
}

/* Finance: kopcijfers, staafgrafiek over zes maanden en de legenda */
.ah-fin-kop {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.ah-fin-kop-c {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-decoration: none;
}
.ah-fin-kop-c b {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ah-marine);
    overflow-wrap: anywhere;
}
html.dark .ah-fin-kop-c b {
    color: #fff;
}
.ah-fin-kop-c span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ah-muted);
}
/* Herzien 30-07: omzet draagt het paneel, één niveau groter dan inkoop en marge. */
.ah-fin-hoofd b {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}
/* De verdeelbalk: waar de omzet van deze maand heen ging. Inkoop vult van links (licht,
   zelfde chip-tint als de inkoopstaaf), de rest is marge (marine; oranje in donker, zelfde
   omslag als de omzetstaaf). */
.ah-verdeel {
    height: 0.55rem;
    border-radius: 999px;
    background: var(--ah-marine);
    overflow: hidden;
    margin-bottom: 0.45rem;
}
html.dark .ah-verdeel {
    background: var(--ah-oranje);
}
.ah-verdeel-inkoop {
    display: block;
    height: 100%;
    background: var(--ah-chip);
    border-right: 1px solid var(--ah-line);
}
/* Legenda-vlekjes, gedeeld door verdeelbalk en maandvergelijking. */
.ah-vlek-inkoop,
.ah-vlek-marge {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    display: inline-block;
}
.ah-vlek-inkoop {
    background: var(--ah-chip);
    border: 1px solid var(--ah-line);
}
.ah-vlek-marge {
    background: var(--ah-marine);
}
html.dark .ah-vlek-marge {
    background: var(--ah-oranje);
}
/* De plek van de maandvergelijking zolang die er nog niet is: één rustige regel in plaats
   van zes lege kolommen. */
.ah-fin-groei {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ah-muted);
    margin: 0 0 0.7rem;
}
.ah-grafiek {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 6.5rem;
    margin-bottom: 0.4rem;
}
.ah-grafiek-m {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.ah-grafiek-staven {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.15rem;
}
.ah-grafiek-staven i {
    width: 0.45rem;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    display: block;
}
.ah-grafiek-lab {
    margin-top: 0.3rem;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ah-muted);
}
.ah-staaf-omzet {
    background: var(--ah-marine);
}
html.dark .ah-staaf-omzet {
    background: var(--ah-oranje);
}
.ah-staaf-inkoop {
    background: var(--ah-chip);
    border: 1px solid var(--ah-line);
}
.ah-fin-legenda {
    display: flex;
    gap: 0.9rem;
    margin-bottom: 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ah-muted);
}
.ah-fin-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.ah-fin-legenda i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    display: inline-block;
}

/* Onderhoud & contracten: de dekkingsring uit de mockup */
.ah-ring-blok {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 0.8rem;
}
.ah-ring {
    position: relative;
    flex: none;
    width: 88px;
    height: 88px;
}
.ah-ring-baan {
    fill: none;
    stroke: var(--ah-chip);
    stroke-width: 9;
}
.ah-ring-vul {
    fill: none;
    stroke: var(--ah-amber);
    stroke-width: 9;
    stroke-linecap: round;
}
.ah-ring-tekst {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.ah-ring-tekst b {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ah-marine);
}
html.dark .ah-ring-tekst b {
    color: #fff;
}
.ah-ring-tekst span {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ah-muted);
}
.ah-ring-naast {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.ah-ring-cijfer {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--ah-muted);
    font-weight: 600;
}
.ah-ring-cijfer b {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ah-marine);
    min-width: 1.4rem;
}
html.dark .ah-ring-cijfer b {
    color: #fff;
}

/* Onderhoud & contracten */
.ah-od-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ah-od-r {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    font-size: 0.82rem;
    color: var(--ah-ink);
    text-decoration: none;
}
.ah-od-r:hover {
    color: var(--ah-oranje-d);
}
.ah-od-r b {
    color: var(--ah-marine);
}
html.dark .ah-od-r b {
    color: #fff;
}
.ah-od-r .ah-ico {
    color: var(--ah-oranje-d);
    width: 1rem;
    height: 1rem;
}

/* Pipeline */
.ah-pipe {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-decoration: none;
    margin-bottom: 0.7rem;
}
.ah-pipe-r {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.8rem;
}
.ah-pipe-nm {
    width: 4.6rem;
    flex: none;
    color: var(--ah-muted);
    font-weight: 600;
}
.ah-pipe-track {
    flex: 1;
    height: 0.55rem;
    background: var(--ah-chip);
    border-radius: 6px;
    overflow: hidden;
}
.ah-pipe-track i {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--ah-marine);
}
html.dark .ah-pipe-track i {
    background: var(--ah-oranje);
}
.ah-pipe-nm {
    width: 7.6rem;
}
.ah-pipe-n {
    width: 1.6rem;
    text-align: right;
    font-weight: 700;
    color: var(--ah-marine);
}
html.dark .ah-pipe-n {
    color: #fff;
}
/* Conversie van deze trede t.o.v. de trede erboven; bij de eerste trede leeg. */
.ah-pipe-pct {
    width: 2.6rem;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ah-muted);
}
.ah-conv {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--ah-line);
}
.ah-conv-r {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
    color: var(--ah-muted);
}
.ah-conv-r b {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ah-marine);
}
html.dark .ah-conv-r b {
    color: #fff;
}

/* ── Lopende trajecten (31-07): per klant een statusbalk van aanvraag t/m onderhoud ─────────
   De rij is klikbaar en leidt naar de klantkaart. De balk toont zes stappen: gehaalde stappen
   in marine, de huidige stap oranje en groter, wat nog komt grijs. Bewust geen percentages:
   Rein moet in één blik zien wáár iemand staat, niet hoeveel procent hij is. */
.ah-binnen {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.7rem;
    background: var(--ah-groen-bg);
}
.ah-binnen-r {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--ah-groen);
    text-decoration: none;
}
.ah-binnen-r b {
    font-weight: 700;
}
.ah-binnen-r em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.74rem;
    opacity: 0.75;
}
.ah-traj {
    display: block;
    padding: 0.65rem 0 0.7rem;
    border-top: 1px solid var(--ah-line);
    text-decoration: none;
    color: inherit;
}
.ah-traj:first-of-type {
    border-top: 0;
}
.ah-traj:hover .ah-traj-nm {
    text-decoration: underline;
}
.ah-traj-kop {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.ah-traj-nm {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ah-marine);
}
html.dark .ah-traj-nm {
    color: #fff;
}
.ah-traj-nm em {
    font-style: normal;
    font-weight: 500;
    color: var(--ah-muted);
}
.ah-traj-nu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--ah-muted);
}
/* Staat een traject een week stil, dan hoort dat op te vallen: dat is precies waar Rein
   iets moet doen. */
.ah-traj-wacht {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ah-rood);
    background: var(--ah-rood-bg);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}
.ah-traj-balk {
    display: flex;
    gap: 0.25rem;
}
.ah-traj-stap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.ah-traj-stap i {
    display: block;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--ah-chip);
}
.ah-traj-stap b {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ah-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ah-traj-stap.is-gehaald i {
    background: var(--ah-marine);
}
html.dark .ah-traj-stap.is-gehaald i {
    background: #8fa0ff;
}
.ah-traj-stap.is-nu i {
    background: var(--ah-oranje);
    height: 0.55rem;
    margin-top: -0.075rem;
}
.ah-traj-stap.is-nu b {
    color: var(--ah-oranje-d);
    font-weight: 800;
}
html.dark .ah-traj-stap.is-nu b {
    color: var(--ah-oranje);
}
.ah-traj-meer {
    display: block;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--ah-line);
    font-size: 0.78rem;
    color: var(--ah-muted);
    text-decoration: none;
}
.ah-traj-meer:hover {
    text-decoration: underline;
}
@media (max-width: 40rem) {
    .ah-traj-stap b {
        font-size: 0.6rem;
    }
    .ah-traj-nu {
        margin-left: 0;
        width: 100%;
    }
}

/* ── Trajectenpagina (31-07, herzien na Wesleys feedback) ───────────────────────────────────
   Drie dingen dragen dit scherm: (1) de groep waarin een klant staat — jij, de klant of de
   agenda; (2) de tijdlijn waarin gehaalde mijlpalen GROEN zijn met een vinkje, want dat is
   goed nieuws en dat mag je zien; (3) een feitenregel eronder met bedrag en datum, zodat
   Rein niet hoeft door te klikken om te weten waar het over gaat. */

.ah-goednieuws {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    background: var(--ah-groen-bg);
    border: 1px solid #cde8d5;
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.1rem;
    color: var(--ah-groen);
}
.ah-gn-pic {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ah-goednieuws b {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.ah-gn-r {
    font-size: 0.85rem;
    line-height: 1.6;
}
.ah-gn-r a {
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
}
.ah-gn-r em {
    font-style: normal;
    opacity: 0.7;
    font-size: 0.78rem;
}

/* Groepskop met kleurstreep: oranje = jij, blauw = klant, grijs = agenda. */
.ah-groepkop {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 1.4rem 0 0.5rem;
    padding-left: 0.6rem;
    border-left: 3px solid var(--ah-oranje);
}
.ah-groepkop.is-klant {
    border-left-color: var(--ah-hemel, #66c4ea);
}
.ah-groepkop.is-agenda {
    border-left-color: var(--ah-line);
}
.ah-groepkop-t {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ah-marine);
}
html.dark .ah-groepkop-t {
    color: #fff;
}
.ah-groepkop-n {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ah-muted);
    background: var(--ah-chip);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}
.ah-groepkop-u {
    font-size: 0.78rem;
    color: var(--ah-muted);
}

.ah-trajlijst {
    padding-bottom: 0.4rem;
}

/* ── Kaarten (31-07, tweede herziening: Wesley koos de kaartweergave) ──────────────────────
   Elke klant een kaart met bovenrand in de kleur van wie aan zet is, twee pillen (wie + hoe
   lang), de zes stappen, een feitenregel en onderaan de knop die je naar het werk brengt. */
/* Onder elkaar, niet in een raster (wens Wesley 31-07): bij dertig trajecten leest een lijst
   rustiger dan een muur van vakjes. Elke kaart is breed en deelt zich in drieën: wie en wat
   links, de stappen in het midden, de knoppen rechts. */
.ah-kaarten {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.4rem;
}
.ah-kaart {
    position: relative;
    background: var(--ah-card);
    border: 1px solid var(--ah-line);
    border-left: 3px solid var(--ah-oranje);
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    display: grid;
    grid-template-columns: minmax(15rem, 1.15fr) minmax(18rem, 1.5fr) auto;
    gap: 1.2rem;
    align-items: center;
}
.ah-kaart-info {
    min-width: 0;
}
.ah-kaart.is-klant {
    border-left-color: var(--ah-blauw);
}
.ah-kaart.is-agenda {
    border-left-color: var(--ah-line);
}
.ah-kaart.is-goed {
    border-left-color: var(--ah-groen);
}
/* Een week stil terwijl Rein aan zet is: dat mag je zien zonder te lezen. */
.ah-kaart.is-stil.is-jij {
    border-left-color: var(--ah-rood);
    background: linear-gradient(90deg, var(--ah-rood-bg) 0%, var(--ah-card) 30%);
}
.ah-kaart-kop {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.ah-kaart-nm {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ah-marine);
    text-decoration: none;
}
.ah-kaart-nm:hover {
    text-decoration: underline;
}
html.dark .ah-kaart-nm {
    color: #fff;
}
.ah-kaart-sub {
    font-size: 0.78rem;
    color: var(--ah-muted);
}
/* Contact en afsluiten: rustig naast de hoofdknop, vol zichtbaar zodra je op de rij komt. */
.ah-kaart-acties {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}
.ah-kaart-bij {
    display: flex;
    gap: 0.35rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.ah-kaart:hover .ah-kaart-bij,
.ah-kaart:focus-within .ah-kaart-bij {
    opacity: 1;
}
.ah-kaart-pillen {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.35rem 0 0;
}
.ah-pil {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    background: var(--ah-oranje-bg);
    color: var(--ah-oranje-d);
}
.ah-pil.is-klant {
    background: var(--ah-blauw-bg);
    color: var(--ah-blauw);
}
.ah-pil.is-agenda {
    background: var(--ah-chip);
    color: var(--ah-muted);
}
.ah-pil.is-goed {
    background: var(--ah-groen-bg);
    color: var(--ah-groen);
}
.ah-pil-tijd {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    background: var(--ah-chip);
    color: var(--ah-muted);
}
.ah-pil-tijd.is-stil {
    background: var(--ah-rood-bg);
    color: var(--ah-rood);
    font-weight: 700;
}
.ah-kaart-feiten {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--ah-muted);
    line-height: 1.5;
}
/* De knop die naar het werk leidt; bij "jij bent aan zet" is hij vol oranje. */
.ah-kaart-knop {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 0.6rem;
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    border: 1px solid var(--ah-line);
    color: var(--ah-marine);
    background: var(--ah-card);
}
.ah-kaart-knop.is-actie {
    background: var(--ah-oranje);
    border-color: var(--ah-oranje);
    color: #fff;
    box-shadow: 0 4px 12px rgba(249, 147, 0, 0.28);
}
.ah-kaart-knop:hover {
    filter: brightness(0.97);
}
html.dark .ah-kaart-knop {
    color: #fff;
}
/* Is de hoofdknop een handeling in plaats van een link, dan is het een Filament-knop die het
   scherm hier opent. Zelfde formaat en afronding als de linkvariant hierboven, zodat de rij
   niet verspringt (11-08). */
.ah-kaart-knop-actie .fi-btn {
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 0.6rem;
    padding: 0.45rem 0.9rem;
    white-space: nowrap;
}

/* De kop van de pagina. */
.ah-tk {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    align-items: flex-start;
    background: var(--ah-marine);
    border-radius: 1rem;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.2rem;
    color: #fff;
}
.ah-tk-l {
    flex: 1;
    min-width: 14rem;
}
.ah-tk-merk {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ah-oranje);
}
.ah-tk h2 {
    margin: 0.15rem 0 0.2rem;
    font-size: 1.35rem;
    font-weight: 800;
}
.ah-tk p {
    margin: 0;
    font-size: 0.82rem;
    color: #c9cee6;
}
.ah-tk p b {
    color: #fff;
}
.ah-tk-binnen {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 0.6rem 0.85rem;
    min-width: 17rem;
}
.ah-tk-binnen-t {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fe3bd;
    margin-bottom: 0.3rem;
}
.ah-tk-binnen-r {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #eef1fb;
}
.ah-tk-binnen-r .ah-ico {
    stroke: #9fe3bd;
    flex: 0 0 auto;
    margin-top: 0.15rem;
}
.ah-tk-binnen-r em {
    font-style: normal;
    color: #a9b1d6;
}

/* De tijdlijn zelf. */
.ah-tl-lijn {
    display: flex;
}
.ah-tl-stap {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}
.ah-tl-draad {
    position: absolute;
    top: 0.5rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--ah-line);
}
.ah-tl-draad.is-vol {
    background: #7bc79a;
}
.ah-tl-bol {
    position: relative;
    z-index: 1;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 2px solid var(--ah-line);
    background: var(--ah-card, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ah-tl-bol svg {
    width: 0.62rem;
    height: 0.62rem;
    stroke: #fff;
    stroke-width: 3.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Gehaald = groen met vinkje: dit is al gelukt. */
.ah-tl-stap.is-gehaald .ah-tl-bol {
    background: var(--ah-groen);
    border-color: var(--ah-groen);
}
/* Hier staat hij nu. */
.ah-tl-stap.is-nu .ah-tl-bol {
    background: var(--ah-oranje);
    border-color: var(--ah-oranje);
    box-shadow: 0 0 0 3px var(--ah-oranje-bg, #fff4e2);
}
.ah-tl-stap b {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ah-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ah-tl-stap.is-gehaald b {
    color: var(--ah-groen);
}
.ah-tl-stap.is-nu b {
    color: var(--ah-oranje-d);
    font-weight: 800;
}
html.dark .ah-tl-stap.is-nu b {
    color: var(--ah-oranje);
}

/* De feitenregel: bedrag, datum, waar het over gaat. */
.ah-tl-ctx {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--ah-muted);
}
.ah-tl-actie {
    flex: 0 0 auto;
    display: flex;
    gap: 0.35rem;
    opacity: 0.45;
    transition: opacity 0.15s;
}
.ah-tl:hover .ah-tl-actie {
    opacity: 1;
}

@media (max-width: 62rem) {
    .ah-kaart {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
    .ah-kaart-acties {
        justify-content: flex-start;
    }
}
@media (max-width: 48rem) {
    .ah-tl {
        flex-wrap: wrap;
    }
    .ah-tl-body {
        flex-basis: calc(100% - 4.2rem);
    }
    .ah-tl-actie {
        opacity: 1;
        flex-basis: 100%;
        padding-left: 4.2rem;
    }
    .ah-tl-nu {
        margin-left: 0;
        flex-basis: 100%;
    }
    .ah-tl-stap b {
        font-size: 0.58rem;
    }
}

/* ── De klanten van vandaag (11-08) ────────────────────────────────────────────────────────
   Per klant één regel: links wie en wanneer, rechts wat er nog te doen is. Afgeronde taken
   blijven staan met een vinkje, zodat Rein ziet dat hij niets vergeten is. */
.ah-vandaag {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ah-vandaag-r {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem .85rem;
    border: 1px solid #eef1f6;
    border-radius: .7rem;
    background: #fff;
}

.ah-vandaag-wie {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 12rem;
}

.ah-vandaag-nm {
    font-weight: 700;
    font-size: .92rem;
    color: #212650;
    text-decoration: none;
}

.ah-vandaag-nm:hover { text-decoration: underline; }

.ah-vandaag-sub {
    font-size: .78rem;
    color: #6b7280;
}

.ah-vandaag-taken {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

/* De taakpillen in "De klanten van vandaag". LET OP de naam: dit heette eerst .ah-taak, maar
   die klasse bestond hierboven al voor de lijstregels van élk dashboardblok (openstaande acties,
   concepten, agenda aanvullen). Omdat dit blok verderop in het bestand staat won het en werden
   al die regels oranje pillen met nowrap, waardoor de tekst niet meer afbrak (melding Wesley
   12-08). Nieuwe stijlen krijgen dus een eigen voorvoegsel; hergebruik nooit een bestaande naam. */
.ah-dagtaak {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid #f0c99a;
    background: #fff7ec;
    color: #8a5a00;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ah-dagtaak:hover { border-color: #f99300; }

.ah-dagtaak.is-klaar {
    border-color: #d6ead9;
    background: #f2f9f4;
    color: #3f7d5a;
    font-weight: 500;
}

.ah-dagtaak .ah-ico {
    width: .78rem;
    height: .78rem;
    stroke-width: 3;
}

/* ===== Het onderhoudsjaar per maand (12-08) =====
   Twaalf knoppen op een rij met een staafje voor de drukte; klikken klapt de maand uit. */
.ah-mnd-rij {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.2rem 0 0.6rem;
}
@media (max-width: 60rem) {
    .ah-mnd-rij { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
    .ah-mnd-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ah-mnd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.3rem 0.55rem;
    border: 1px solid var(--ah-line);
    border-radius: 0.7rem;
    background: var(--ah-card);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.ah-mnd:hover { border-color: var(--ah-oranje); }
.ah-mnd.is-aan {
    border-color: var(--ah-oranje);
    background: var(--ah-oranje-bg);
}
.ah-mnd.is-leeg { opacity: 0.55; }
.ah-mnd-nm {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ah-marine);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
html.dark .ah-mnd-nm { color: #fff; }
.ah-mnd-jr { font-size: 0.62rem; color: var(--ah-muted); }
/* Het staafje: hoe voller de maand, hoe hoger. */
.ah-mnd-balk {
    width: 100%;
    height: 2.2rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0.2rem 0 0.1rem;
}
.ah-mnd-balk i {
    display: block;
    width: 0.55rem;
    min-height: 2px;
    border-radius: 3px;
    background: var(--ah-oranje);
}
.ah-mnd.is-leeg .ah-mnd-balk i { background: var(--ah-line); }
.ah-mnd-n {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ah-marine);
    line-height: 1;
}
html.dark .ah-mnd-n { color: #fff; }
.ah-mnd-sub { font-size: 0.66rem; color: var(--ah-muted); }
.ah-mnd-gepland {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--ah-groen);
}
/* De uitgeklapte maand eronder. */
.ah-mnd-uit {
    border-top: 1px solid var(--ah-line);
    padding-top: 0.5rem;
}
.ah-mnd-uit-kop {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.2rem 0 0.5rem;
}
.ah-mnd-uit-kop b { font-size: 0.9rem; color: var(--ah-marine); }
html.dark .ah-mnd-uit-kop b { color: #fff; }
.ah-mnd-uit-kop span { font-size: 0.76rem; color: var(--ah-muted); }

/* ── Maandweergave: rooster op een breed scherm, lijst op de telefoon ──────────────────────
   Wens Wesley 14-08: "omdat Rein het vooral op de telefoon gebruikt moet de planning per
   maandoverzicht een lijstweergave zijn, dat hij ook goed kan zien wat er op die dagen staat.
   Nu is het amper te zien." Zeven kolommen op een schermbreedte van 390px geven per dag zo'n
   vijftig pixels; daar past geen enkele agendaregel in. Onder de 900px tonen we daarom dezelfde
   maand als een lijst per dag, met de volledige regels eronder.

   De grens ligt op 768px (wens Wesley 14-08: "die lijstweergave alleen voor mobiel"): telefoons
   krijgen de lijst, een tablet in liggende stand en elke laptop houden gewoon het rooster. */
.ah-maandrooster { display: block; }
.ah-maandlijst { display: none; }

@media (max-width: 768px) {
    .ah-maandrooster { display: none; }
    .ah-maandlijst { display: block; }
}

.ah-mlijst-dag {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--ah-line);
    border-radius: 0.7rem;
    background: #fff;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
html.dark .ah-mlijst-dag { background: #101728; }
.ah-mlijst-dag.is-vandaag { border-color: var(--ah-marine); border-width: 1.5px; }
.ah-mlijst-dag.is-weekend { background: #fbfcfe; }
html.dark .ah-mlijst-dag.is-weekend { background: #0c1220; }

.ah-mlijst-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.ah-mlijst-kop b {
    font-size: 0.86rem;
    color: var(--ah-marine);
}
html.dark .ah-mlijst-kop b { color: #fff; }
.ah-mlijst-kop span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ah-muted);
}

/* Eén agendaregel: tijd vet vooraan, daarna waar het over gaat. Bewust géén afkapping met
   puntjes zoals in het rooster: op de telefoon is juist de hele regel het doel. */
.ah-mlijst-regel {
    font-size: 0.78rem;
    line-height: 1.45;
    color: #374151;
    padding: 0.1rem 0;
}
html.dark .ah-mlijst-regel { color: #cbd5e1; }
.ah-mlijst-regel.is-aanvullen { color: #b45309; }
.ah-mlijst-regel b { color: var(--ah-marine); }
html.dark .ah-mlijst-regel b { color: #fff; }

.ah-mlijst-leeg {
    font-size: 0.8rem;
    color: var(--ah-muted);
    padding: 0.6rem 0.2rem;
}

/* ── Dagenkalender in het planvenster (wens Wesley 14-08) ──────────────────────────────────
   "Dagen met mogelijkheden moeten groen weergegeven worden met passend tijdstip. Is er een moment
   dat Rein al in de buurt is, maak dan duidelijk een voorkeursdag."

   Kaarten die omlopen: op een telefoon onder elkaar, op een breed scherm naast elkaar. Bewust
   geen zeven-koloms maandrooster, want dat is precies de weergave waarvan Rein vanochtend zei
   dat hij er op zijn telefoon niets van kan lezen. */
.ah-plan-tip {
    border: 1.5px solid var(--ah-oranje);
    border-radius: 0.7rem;
    background: #fff8f1;
    padding: 0.55rem 0.8rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #7c3a06;
    margin-bottom: 0.7rem;
}
html.dark .ah-plan-tip { background: #2a1c0c; color: #fbdcb8; }

.ah-plan-uitleg {
    font-size: 0.78rem;
    color: var(--ah-muted);
    margin-bottom: 0.5rem;
}
.ah-plan-leeg {
    font-size: 0.82rem;
    color: var(--ah-muted);
    line-height: 1.5;
}

.ah-plan-dagen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem;
}

.ah-plan-dag {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
    border: 1px solid var(--ah-line);
    border-radius: 0.7rem;
    padding: 0.55rem 0.7rem;
    background: #fff;
    /* Groot genoeg om met een duim te raken. */
    min-height: 4.4rem;
}
html.dark .ah-plan-dag { background: #101728; }

/* Groen = hier is ruimte. */
.ah-plan-dag.is-open {
    cursor: pointer;
    border-color: #86c9a4;
    background: #f2fbf6;
}
html.dark .ah-plan-dag.is-open { background: #0e2419; border-color: #2f6b4b; }
.ah-plan-dag.is-open:hover { border-color: var(--ah-groen); }

/* De dag waarop Rein toch al in die hoek zit. */
.ah-plan-dag.is-voorkeur {
    border-color: var(--ah-oranje);
    border-width: 1.5px;
}

/* Aangetikt. */
.ah-plan-dag.is-gekozen {
    border-color: var(--ah-marine);
    border-width: 2px;
    background: #eef1fb;
}
html.dark .ah-plan-dag.is-gekozen { background: #171f36; }

.ah-plan-dag.is-dicht {
    background: #f7f8fa;
    color: var(--ah-muted);
}
html.dark .ah-plan-dag.is-dicht { background: #0b1020; }

.ah-plan-dag-dag {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ah-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ah-plan-dag-tijd {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ah-marine);
    line-height: 1.1;
}
html.dark .ah-plan-dag-tijd { color: #fff; }
.ah-plan-dag-reden {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--ah-muted);
}
.ah-plan-dag-let {
    font-size: 0.7rem;
    line-height: 1.35;
    color: #b45309;
}

/* De dag in zijn geheel op de kaart (wens Wesley 14-08: "waarom zien we niet gewoon de afspraken
   in zijn geheel"). Eerst wat er al staat, met het voorstel op zijn eigen plek ertussen. */
.ah-plan-regel {
    font-size: 0.74rem;
    line-height: 1.45;
    color: #4b5563;
}
html.dark .ah-plan-regel { color: #cbd5e1; }

/* Waar het voorstel invalt: dit is de regel die erbij komt als je de dag aantikt. */
.ah-plan-regel.is-voorstel {
    font-weight: 700;
    color: #166534;
    background: #dcfce7;
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
}
html.dark .ah-plan-regel.is-voorstel { background: #14532d; color: #bbf7d0; }

.ah-plan-dag-niets {
    font-size: 0.74rem;
    font-style: italic;
    color: var(--ah-muted);
}

/* Waarom deze dag de voorkeur heeft, ook als het voorstel ertussen valt. */
.ah-plan-dag-voorkeur {
    font-size: 0.7rem;
    line-height: 1.35;
    font-weight: 700;
    color: #a2570c;
}
html.dark .ah-plan-dag-voorkeur { color: #fbbf24; }

/* De gekozen dagen met een tijd die nog te wijzigen is ("ik zie geen tijdstip wijzigen"). */
.ah-plan-keuze {
    margin-top: 0.7rem;
    border-top: 1px solid var(--ah-line);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ah-plan-keuze-regel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.ah-plan-keuze-dag {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ah-marine);
}
html.dark .ah-plan-keuze-dag { color: #fff; }
.ah-plan-keuze-tijd {
    font-size: 0.9rem;
    border: 1px solid var(--ah-line);
    border-radius: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: #fff;
    color: var(--ah-marine);
    /* Groot genoeg om met een duim te raken. */
    min-height: 2.6rem;
    min-width: 6rem;
}
html.dark .ah-plan-keuze-tijd { background: #101728; color: #fff; }

/* De keuze wint van de groene "er is ruimte"-rand, ook bij zweven en in het donkere thema
   (review 14-08: de groene hover-rand overrulede de aangetikte dag). */
.ah-plan-dag.is-open.is-gekozen,
.ah-plan-dag.is-open.is-gekozen:hover,
html.dark .ah-plan-dag.is-open.is-gekozen {
    border-color: var(--ah-marine);
    border-width: 2px;
}

/* Navigatietegels op het onderhoudsdashboard: drie naast elkaar in plaats van vier.
   Zelfde tegels, zelfde tokens; alleen het raster wijkt af. */
.ah-kpis-3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 68rem) {
    .ah-kpis-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 34rem) {
    .ah-kpis-3 {
        grid-template-columns: 1fr;
    }
}

/* Resultaat van de mailings: trechter met klikbare treden en de namenlijst eronder. */
.ah-ml-keuzes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.ah-ml-keuze {
    border: 1px solid var(--ah-line);
    background: var(--ah-card);
    color: var(--ah-ink);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.ah-ml-keuze b {
    color: var(--ah-marine);
}
html.dark .ah-ml-keuze b {
    color: #fff;
}
.ah-ml-keuze.is-aan,
.ah-ml-keuze.is-aan b {
    background: var(--ah-marine);
    color: #fff;
    border-color: var(--ah-marine);
}
.ah-ml-keuze.is-aan b {
    background: none;
}
/* Een trede van de trechter is een knop, maar mag er niet als knop uitzien. */
.ah-ml-pipe {
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.ah-ml-pipe.is-aan .ah-pipe-nm,
.ah-ml-pipe:hover .ah-pipe-nm {
    color: var(--ah-marine);
}
/* Ruimer dan in de verkooptrechter: "Systemen opgegeven" past niet in 7,6rem, en de
   aantallen lopen hier tot in de honderden. */
.ah-ml-pipe .ah-pipe-nm {
    width: 9.6rem;
}
.ah-ml-pipe .ah-pipe-n {
    width: 2.6rem;
}
html.dark .ah-ml-pipe.is-aan .ah-pipe-nm,
html.dark .ah-ml-pipe:hover .ah-pipe-nm {
    color: #fff;
}
.ah-ml-wrap {
    overflow-x: auto;
    margin-bottom: 0.8rem;
}
.ah-ml-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    color: var(--ah-ink);
}
.ah-ml-tabel th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ah-muted);
    font-weight: 700;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--ah-line);
    white-space: nowrap;
}
.ah-ml-tabel td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--ah-line);
    vertical-align: top;
}
.ah-ml-tabel tr:last-child td {
    border-bottom: 0;
}
.ah-ml-nm {
    color: var(--ah-marine);
    font-weight: 700;
    text-decoration: none;
}
html.dark .ah-ml-nm {
    color: #fff;
}
.ah-ml-nm:hover {
    color: var(--ah-oranje-d);
}
.ah-ml-sub {
    display: block;
    color: var(--ah-muted);
    font-size: 0.74rem;
}
.ah-ml-leeg {
    color: var(--ah-muted);
}
.ah-ml-zoek {
    width: 100%;
    max-width: 22rem;
    border: 1px solid var(--ah-line);
    background: var(--ah-veld);
    color: var(--ah-ink);
    border-radius: 0.6rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
}
.ah-ml-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.ah-ml-badge.is-geaccepteerd {
    background: var(--ah-groen-bg);
    color: var(--ah-groen);
}
.ah-ml-badge.is-geweigerd,
.ah-ml-badge.is-afgemeld {
    background: var(--ah-rood-bg);
    color: var(--ah-rood);
}
.ah-ml-badge.is-aanbod {
    background: var(--ah-oranje-bg);
    color: var(--ah-amber);
}
.ah-ml-badge.is-ingevuld,
.ah-ml-badge.is-gekeken {
    background: var(--ah-blauw-bg);
    color: var(--ah-blauw);
}
.ah-ml-badge.is-stil {
    background: var(--ah-chip);
    color: var(--ah-muted);
}

/* Akkoord voor een hele mailingronde. */
.ah-ronde-knop {
    background: var(--ah-oranje-d, #d97f00);
    color: #fff;
    border: 0;
    border-radius: 0.6rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.ah-ronde-knop:hover {
    filter: brightness(0.95);
}