/* AYR CRM: indeling in drie pijlers (Sales, Product, Netwerk) plus Werk.
   Bovenin de pijlers, daaronder per pijler een strook met de onderdelen. */

.subnav{position:sticky;top:58px;z-index:25;background:var(--panel);border-bottom:1px solid var(--rule);
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin:-1.6rem -1.2rem 1.4rem;padding:0 1.2rem}
.subnav::-webkit-scrollbar{display:none}
.subnav button{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:.62rem .85rem;
  border-bottom:2px solid transparent;white-space:nowrap}
.subnav button:hover{color:var(--ink)}
.subnav button.on{color:var(--ink);border-bottom-color:var(--ink)}
.subnav .aantal{color:var(--ink-3);margin-left:.35rem;font-variant-numeric:tabular-nums}

/* scorebord: 8 cijfers voor dinsdag 09:30 */
.scorebord{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--ink);margin-bottom:.9rem}
.sb{background:var(--panel);padding:.8rem .85rem;display:flex;flex-direction:column;gap:.2rem;min-height:104px}
.sb .nr{font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.sb .n{font-size:1.45rem;line-height:1.1;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.sb .d{font-size:.74rem;color:var(--ink-2)}
.sb .bron{margin-top:auto;font-size:.66rem;color:var(--ink-3)}
.sb.koppelen .n{font-size:.95rem;font-weight:400;color:var(--ink-3)}
.sb.koppelen{background:var(--paper)}
@media (max-width:900px){.scorebord{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* pijlerkaarten op het overzicht */
.pijlerkaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-bottom:.9rem}
.pk{border:1px solid var(--ink);background:var(--panel);cursor:pointer;display:flex;flex-direction:column}
.pk:hover{border-color:var(--ink-3)}
.pk .kop{background:var(--ink);color:var(--paper);font-size:var(--cap);letter-spacing:var(--track);text-transform:uppercase;padding:.5rem .8rem;display:flex;justify-content:space-between}
.pk .kop span{color:var(--cane)}
.pk .cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:.75rem .8rem;gap:.6rem}
.pk .cijfers b{display:block;font-size:1.2rem;font-weight:500;font-variant-numeric:tabular-nums}
.pk .cijfers small{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:900px){.pijlerkaarten{grid-template-columns:1fr}}

/* trechter: stappen met aantallen en doorstroom */
.trechter{display:flex;flex-direction:column;gap:.38rem}
.tr-rij{display:grid;grid-template-columns:minmax(90px,130px) 1fr 52px;gap:.6rem;align-items:center;font-size:.8rem}
.tr-rij .nm{color:var(--ink-2)}
.tr-rij .sp{height:16px;background:var(--spoor);border-radius:3px;position:relative}
.tr-rij .sp i{position:absolute;left:0;top:0;bottom:0;background:var(--brass);border-radius:3px;min-width:2px}
.tr-rij .sp i.leeg{background:transparent}
.tr-rij.eind .sp i{background:var(--ink)}
.tr-rij.uit .sp i{background:#B3B3BB}
.tr-rij .v{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.tr-noot{font-size:.74rem;color:var(--ink-2);margin-top:.5rem}

/* onderdelen-tegels per pijler */
.onderdelen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--rule);border:1px solid var(--ink);margin-top:.9rem}
.ondl{background:var(--panel);padding:.8rem;cursor:pointer;position:relative}
.ondl:hover{background:var(--paper)}
.ondl::after{content:"→";position:absolute;right:.7rem;top:.7rem;color:var(--ink-3)}
.ondl b{display:block;font-size:1.35rem;font-weight:500;font-variant-numeric:tabular-nums}
.ondl small{font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.ondl .d{font-size:.72rem;color:var(--ink-2);margin-top:.15rem}

/* nog te koppelen */
.koppellijst .rij2{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--rule);font-size:.8rem}
.koppellijst .rij2:last-child{border-bottom:0}
.koppellijst .rij2 span{color:var(--ink-2)}
.koppellijst .rij2 em{font-style:normal;color:var(--ink-3);font-size:.72rem;text-align:right}

/* werk: acties per moment */
.werkgroep{margin-bottom:.9rem}
.werkgroep .blockhead .r{color:var(--cane)}

/* groepslabels in de strook (B2B, D2C) */
.subnav .groep{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:.66rem .2rem .66rem .9rem;border-left:1px solid var(--rule);margin-left:.4rem;white-space:nowrap;align-self:center}
/* binnen Hotels: Cockpit · Nederland · Frankrijk */
.hotelstrook{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--ink);margin:0 0 1.1rem}
.hotelstrook button{background:var(--panel);text-align:left;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.1rem}
.hotelstrook button:hover{background:var(--paper)}
.hotelstrook button.on{background:var(--ink);color:var(--paper)}
.hotelstrook b{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.hotelstrook span{font-size:.74rem;color:var(--ink-3)}
.hotelstrook button.on span{color:var(--cane)}

/* collectie: één kaart per model */
.prodgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
@media (max-width:900px){.prodgrid{grid-template-columns:1fr}}
.prodkaart{border:1px solid var(--ink);background:var(--panel);padding:.8rem .9rem;cursor:pointer;display:flex;flex-direction:column;gap:.3rem}
.prodkaart:hover{border-color:var(--ink-3)}
.pk-kop{display:flex;align-items:center;gap:.7rem}
.pk-naam{flex:1;display:flex;justify-content:space-between;align-items:center;gap:.5rem;min-width:0}
.pk-beeld{width:56px;height:70px;object-fit:cover;background:var(--paper);border:1px solid var(--rule);flex:0 0 auto}
.pk-naam b{font-size:1.25rem;font-weight:500;letter-spacing:.02em}
.pk-soort{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
.pk-rij{display:flex;justify-content:space-between;gap:.6rem;font-size:.8rem;border-bottom:1px solid var(--rule);padding:.28rem 0}
.pk-rij span{color:var(--ink-2)}
.pk-rij b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.pk-rij b.laag{color:var(--rust)}
.pk-balk{height:6px;background:var(--spoor);border-radius:3px;margin:.1rem 0 .2rem}
.pk-balk i{display:block;height:100%;background:var(--brass);border-radius:3px}
.pk-omschr{font-size:.76rem;color:var(--ink-2);margin:0 0 .35rem;line-height:1.45}