/* =========================================================================
   KSM ICT — beheercentrum
   Rustige werkomgeving: indigo zijbalk, licht werkvlak, veel witruimte.
   ========================================================================= */

:root {
  --a-bg:       #F7F4EF;
  --a-surface:  #FFFFFF;
  --a-side:     #1B1B4B;
  --a-side-2:   #262663;
  --a-ink:      #16161D;
  --a-soft:     #5A5A66;
  --a-muted:    #8A8A95;
  --a-line:     #E6E1D9;
  --a-brand:    #2A2A8F;
  --a-brand-2:  #4646C4;
  --a-green:    #14624A;
  --a-red:      #A8322A;
  --a-amber:    #B47A16;
  --a-radius:   12px;
  --a-radius-s: 8px;
  --a-font:     'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--a-font); background: var(--a-bg); color: var(--a-ink);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--a-brand); }
:focus-visible { outline: 3px solid var(--a-brand-2); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ structuur */
.admin { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }

.side { background: var(--a-side); color: #C9C9E8; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1.6rem; }
.side__brand { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; padding: .3rem .5rem 0; }
.side__brand strong { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; }
.side__brand span { display: block; font-size: .72rem; color: #8E8EC8; letter-spacing: .09em; text-transform: uppercase; }

.side__group { display: grid; gap: .15rem; }
.side__title { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7676B8; padding: .6rem .75rem .3rem; }
.side a.side__link {
  display: flex; align-items: center; gap: .7rem; padding: .58rem .75rem; border-radius: var(--a-radius-s);
  color: #C9C9E8; text-decoration: none; font-size: .93rem;
}
.side a.side__link:hover { background: var(--a-side-2); color: #fff; }
.side a.side__link[aria-current="page"] { background: #fff; color: var(--a-side); font-weight: 500; }
.side__badge { margin-left: auto; background: var(--a-brand-2); color: #fff; border-radius: 999px; font-size: .7rem; padding: .05rem .45rem; }
.side__foot { margin-top: auto; font-size: .8rem; color: #8E8EC8; display: grid; gap: .5rem; }
.side__foot a { color: #C9C9E8; }

.mobile-topbar { display: none; }
.side-backdrop { display: none; }

.work { padding: 2rem 2.4rem 4rem; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.topbar h1 { font-size: 1.7rem; font-weight: 400; margin: 0; letter-spacing: -.02em; }
.topbar__actions { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.eyebrow { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); margin: 0 0 .2rem; }

/* --------------------------------------------------------------- kaarten */
.panel { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 1.6rem; margin-bottom: 1.4rem; }
.panel__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.panel__head h2 { font-size: 1.1rem; font-weight: 500; margin: 0; }
.panel__head .btn { margin-left: auto; }
.panel--flush { padding: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.6rem; }

/* Twee kolommen (formulier + zijpanelen) — op een telefoon onder elkaar */
.layout-2col { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
/* Zelfde grid, maar de smalle kolom (zijbalk met gegevens) staat eerst — voor
   de ticketpagina, waar de brede kolom de tabbladen bevat. Op mobiel staat
   de zijbalk zo vanzelf boven de tabbladen (document­volgorde = leesvolgorde). */
.layout-2col--zijbalk-links { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); }

/* Tabbladen binnen een pagina (bv. Berichten/Tijdregistraties/Producten op
   een ticket) — zelfde .tabs-uiterlijk als paginanavigatie, maar hier
   clientside geschakeld (admin.js, [data-tabnav]/[data-tabpanel]) zonder
   herladen van de pagina. */
[data-tabpanel][hidden] { display: none; }
.stat { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 1.3rem; }
.stat__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--a-muted); margin: 0 0 .4rem; }
.stat__value { font-size: 1.9rem; font-weight: 300; letter-spacing: -.02em; }
.stat__note { font-size: .82rem; color: var(--a-muted); margin: .2rem 0 0; }

/* --------------------------------------------------------------- knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .58rem 1.05rem; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--a-brand); color: #fff; }
.btn--primary:hover { background: #1F1F73; }
.btn--ghost { border-color: var(--a-line); color: var(--a-ink); background: #fff; }
.btn--ghost:hover { border-color: var(--a-brand); color: var(--a-brand); }
.btn--danger { border-color: var(--a-red); color: var(--a-red); background: #fff; }
.btn--danger:hover { background: var(--a-red); color: #fff; }
.btn--sm { padding: .35rem .8rem; font-size: .83rem; }
.btn--icon { padding: .45rem; width: 34px; height: 34px; border-radius: 8px; }

/* ------------------------------------------------------------ formulieren */
.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.field { display: grid; gap: .35rem; }
.field > label { font-size: .86rem; font-weight: 500; }
.hint { font-size: .8rem; color: var(--a-muted); }
.input, .select, .textarea {
  width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--a-line); border-radius: var(--a-radius-s);
  background: #fff; font: inherit; color: var(--a-ink);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--a-brand); box-shadow: 0 0 0 3px rgba(42,42,143,.13); }
.textarea { min-height: 110px; resize: vertical; font-family: inherit; }
.textarea--code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .85rem; min-height: 180px; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.check input { margin-top: .25rem; accent-color: var(--a-brand); width: 17px; height: 17px; }
.inline-form { display: inline; }

.alert { padding: .85rem 1.1rem; border-radius: var(--a-radius-s); margin-bottom: 1.2rem; border-left: 3px solid; font-size: .92rem; }
.alert--success { background: #EAF4EF; border-color: var(--a-green); color: #12463A; }
.alert--error   { background: #FBEEEC; border-color: var(--a-red); color: #7E241E; }
.alert--info    { background: #EDEDFA; border-color: var(--a-brand); color: #23236B; }
.alert--warning { background: #FDF3E2; border-color: var(--a-amber); color: #7A5210; }

/* --------------------------------------------------------------- tabellen */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--a-muted); padding: .9rem 1.1rem; border-bottom: 1px solid var(--a-line); background: #FBFAF8; }
.table td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--a-line); vertical-align: middle; }
.table tbody tr:hover td { background: #FBFAF8; }
.table .num { text-align: right; }
.table a { text-decoration: none; font-weight: 500; }
.table a:hover { text-decoration: underline; }
.table__thumb { width: 52px; height: 38px; object-fit: cover; border-radius: 6px; background: #EDEDFA; }

.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; }
.badge--green { background: #E4F1EB; color: var(--a-green); }
.badge--brand { background: #EDEDFA; color: var(--a-brand); }
.badge--grey  { background: #EFEBE5; color: var(--a-soft); }
.badge--red   { background: #FBEEEC; color: var(--a-red); }
.badge--amber { background: #FDF3E2; color: var(--a-amber); }

.empty { text-align: center; padding: 3rem 1.5rem; color: var(--a-muted); }
.empty h3 { color: var(--a-ink); font-weight: 500; margin: 0 0 .4rem; }

/* --------------------------------------------------------------- tabbladen */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--a-line); margin-bottom: 1.6rem; }
.tabs a {
  padding: .6rem 1rem; text-decoration: none; color: var(--a-soft); font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--a-ink); }
.tabs a[aria-current="page"] { color: var(--a-brand); border-bottom-color: var(--a-brand); font-weight: 500; }

/* --------------------------------------------------- pagina-bouwer */
.builder { display: grid; gap: 1rem; }
.block {
  background: #fff; border: 1.5px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden;
}
.block[data-open="true"] { border-color: var(--a-brand); }
.block__bar {
  display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; background: #FBFAF8;
  cursor: pointer; user-select: none;
}
.block__bar h3 { margin: 0; font-size: .95rem; font-weight: 500; }
.block__type { font-size: .75rem; color: var(--a-muted); text-transform: uppercase; letter-spacing: .07em; }
.block__tools { margin-left: auto; display: flex; gap: .3rem; align-items: center; }
.block__body { padding: 1.3rem; display: none; border-top: 1px solid var(--a-line); }
.block[data-open="true"] .block__body { display: grid; gap: 1.1rem; }
.block__drag { cursor: grab; color: var(--a-muted); }
.block.is-dragging { opacity: .45; }

.repeat-item { border: 1px solid var(--a-line); border-radius: var(--a-radius-s); padding: 1rem; display: grid; gap: .8rem; background: #FBFAF8; }
.repeat-item__head { display: flex; align-items: center; gap: .6rem; }
.repeat-item__head strong { font-size: .85rem; }
.repeat-item__head .btn { margin-left: auto; }

.picker { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.picker button {
  display: flex; align-items: center; gap: .6rem; padding: .8rem; border: 1.5px solid var(--a-line);
  border-radius: var(--a-radius-s); background: #fff; cursor: pointer; font: inherit; font-size: .88rem; text-align: left;
}
.picker button:hover { border-color: var(--a-brand); color: var(--a-brand); }

/* ----------------------------------------------------------- media */
.media-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.media-item { border: 1.5px solid var(--a-line); border-radius: var(--a-radius-s); overflow: hidden; background: #fff; }
.media-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: #EDEDFA; }
.media-item__meta { padding: .55rem .7rem; font-size: .76rem; color: var(--a-muted); word-break: break-all; }
.media-item__actions { display: flex; gap: .3rem; padding: 0 .7rem .7rem; }

/* Let op: dit is een <label>, en die is van zichzelf inline. Zonder een
   eigen display-waarde lopen de rand, de opvulling en de tekst door elkaar. */
.dropzone {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .35rem;
  min-height: 132px;
  padding: 1.8rem 1.5rem;
  border: 2px dashed var(--a-line);
  border-radius: var(--a-radius);
  text-align: center;
  color: var(--a-muted);
  background: #FBFAF8;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dropzone strong { color: var(--a-ink); font-weight: 500; font-size: 1rem; }
.dropzone small { font-size: .84rem; }
.dropzone:hover { border-color: var(--a-brand); background: #F7F5FF; }
.dropzone:focus-within { outline: 2px solid var(--a-brand); outline-offset: 2px; }
.dropzone.is-over { border-color: var(--a-brand); background: #EDEDFA; color: var(--a-brand); }
.dropzone.is-over strong { color: var(--a-brand); }
.dropzone__icoon { color: var(--a-brand); opacity: .55; }
.dropzone.is-over .dropzone__icoon { opacity: 1; }

/* ----------------------------------------------------- editor toolbar */
.editor { border: 1.5px solid var(--a-line); border-radius: var(--a-radius-s); overflow: hidden; background: #fff; }
.editor__bar { display: flex; flex-wrap: wrap; gap: .2rem; padding: .4rem; border-bottom: 1px solid var(--a-line); background: #FBFAF8; }
.editor__bar button {
  border: 0; background: none; cursor: pointer; padding: .3rem .55rem; border-radius: 6px;
  font: inherit; font-size: .84rem; color: var(--a-soft);
}
.editor__bar button:hover { background: #EDEDFA; color: var(--a-brand); }
.editor__area { padding: .9rem 1rem; min-height: 160px; outline: none; }
.editor__area:focus { box-shadow: inset 0 0 0 2px rgba(42,42,143,.12); }
.editor__area p { margin: 0 0 .8em; }
.editor__area h2, .editor__area h3 { margin: 1.2em 0 .5em; }

/* ------------------------------------------------------ inlogscherm */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: var(--a-side); }
.login-card { background: #fff; border-radius: 16px; padding: 2.4rem; width: min(100%, 400px); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-card h1 { font-size: 1.4rem; font-weight: 400; margin: 0 0 .3rem; }
.login-card p { color: var(--a-muted); font-size: .9rem; margin: 0 0 1.6rem; }

/* --------------------------------------------------------- responsief */
@media (max-width: 1000px) {
  .admin { grid-template-columns: 1fr; }

  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 30;
    background: var(--a-side); color: #fff;
    padding: .8rem 1rem;
  }
  .mobile-topbar__brand { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; }
  .mobile-topbar__brand strong { font-weight: 500; font-size: .98rem; letter-spacing: -.01em; }
  .mobile-topbar__toggle {
    position: relative; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; color: #fff; padding: 0;
    border-radius: 8px; cursor: pointer;
  }
  .mobile-topbar__toggle:hover, .mobile-topbar__toggle:focus-visible { background: var(--a-side-2); }
  .mobile-topbar__icon {
    position: absolute; display: flex;
    transition: opacity .2s ease, transform .28s cubic-bezier(.32, .72, 0, 1);
  }
  .mobile-topbar__icon--menu { opacity: 1; transform: rotate(0deg) scale(1); }
  .mobile-topbar__icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
  .mobile-topbar__toggle[aria-expanded="true"] .mobile-topbar__icon--menu { opacity: 0; transform: rotate(90deg) scale(.6); }
  .mobile-topbar__toggle[aria-expanded="true"] .mobile-topbar__icon--close { opacity: 1; transform: rotate(0deg) scale(1); }

  .side {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(84vw, 300px);
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    padding: 1.5rem 1rem; gap: 1.6rem;
    transform: translateX(-105%);
    box-shadow: 0 0 0 rgba(10, 10, 40, 0);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), box-shadow .3s ease;
    z-index: 50; overflow-y: auto;
  }
  .side.is-open {
    transform: translateX(0);
    box-shadow: 10px 0 36px rgba(10, 10, 40, .35);
  }
  .side__brand { padding: .3rem .5rem 0; }
  .side__group { display: grid; gap: .15rem; width: auto; }
  .side__title, .side__foot { display: block; }
  .side a.side__link { padding: .58rem .75rem; font-size: .93rem; }

  .side-backdrop {
    display: block;
    position: fixed; inset: 0; background: rgba(10, 10, 40, .5);
    z-index: 40;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .side-backdrop.is-open {
    opacity: 1; visibility: visible;
    transition: opacity .3s ease, visibility 0s linear 0s;
  }

  .work { padding: 1.5rem 1.1rem 3rem; }
}

/* Een aparte, krappere grens dan de zijbalk: pas op een echt smal scherm
   (telefoon) hoeven de twee kolommen van een formulier onder elkaar. */
@media (max-width: 760px) {
  .layout-2col, .layout-2col--zijbalk-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Kleine kiezer voor onderdelen binnen een vrij-indelingsblok */
.picker--klein { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .4rem; }
.picker--klein button { flex-direction: row; gap: .3rem; padding: .5rem .4rem; font-size: .78rem; }
.grid--4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.grid--4 .field label { font-size: .72rem; }

/* Wel bereikbaar voor toetsenbord en schermlezer, niet zichtbaar.
   Een echte hidden-invoer is in sommige browsers niet aanklikbaar via het label. */
.visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Koppelen van een betaaldienst */
.koppel.is-gekoppeld { border-left: 3px solid var(--a-green); }
.koppel .panel__head .badge { margin-left: auto; }
.stappen {
  margin: 0 0 1.4rem;
  padding-left: 1.3rem;
  color: var(--a-soft);
  max-width: 72ch;
  line-height: 1.75;
}
.stappen li { margin-bottom: .3rem; }
.stappen code {
  background: var(--a-bg);
  padding: .1rem .35rem;
  border-radius: 5px;
  font-size: .88em;
}
.koppel__form { max-width: 640px; }
.koppel__acties { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }

/* ---------------------------------------------------------------- agenda */
.agenda-legenda { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--a-soft); flex-wrap: wrap; }
.agenda-legenda__stip { width: 9px; height: 9px; border-radius: 999px; display: inline-block; margin-left: .6rem; }
.agenda-legenda__stip:first-child { margin-left: 0; }
.agenda-legenda__stip--afspraak { background: var(--a-brand); }
.agenda-legenda__stip--factuur { background: var(--a-red); }
.agenda-legenda__stip--offerte { background: var(--a-amber); }

/* --------------------------------------------------- weekrooster (computer) */
.week__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.week__grid { border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-surface); overflow: hidden; }
.week__head, .week__allday { display: grid; grid-template-columns: 55px repeat(7, 1fr); }
.week__head { border-bottom: 1px solid var(--a-line); }
.week__allday { border-bottom: 1px solid var(--a-line); min-height: 30px; }
.week__gutter { padding: .5rem; font-size: .7rem; color: var(--a-muted); text-transform: uppercase; letter-spacing: .06em; }
.week__daycol { border-left: 1px solid var(--a-line); padding: .5rem .4rem; text-align: center; }
.week__head .week__daycol { display: flex; flex-direction: column; gap: .1rem; }
.week__dayname { font-size: .72rem; color: var(--a-muted); text-transform: uppercase; letter-spacing: .06em; }
.week__daynum { font-size: 1.1rem; }
.week__daycol.is-vandaag .week__daynum {
  background: var(--a-brand); color: #fff; border-radius: 999px;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto;
}
.week__allday .week__daycol { text-align: left; display: flex; flex-direction: column; gap: .2rem; padding: .3rem; }
.week__chip {
  display: block; font-size: .74rem; padding: .15rem .4rem; border-radius: 5px; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week__chip--afspraak { background: var(--a-brand); color: #fff; }
.week__chip--factuur { background: var(--a-red); color: #fff; }
.week__chip--offerte { background: var(--a-amber); color: #fff; }

.week__body { display: grid; grid-template-columns: 55px repeat(7, 1fr); position: relative; overflow-y: auto; max-height: 620px; }
.week__hours { position: relative; }
.week__hourlabel { position: absolute; right: .5rem; transform: translateY(-50%); font-size: .72rem; color: var(--a-muted); }
.week__daybody {
  position: relative; padding: 0;
  background-image: linear-gradient(to bottom, var(--a-line) 1px, transparent 1px);
  background-repeat: repeat-y;
}
.week__nu { position: absolute; left: 0; right: 0; height: 2px; background: var(--a-red); z-index: 3; }
.week__nu::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 999px; background: var(--a-red); }
.week__event {
  position: absolute; left: 3px; right: 3px; z-index: 2;
  border-radius: 6px; padding: .2rem .4rem; font-size: .74rem; line-height: 1.3;
  text-decoration: none; color: #fff; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.week__event--afspraak { background: var(--a-brand); }
.week__event--factuur { background: var(--a-red); }
.week__event--offerte { background: var(--a-amber); }

.agenda-mobile { display: none; }

@media (max-width: 900px) {
  .week { display: none; }
  .agenda-mobile { display: block; }
}

.month-strip { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 1rem; margin-bottom: 1.4rem; }
.month-strip__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.month-strip__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .7rem; color: var(--a-muted); text-transform: uppercase; margin-bottom: .3rem; }
.month-strip__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; }
.month-strip__day {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .4rem 0; border-radius: 8px; text-decoration: none; color: var(--a-ink); font-size: .88rem;
}
.month-strip__day.is-buiten { color: var(--a-muted); opacity: .5; }
.month-strip__day.is-vandaag span { background: var(--a-brand); color: #fff; border-radius: 999px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.month-strip__day.is-geselecteerd:not(.is-vandaag) span { border: 2px solid var(--a-brand); border-radius: 999px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.month-strip__dot { width: 5px; height: 5px; border-radius: 999px; background: var(--a-brand-2); }

.agenda-empty-hint { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: .9rem 1rem; margin-bottom: 1.4rem; color: var(--a-muted); font-size: .9rem; scroll-margin-top: 90px; }

.agenda-list__dag { margin-bottom: 1.4rem; scroll-margin-top: 90px; }
.agenda-list__datum { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--a-muted); margin: 0 0 .5rem; }
.agenda-list__item {
  display: flex; gap: 1rem; align-items: flex-start; padding: .7rem .9rem; border-radius: 10px;
  text-decoration: none; color: var(--a-ink); border-left: 3px solid transparent; background: var(--a-surface);
  border: 1px solid var(--a-line); border-left-width: 3px; margin-bottom: .5rem;
}
.agenda-list__item--afspraak { border-left-color: var(--a-brand); }
.agenda-list__item--factuur { border-left-color: var(--a-red); }
.agenda-list__item--offerte { border-left-color: var(--a-amber); }
.agenda-list__tijd { font-size: .78rem; color: var(--a-muted); min-width: 52px; }
.agenda-list__tekst { font-size: .9rem; line-height: 1.5; }

@media (max-width: 640px) {
  .month-strip__day span { font-size: .82rem; }
}