/* =========================================================================
   TTV Irene — beheeromgeving (mockup)
   Uses the shared brand tokens, but a calmer, denser UI language than the
   public site: this is a tool, not a poster.
   ========================================================================= */

:root {
  --adm-bg:        #eef0f3;
  --adm-panel:     #ffffff;
  --adm-line:      #dfe3e8;
  --adm-line-soft: #eceef1;
  --adm-ink:       #12233a;
  --adm-ink-soft:  #5b6875;
  --adm-side:      #021B36;
  --adm-side-2:    #04223f;
  --adm-radius:    3px;
  --adm-shadow:    0 1px 2px rgba(2,27,54,.06), 0 6px 20px rgba(2,27,54,.05);
}

body.adm-body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--adm-ink);
  background: var(--adm-bg);
}

.adm-body h1, .adm-body h2, .adm-body h3, .adm-body h4 { font-weight: 700; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- login -- */

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--adm-side);
}
.login__art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 4rem);
  color: #fff;
  background: linear-gradient(to bottom, rgba(2,27,54,.78), rgba(2,27,54,.94)), var(--adm-side) url('../../assets/img/tt-07-1920.jpg') center/cover;
}
.login__brand { display: flex; align-items: center; gap: .9rem; }
.login__brand img { width: 54px; height: 54px; }
.login__brand strong { display: block; font-size: 1.15rem; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.login__brand span { display: block; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--grey-500); }
.login__pitch h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-style: italic;
  text-transform: uppercase;
  line-height: .98;
  margin: 0 0 1rem;
}
.login__pitch h1 em { color: var(--red-600); font-style: italic; }
.login__pitch p { max-width: 42ch; color: #cfd6de; margin: 0; }
.login__meta { font-size: .8rem; color: var(--grey-500); letter-spacing: .1em; text-transform: uppercase; }

.login__panel {
  background: var(--adm-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.login__form { width: min(24rem, 100%); }
.login__form h2 { font-size: 1.5rem; margin: 0 0 .25rem; }
.login__form > p { color: var(--adm-ink-soft); margin: 0 0 1.75rem; }

.login__hint {
  margin: 1.5rem 0 0;
  padding: .85rem 1rem;
  background: var(--grey-100);
  border-left: 4px solid var(--red);
  font-size: .85rem;
  color: var(--adm-ink-soft);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.login__hint code { font-weight: 700; color: var(--adm-ink); background: #fff; padding: .05em .35em; }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login__art { min-height: 15rem; }
  .login__pitch h1 { font-size: 2rem; }
}

/* --------------------------------------------------------------- layout -- */

.adm { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

.adm__side {
  background: var(--adm-side);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.adm__logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-decoration: none;
  color: #fff;
}
.adm__logo img { width: 38px; height: 38px; }
.adm__logo strong { display: block; font-size: .95rem; font-style: italic; text-transform: uppercase; }
.adm__logo span { display: block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-500); }

.adm__nav { flex: 1; padding: 1rem 0 2rem; }
.adm__navgroup { margin-bottom: 1.4rem; }
.adm__navtitle {
  padding: 0 1.25rem .5rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6f8099;
}
.adm__nav ul { list-style: none; margin: 0; padding: 0; }
.adm__nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem 1.25rem;
  color: #c6d0dc;
  text-decoration: none;
  font-size: .92rem;
  border-left: 3px solid transparent;
}
.adm__nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.adm__nav a.is-on { background: rgba(255,255,255,.09); color: #fff; font-weight: 600; border-left-color: var(--red-600); }
.adm__nav .ico { width: 1.05rem; text-align: center; opacity: .8; flex: 0 0 auto; }
.adm__nav .cnt {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  color: #93a3b5;
  background: rgba(255,255,255,.08);
  padding: 0 .4rem;
  min-width: 1.5rem;
  text-align: center;
}

.adm__sidefoot { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .78rem; color: #8c9bad; }
.adm__sidefoot a { color: #c6d0dc; }

.adm__main { min-width: 0; display: flex; flex-direction: column; }

.adm__top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--adm-line);
}
.adm__burger { display: none; }
.adm__crumb { font-size: .85rem; color: var(--adm-ink-soft); }
.adm__crumb b { color: var(--adm-ink); }
.adm__topright { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.adm__user { display: flex; align-items: center; gap: .55rem; font-size: .85rem; }
.adm__avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--blue-600); color: #fff;
  font-size: .78rem; font-weight: 700;
}

.adm__view { padding: 1.5rem; flex: 1; }
.adm__view > header { margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.adm__view > header h1 { margin: 0 0 .15rem; font-size: 1.6rem; }
.adm__view > header p { margin: 0; color: var(--adm-ink-soft); font-size: .9rem; }
.adm__actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .adm { grid-template-columns: 1fr; }
  .adm__side {
    position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s;
  }
  .adm.is-navopen .adm__side { transform: none; }
  .adm__burger { display: inline-flex; }
  .adm__scrim { position: fixed; inset: 0; background: rgba(2,27,54,.5); z-index: 50; }
}

/* ---------------------------------------------------------------- panel -- */

.panel {
  background: var(--adm-panel);
  border: 1px solid var(--adm-line);
  box-shadow: var(--adm-shadow);
  margin-bottom: 1.25rem;
}
.panel__head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--adm-line);
}
.panel__head h2 { margin: 0; font-size: 1rem; }
.panel__head .sub { font-size: .82rem; color: var(--adm-ink-soft); }
.panel__head .right { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.panel__body { padding: 1.1rem; }
.panel__body--flush { padding: 0; }

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--side { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--side { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- stat -- */

.stat { background: var(--adm-panel); border: 1px solid var(--adm-line); padding: 1rem 1.1rem; box-shadow: var(--adm-shadow); }
.stat__k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--adm-ink-soft); font-weight: 700; }
.stat__v { font-size: 2rem; font-weight: 900; font-style: italic; line-height: 1.1; margin: .2rem 0 0; }
.stat__m { font-size: .82rem; color: var(--adm-ink-soft); }
.stat--red { border-top: 3px solid var(--red); }
.stat--blue { border-top: 3px solid var(--blue-600); }
.stat--green { border-top: 3px solid #1d6b4f; }
.stat--amber { border-top: 3px solid #8a5a00; }

/* -------------------------------------------------------------- buttons -- */

.b {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: .88rem; font-weight: 600;
  padding: .5rem .95rem;
  border: 1px solid var(--adm-line);
  background: #fff; color: var(--adm-ink);
  cursor: pointer; text-decoration: none;
  border-radius: var(--adm-radius);
  white-space: nowrap;
}
.b:hover { background: var(--grey-100); border-color: #c8cfd7; }
.b:disabled { opacity: .5; cursor: not-allowed; }
.b--primary { background: var(--red); border-color: var(--red); color: #fff; }
.b--primary:hover { background: var(--red-700); border-color: var(--red-700); }
.b--blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.b--blue:hover { background: var(--blue-700); border-color: var(--blue-700); }
.b--danger { color: var(--red-700); border-color: #e7c3c3; background: #fdf6f6; }
.b--danger:hover { background: var(--red-700); border-color: var(--red-700); color: #fff; }
.b--sm { font-size: .8rem; padding: .3rem .6rem; }
.b--icon { padding: .35rem .5rem; }
.b--link { border-color: transparent; background: none; text-decoration: underline; padding: .3rem .2rem; }
.b--link:hover { background: none; color: var(--red-700); }

.btnrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.btnrow--end { justify-content: flex-end; }
.btnrow--split { justify-content: space-between; }

/* --------------------------------------------------------------- tables -- */

.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th {
  text-align: left;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--adm-ink-soft);
  padding: .65rem 1.1rem;
  border-bottom: 1px solid var(--adm-line);
  background: var(--grey-100);
  white-space: nowrap;
}
.tbl td { padding: .7rem 1.1rem; border-bottom: 1px solid var(--adm-line-soft); vertical-align: middle; }
.tbl tbody tr:hover { background: #fafbfc; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .nowrap { white-space: nowrap; }
.tbl .t-main { font-weight: 600; }
.tbl .t-sub { display: block; font-size: .8rem; color: var(--adm-ink-soft); font-weight: 400; }
.tbl .t-acts { text-align: right; white-space: nowrap; }
.tbl .t-acts .b { margin-left: .3rem; }
.tbl__empty { padding: 2.5rem 1.1rem; text-align: center; color: var(--adm-ink-soft); }
.tbl-wrap { overflow-x: auto; }

.drag-handle { cursor: grab; color: var(--grey-500); padding-right: .4rem; }
tr.is-dragging { opacity: .45; }

/* --------------------------------------------------------------- badges -- */

.pill {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .5rem;
  background: var(--grey-200); color: var(--adm-ink-soft);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.pill--pub { background: #e3f1ea; color: #14573e; }
.pill--draft { background: #fdf0d9; color: #7a5200; }
.pill--hidden { background: var(--grey-200); color: var(--adm-ink-soft); }
.pill--red { background: #fae5e5; color: var(--red-700); }
.pill--blue { background: #e4ebf4; color: var(--blue-600); }

.dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; vertical-align: baseline; }
.dot--training { background: var(--blue-600); }
.dot--competitie { background: var(--red); }
.dot--jeugd { background: #8a5a00; }
.dot--pickleball { background: #1d6b4f; }
.dot--recreatief { background: #5a5f66; }
.dot--toernooi { background: var(--red-700); }
.dot--vereniging { background: #4a2a86; }
.dot--nieuwsbrief { background: #0f6d84; }

/* ---------------------------------------------------------------- forms -- */

.fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.fld { grid-column: span 12; }
.fld--half { grid-column: span 6; }
.fld--third { grid-column: span 4; }
.fld--quarter { grid-column: span 3; }
@media (max-width: 760px) { .fld--half, .fld--third, .fld--quarter { grid-column: span 12; } }

.fld > label, .fld__label {
  display: block;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--adm-ink-soft);
  margin-bottom: .3rem;
}
.fld .req { color: var(--red); }
.fld__hint { font-size: .8rem; color: var(--adm-ink-soft); margin: .3rem 0 0; }
.fld__err { font-size: .8rem; color: var(--red-700); font-weight: 600; margin: .3rem 0 0; }

.inp, .sel, .ta {
  width: 100%;
  font: inherit; font-size: .92rem;
  padding: .5rem .65rem;
  border: 1px solid #c8cfd7;
  background: #fff;
  color: var(--adm-ink);
  border-radius: var(--adm-radius);
}
.ta { min-height: 6rem; resize: vertical; line-height: 1.5; }
.inp:focus, .sel:focus, .ta:focus, .ed__area:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(18,63,110,.15);
}
.inp[readonly] { background: var(--grey-100); color: var(--adm-ink-soft); }
.inp--code, .ta--code { font-family: 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace; font-size: .84rem; }

.check { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; }
.check input { margin: .25rem 0 0; }
.checks { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }

/* Herhaalbare regels, bijvoorbeeld de opstelling van een team */
.repeat__rows { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .35rem; }
.repeat__row { display: flex; align-items: center; gap: .5rem; }
.repeat__grip { color: var(--grey-500); font-size: .8rem; letter-spacing: -.15em; user-select: none; }
.repeat__row .inp { flex: 1; }

.swatch { display: flex; align-items: center; gap: .5rem; }
.swatch input[type="color"] { width: 2.6rem; height: 2.2rem; padding: 0; border: 1px solid #c8cfd7; background: #fff; }

.formfoot {
  position: sticky; bottom: 0;
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .85rem 1.1rem;
  background: #fff;
  border-top: 1px solid var(--adm-line);
}
.formfoot .spacer { margin-left: auto; }
.formfoot .saved { font-size: .82rem; color: var(--adm-ink-soft); }

/* --------------------------------------------------------------- filter -- */

.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filters .inp, .filters .sel { width: auto; min-width: 9rem; }
.filters .search { min-width: 14rem; }

/* --------------------------------------------------------------- editor -- */

.ed { border: 1px solid #c8cfd7; background: #fff; border-radius: var(--adm-radius); }
.ed__tabs { display: flex; gap: .25rem; padding: .4rem .4rem 0; border-bottom: 1px solid var(--adm-line); background: var(--grey-100); }
.ed__tab {
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .4rem .8rem;
  border: 1px solid transparent; border-bottom: 0;
  background: none; color: var(--adm-ink-soft); cursor: pointer;
}
.ed__tab.is-on { background: #fff; border-color: var(--adm-line); color: var(--adm-ink); }

.ed__bar {
  display: flex; flex-wrap: wrap; gap: .15rem;
  padding: .35rem;
  border-bottom: 1px solid var(--adm-line);
  background: #fbfcfd;
}
.ed__bar .sep { width: 1px; background: var(--adm-line); margin: .2rem .35rem; }
.ed__btn {
  font: inherit; font-size: .82rem;
  min-width: 1.9rem; height: 1.9rem;
  padding: 0 .45rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: none; color: var(--adm-ink);
  cursor: pointer; border-radius: 2px;
}
.ed__btn:hover { background: var(--grey-200); }
.ed__btn.is-on { background: var(--blue); color: #fff; }
.ed__btn b { font-weight: 900; }
.ed__btn i { font-style: italic; font-family: Georgia, serif; }
.ed__sel { font: inherit; font-size: .82rem; height: 1.9rem; border: 1px solid var(--adm-line); background: #fff; }

.ed__area {
  padding: 1.1rem 1.2rem;
  min-height: 24rem;
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.6;
}
.ed__area:focus { box-shadow: none; }
.ed__area > *:first-child { margin-top: 0; }
.ed__area h2 { font-size: 1.35rem; font-style: italic; text-transform: uppercase; margin: 1.4rem 0 .5rem; }
.ed__area h3 { font-size: 1.1rem; margin: 1.2rem 0 .4rem; }
.ed__area h4 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin: 1rem 0 .3rem; }
.ed__area p { margin: 0 0 .9rem; }
.ed__area ul, .ed__area ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.ed__area blockquote {
  margin: 0 0 .9rem; padding: .6rem 1rem;
  border-left: 4px solid var(--red); background: var(--grey-100); font-style: italic;
}
.ed__area a { color: var(--blue-600); }
.ed__area img { max-width: 100%; margin: .5rem 0; }
.ed__area table { border-collapse: collapse; width: 100%; margin: 0 0 .9rem; font-size: .9rem; }
.ed__area th, .ed__area td { border: 1px solid var(--adm-line); padding: .4rem .6rem; text-align: left; }
.ed__area th { background: var(--grey-100); }
.ed__area .callout { padding: .9rem 1.1rem; background: #e4ebf4; border-left: 4px solid var(--blue-600); margin: 0 0 .9rem; }
.ed__area hr { border: 0; border-top: 2px solid var(--adm-line); margin: 1.2rem 0; }
.ed__area:empty::before { content: attr(data-placeholder); color: var(--grey-500); }

.ed__code {
  width: 100%; min-height: 26rem; max-height: 60vh;
  padding: 1rem 1.1rem;
  border: 0; resize: vertical;
  font-family: 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;
  font-size: .84rem; line-height: 1.6;
  tab-size: 2;
  color: #16324f; background: #fcfdfe;
}
.ed__code:focus { outline: none; }
.ed__foot {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  padding: .45rem .8rem;
  border-top: 1px solid var(--adm-line);
  background: var(--grey-100);
  font-size: .78rem; color: var(--adm-ink-soft);
}

/* ---------------------------------------------------------------- media -- */

.media { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .9rem; }
.media__item { border: 1px solid var(--adm-line); background: #fff; }
.media__item.is-sel { border-color: var(--red); box-shadow: 0 0 0 2px rgba(177,8,11,.2); }
.media__thumb { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--grey-200); }
.media__meta { padding: .5rem .6rem; font-size: .78rem; }
.media__meta b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media__meta span { color: var(--adm-ink-soft); }

.drop {
  border: 2px dashed #c1cad4;
  background: #fbfcfd;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--adm-ink-soft);
}
.drop.is-over { border-color: var(--red); background: #fdf6f6; color: var(--adm-ink); }
.drop b { display: block; color: var(--adm-ink); font-size: 1rem; }

/* ----------------------------------------------------------------- tree -- */

.tree { list-style: none; margin: 0; padding: 0; }
.tree ul { list-style: none; margin: 0; padding: 0 0 0 1.75rem; }
.tree li { margin: 0; }
.tree__row {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem;
  border: 1px solid var(--adm-line);
  background: #fff;
  margin-bottom: .35rem;
}
.tree__row .lbl { font-weight: 600; font-size: .92rem; }
.tree__row .url { font-size: .8rem; color: var(--adm-ink-soft); }
.tree__row .acts { margin-left: auto; display: flex; gap: .3rem; }
.tree > li > .tree__row { border-left: 3px solid var(--blue); }
.tree ul .tree__row { border-left: 3px solid var(--grey-300); }

/* ---------------------------------------------------------------- modal -- */

.modal-scrim { position: fixed; inset: 0; background: rgba(2,27,54,.55); z-index: 100; display: grid; place-items: center; padding: 1.5rem; }
.modal {
  width: min(44rem, 100%);
  max-height: 88vh; overflow-y: auto;
  background: #fff;
  box-shadow: 0 24px 60px rgba(2,27,54,.3);
}
.modal--sm { width: min(28rem, 100%); }
.modal--lg { width: min(62rem, 100%); }
.modal__head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--adm-line); }
.modal__head h2 { margin: 0; font-size: 1.1rem; }
.modal__head .x { margin-left: auto; }
.modal__body { padding: 1.2rem; }
.modal__foot { display: flex; gap: .5rem; justify-content: flex-end; padding: .9rem 1.2rem; border-top: 1px solid var(--adm-line); background: var(--grey-100); position: sticky; bottom: 0; }
body.modal-open { overflow: hidden; }

/* --------------------------------------------------------------- toasts -- */

.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem;
  background: var(--blue); color: #fff;
  font-size: .88rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(2,27,54,.3);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  animation: toast-in .18s ease-out;
}
.toast--ok { background: #14573e; }
.toast--err { background: var(--red-700); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ----------------------------------------------------------------- misc -- */

.muted { color: var(--adm-ink-soft); }
.small { font-size: .85rem; }
.mono { font-family: 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace; font-size: .85em; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.stack > * + * { margin-top: .9rem; }
.note {
  padding: .8rem 1rem;
  background: #e4ebf4;
  border-left: 4px solid var(--blue-600);
  font-size: .88rem;
}
.note--warn { background: #fdf0d9; border-left-color: #8a5a00; }
.timeline { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.timeline li { display: flex; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--adm-line-soft); }
.timeline li:last-child { border-bottom: 0; }
.timeline time { color: var(--adm-ink-soft); white-space: nowrap; font-size: .82rem; min-width: 5.5rem; }

.mockup-note {
  margin: 0;
  padding: .5rem 1.5rem;
  background: var(--blue-900);
  color: #aebbcb;
  font-size: .76rem;
  letter-spacing: .04em;
  text-align: center;
}
.mockup-note b { color: #fff; }

/* ==========================================================================
   Toegevoegd in fase 6 — niet uit de mockup.
   Op een telefoon (400 px) paste de bovenbalk van de mockup niet: "Bekijk
   site", de naam en "Uitloggen" duwden de pagina 50-140 px te breed. Onder
   600 px blijven alleen menuknop, kruimelpad, het blokje met de initialen en
   "Uitloggen" over. En een kolom van .grid mag smaller worden dan zijn
   inhoud (min-width: 0), zodat een brede tabel in zijn eigen .tbl-wrap
   scrolt in plaats van de hele pagina te verbreden. Verder niets gewijzigd;
   nieuwe opmaak gaat eerst langs het bestuur.
   ========================================================================== */
.grid > * { min-width: 0; }
@media (max-width: 600px) {
  .adm__top { padding: .6rem 1rem; gap: .6rem; }
  .adm__topright { gap: .4rem; }
  .adm__topright > a.b { display: none; }
  .adm__user .small { display: none; }
  .adm__view { padding: 1rem; }
}

/* Ook toegevoegd in fase 6 (herstelronde 2), na de toegankelijkheidscontrole:
   - de menuknop hoort alleen onder 1000 px; .b (later in dit bestand, even
     specifiek) zette hem op desktop weer aan. "not all and (max-width)" in
     plaats van min-width: 1001px, zodat er bij fractionele breedtes geen gat
     valt;
   - de groepstitels in het zijmenu haalden 4,3:1 (mockup #6f8099); #7d8ea6
     haalt 5,2:1 op #021b36 (WCAG AA). Kleurafwijking van de mockup: ter
     goedkeuring aan het bestuur, terugdraaien = deze ene regel weghalen;
   - .adm-sr: tekst alleen voor schermlezers (lege kolomkoppen, "Acties").
     Met left/top 0: zonder die twee blijft het blokje op zijn plek rechts in
     een brede tabel staan, buiten de .tbl-wrap, en maakt het de pagina op
     een telefoon breder. */
@media not all and (max-width: 1000px) {
  .adm__burger { display: none; }
}
.adm__navtitle { color: #7d8ea6; }
.adm-sr {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Toegevoegd na fase 6 — media: categorieën, uploadlijst en afbeeldingkiezer.
   Niet uit de mockup; hergebruikt zoveel mogelijk .media, .inp en .b.
   - .media__cat: de categorie onder de naam in de bibliotheek;
   - .upq: de lijst gekozen bestanden vóór het uploaden (voorbeeld, naam,
     categorie, weghalen), met een melding per regel;
   - .mk: de afbeeldingkiezer (filter + raster) in een venster, en .imgkeus:
     het afbeeldingveld in de formulieren (voorbeeld, naam, knoppen).
   ========================================================================== */
.media__cat { display: block; margin-top: .15rem; font-size: .72rem; letter-spacing: .02em; }

.upq { margin-top: 1rem; border: 1px solid var(--adm-line); background: #fff; }
.upq__head { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--adm-line); background: var(--grey-100); }
.upq__head .fld { margin: 0; min-width: 12rem; flex: 1; }
.upq__head .btnrow { margin-left: auto; }
.upq__rows { list-style: none; margin: 0; padding: 0; }
.upq__row { display: grid; grid-template-columns: 5.5rem 1fr 1fr auto; gap: .5rem .9rem; align-items: start; padding: .7rem 1rem; border-top: 1px solid var(--adm-line); }
.upq__row:first-child { border-top: 0; }
.upq__row img { width: 5.5rem; aspect-ratio: 4/3; object-fit: cover; background: var(--grey-200); }
.upq__row label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--adm-ink-soft); margin-bottom: .2rem; }
.upq__row .small { display: block; margin-top: .25rem; color: var(--adm-ink-soft); overflow-wrap: anywhere; }
.upq__row .upq__fout { color: var(--red-700); font-weight: 600; }
.upq__row.is-fout { background: #fdf6f6; }
.upq__row.is-bezig { opacity: .6; }
@media (max-width: 700px) {
  .upq__row { grid-template-columns: 4.5rem 1fr auto; }
  .upq__row img { width: 4.5rem; }
  .upq__row .upq__cat { grid-column: 2 / 3; }
}

.mk__filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.mk__filters .inp { flex: 1; min-width: 12rem; }
.mk__filters .sel { width: auto; }
.mk .media__item { text-align: left; cursor: pointer; font: inherit; padding: 0; display: block; width: 100%; }
.mk .media__item:hover, .mk .media__item:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(2,27,54,.15); outline: none; }
.mk__leeg { color: var(--adm-ink-soft); margin: 1rem 0 0; }

.imgkeus { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.imgkeus__voorbeeld { width: 96px; height: 72px; object-fit: cover; background: var(--grey-200); border: 1px solid var(--adm-line); cursor: pointer; }
.imgkeus__leeg { width: 96px; height: 72px; display: grid; place-items: center; background: var(--grey-100); border: 1px dashed #c1cad4; color: var(--adm-ink-soft); font-size: .72rem; text-align: center; }
.imgkeus__naam { min-width: 8rem; font-size: .85rem; }
.imgkeus__naam b { display: block; }
.imgkeus__naam span { color: var(--adm-ink-soft); font-size: .78rem; }
@media (max-width: 600px) {
  .mk .media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

/* Toegevoegd na fase 6 — sorteerbare kolomkoppen (<x-beheer.kolomkop>):
   de kop blijft er hetzelfde uitzien, met een klein pijltje erachter. */
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.th-sort:hover, .th-sort:focus-visible { color: var(--adm-ink); text-decoration: underline; }
.th-sort__pijl { font-size: .7em; opacity: .45; }
.th-sort.is-actief { color: var(--adm-ink); }
.th-sort.is-actief .th-sort__pijl { opacity: 1; color: var(--red); }

/* Een knop met het kenmerk hidden hoort weg te zijn; .b zet display en won. */
.b[hidden] { display: none; }

/* Toegevoegd na fase 6 — Site → Formulieren: het voorbeeld van de rijen en
   de verborgen velden in de lijst. */
.inp--kort { width: 4.5rem; }
.indeling__pijlen { display: inline-flex; gap: .25rem; }
[data-velden] tr.is-verborgen td { color: var(--adm-ink-soft); }
[data-velden] tr.is-verborgen .t-main { text-decoration: line-through; }
.indeling__voorbeeld { display: flex; flex-direction: column; gap: .5rem; }
.indeling__erbij { padding: .75rem 1.1rem; border-top: 1px solid var(--adm-line); }
.indeling__erbij[hidden] { display: none; }
.indeling__rij { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; }
.indeling__rij span { display: block; padding: .55rem .7rem; background: var(--grey-100); border: 1px solid var(--adm-line); font-size: .85rem; font-weight: 600; }
.indeling__rij--vast span { background: transparent; border-style: dashed; color: var(--adm-ink-soft); font-weight: 400; }

/* Toegevoegd na fase 6 — Inhoud → Blokken: de codevelden en de lijst met
   beschikbare gegevens. */
.ta--code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .85rem; line-height: 1.5; tab-size: 2; white-space: pre; overflow-x: auto; }
.blokgegevens { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.blokgegevens .blokgegevens { margin: .35rem 0 .2rem .9rem; padding-left: .8rem; border-left: 2px solid var(--adm-line); }
.blokgegevens li { margin: .3rem 0; }
.blokgegevens code { background: var(--grey-100); padding: .05rem .3rem; font-size: .8rem; }

/* Toegevoegd na fase 6 — een filter met vinkjes (<x-beheer.filter>,
   Filter::vinkjes()): ziet eruit als de keuzelijsten ernaast en klapt een
   lijstje met vinkjes uit. Ter goedkeuring. */
.vinkfilter { position: relative; }
.vinkfilter > summary { list-style: none; cursor: pointer; width: auto; min-width: 9rem; padding-right: 2rem; white-space: nowrap; position: relative; user-select: none; }
.vinkfilter > summary::-webkit-details-marker { display: none; }
.vinkfilter > summary::after { content: '▾'; position: absolute; right: .65rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--adm-ink-soft); }
.vinkfilter > summary:focus-visible { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(18,63,110,.15); }
.vinkfilter__lijst { position: absolute; top: calc(100% + .25rem); left: 0; z-index: 30; display: grid; gap: .5rem; min-width: 100%; padding: .7rem .8rem; background: #fff; border: 1px solid #c8cfd7; box-shadow: var(--adm-shadow); white-space: nowrap; }

/* Toegevoegd na fase 6 — Mijn account → Tweestapsverificatie: de stappen,
   de QR-code (wit, met ruimte eromheen, zodat elke camera hem leest) en de
   herstelcodes. Ter goedkeuring. */
.tweestap-stappen { margin: 0; padding-left: 1.3rem; display: grid; gap: 1.1rem; max-width: 46rem; }
.tweestap-qr { margin: .75rem 0 .25rem; width: 200px; height: 200px; background: #fff; padding: 8px; border: 1px solid var(--adm-line); box-sizing: content-box; }
.tweestap-qr svg { display: block; width: 200px; height: 200px; }
.tweestap-sleutel { font-size: .95rem; letter-spacing: .05em; word-break: break-all; }
.herstelcodes { display: grid; grid-template-columns: repeat(2, max-content); gap: .35rem 2.5rem; margin: 0; padding: 0; list-style-position: inside; }
@media (max-width: 420px) { .herstelcodes { grid-template-columns: max-content; } }
.herstelcodes code { font-size: 1rem; letter-spacing: .04em; }
@media print {
  .adm__side, .adm__top, .toasts, .formfoot { display: none !important; }
}

/* Toegevoegd na fase 6 — het focuspunt van een afbeelding (Media → Bewerken,
   beheer-media.js): de foto met een kruisje, en twee voorvertoningen van de
   hero (computer, telefoon). Ter goedkeuring. */
.focuspunt { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.focuspunt__foto { position: relative; display: inline-block; cursor: crosshair; line-height: 0; border: 1px solid var(--adm-line); }
.focuspunt__foto:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.focuspunt__foto img { display: block; max-width: 100%; max-height: 16rem; width: auto; }
.focuspunt__kruis { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--red), 0 0 6px rgba(0,0,0,.6); pointer-events: none; }
.focuspunt__kruis::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--red); border-radius: 50%; }
.focuspunt__kruis.is-standaard { opacity: .55; box-shadow: 0 0 0 2px var(--adm-ink-soft), 0 0 6px rgba(0,0,0,.5); }
.focuspunt__voorbeelden { display: flex; gap: .75rem; align-items: flex-end; }
.focuspunt__voorbeelden figure { margin: 0; }
.focuspunt__voorbeelden figcaption { font-size: .75rem; color: var(--adm-ink-soft); margin-top: .3rem; }
.focuspunt__vb { background-size: cover; background-color: #021B36; border: 1px solid var(--adm-line); }
.focuspunt__vb--breed { width: 15rem; aspect-ratio: 12 / 5; }
.focuspunt__vb--smal { width: 5.5rem; aspect-ratio: 9 / 16; }

/* ==========================================================================
   Toegevoegd voor de bardiensten (oktober 2026) — niet uit de mockup,
   ter goedkeuring. De balk met de dekking van een activiteit: groen =
   iemand ingepland (lichter = de vaste barvrijwilliger), gestreept rood =
   nog open.
   ========================================================================== */
.bardiensten__dag th, .tbl__groep th { background: #eef2f7; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.bardienst-balk { position: relative; height: 1.6rem; background: #f3f5f8; border: 1px solid var(--adm-line); min-width: 8rem; overflow: hidden; }
.bardienst-balk__stuk { position: absolute; top: 0; bottom: 0; background: #1d6b4f; color: #fff; font-size: .72rem; line-height: 1.6rem; padding: 0 .35rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: inset -2px 0 0 #fff; }
.bardienst-balk__stuk--vast { background: #5f9c84; }
/* Onzeker (nog niet gevraagd of bevestigd): de kleuren van Excel "Neutraal"
   (lichtgele achtergrond, donkergele tekst) in de balk, als chip achter een
   naam en als statuslabel. Goed leesbaar, maar duidelijk anders dan groen. */
.bardienst-balk__stuk--onzeker { background: #FFEB9C; color: #9C5700; font-weight: 700; box-shadow: inset -2px 0 0 #fff; }
.chip-onzeker { display: inline-block; background: #FFEB9C; color: #9C5700; font-weight: 700; font-size: .72rem; line-height: 1.4; padding: 0 .4em; border-radius: 3px; margin-left: .3em; vertical-align: 1px; }
.pill--onzeker { background: #FFEB9C; color: #9C5700; }
.bardienst-onzeker { display: inline-flex; gap: .35rem; align-items: center; margin-top: .4rem; font-size: .82rem; }
.bardienst-balk__stuk--gat { background: repeating-linear-gradient(45deg, #f6d9d9, #f6d9d9 6px, #fbeaea 6px, #fbeaea 12px); color: #8c0609; font-weight: 700; }
.bardienst-act + .bardienst-act { margin-top: .5rem; }
.bardienst-act__link { font-weight: 700; }
.bardienst-wie { font-size: .8rem; color: var(--adm-ink-soft); margin: .3rem 0 0; }
.bardienst-wie__afwezig { color: #8c0609; font-weight: 700; }
.bardienst-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem 1.1rem; border-top: 1px solid var(--adm-line); }
.bardienst-knoppen[hidden] { display: none; }
.bardienst-overname { display: inline-flex; gap: .4rem; align-items: center; margin-left: auto; font-size: .85rem; }
.bardienst-overname .inp { width: 5.5rem; }
/* De naamkiezer (beheer.js): een eigen keuzelijst onder een invoerveld. */
.naamkiezer__lijst { position: fixed; z-index: 60; min-width: 12rem; max-height: 16rem; overflow-y: auto; background: var(--adm-panel, #fff); border: 1px solid var(--adm-line); box-shadow: 0 8px 24px rgba(2, 27, 54, .14); }
.naamkiezer__lijst[hidden] { display: none; }
.naamkiezer__optie { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; cursor: pointer; font-size: .92rem; }
.naamkiezer__naam b { font-weight: 800; }
.naamkiezer__optie.is-actief, .naamkiezer__optie:hover { background: #eef2f7; }
/* Niet beschikbaar: lichtgrijs, ook als het de huidige keuze is (dan geen vet en geen vinkje). */
.naamkiezer__optie.is-grijs, .naamkiezer__optie.is-grijs .naamkiezer__noot { color: #a3adba; }
.naamkiezer__optie.is-gekozen:not(.is-grijs) .naamkiezer__naam { font-weight: 800; }
.naamkiezer__optie.is-gekozen:not(.is-grijs) .naamkiezer__naam::after { content: " ✓"; color: #1d6b4f; }
.naamkiezer__optie.is-grijs .naamkiezer__naam b { font-weight: 400; }
.naamkiezer__optie.is-uit { cursor: not-allowed; }
.naamkiezer__optie.is-uit:hover { background: transparent; }
.naamkiezer__noot { font-size: .75rem; color: #8c0609; white-space: nowrap; }
.naamkiezer__nieuw { border-top: 1px solid var(--adm-line); font-style: italic; color: var(--adm-ink-soft); }

/* Bardiensten op een telefoon en een iPad staand (tot 900 px): geen tabel om opzij te schuiven, maar per
   activiteit een kaartje (tijd, status en Invullen bovenaan; de activiteit
   en de balk over de volle breedte), en in het invulscherm per regel de naam
   over de volle breedte met Van, Tot en ✕ eronder. Op de plaats van de
   kolommen (nth-child), niet op klassen in de HTML: zo werkt het ook als de
   schermen op de server nog uit een eerdere versie komen. */
@media (max-width: 900px) {
  .tbl.bardiensten, .tbl.bardiensten tbody, #bardienst .tbl, #bardienst .tbl tbody { display: block; width: 100%; }
  .tbl.bardiensten tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--adm-line); }
  .tbl.bardiensten tr.bardiensten__dag { display: block; padding: 0; }
  .tbl.bardiensten tr.bardiensten__dag th { display: block; }
  .tbl.bardiensten td { display: block; padding: 0; border: 0; width: auto !important; min-width: 0 !important; }
  .tbl.bardiensten td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tbl.bardiensten td:nth-child(4) { grid-column: 2; grid-row: 1; display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
  .tbl.bardiensten td:nth-child(2), .tbl.bardiensten td:nth-child(3), .tbl.bardiensten td.tbl__empty { grid-column: 1 / -1; }
  .bardienst-balk { min-width: 0; }

  #bardienst .tbl thead { display: none; }
  #bardienst .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--adm-line); }
  #bardienst .tbl td { display: block; padding: 0; border: 0; width: auto !important; }
  #bardienst .tbl td:nth-child(1) { grid-column: 1 / -1; }
  #bardienst .tbl td:nth-child(4) { align-self: end; }
  #bardienst .tbl td:nth-child(2)::before, #bardienst .tbl td:nth-child(3)::before { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--adm-ink-soft); font-weight: 700; margin-bottom: .25rem; }
  #bardienst .tbl td:nth-child(2)::before { content: "Van"; }
  #bardienst .tbl td:nth-child(3)::before { content: "Tot"; }
  .bardienst-overname { margin-left: 0; flex-wrap: wrap; }
}

/* Nieuw wachtwoord (beheer-wachtwoord.js): de eis, een sterktemeter en of de
   herhaling gelijk is. Toegevoegd oktober 2026, ter goedkeuring. */
.ww { margin-top: .45rem; }
.ww__meter { height: .4rem; background: #e6eaf0; border-radius: 2px; overflow: hidden; }
.ww__balk { display: block; height: 100%; width: 0; background: #b1080b; transition: width .2s, background-color .2s; }
.ww--redelijk .ww__balk { background: #c98a00; }
.ww--sterk .ww__balk { background: #4f9a5f; }
.ww--zeersterk .ww__balk { background: #1d6b4f; }
.ww__oordeel { margin: .3rem 0 0; font-size: .8rem; font-weight: 700; color: var(--adm-ink-soft); }
.ww--kort .ww__oordeel, .ww--zwak .ww__oordeel { color: #8c0609; }
.ww--redelijk .ww__oordeel { color: #8a5a00; }
.ww--sterk .ww__oordeel, .ww--zeersterk .ww__oordeel { color: #1d6b4f; }
.ww__eis, .ww__gelijk { margin: .25rem 0 0; font-size: .8rem; color: var(--adm-ink-soft); }
.ww__eis.is-goed, .ww__gelijk.is-goed { color: #1d6b4f; }
.ww__eis.is-fout, .ww__gelijk.is-fout { color: #8c0609; font-weight: 700; }
.ww__tip { margin: .25rem 0 0; font-size: .78rem; color: var(--adm-ink-soft); }
button[type=submit]:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   Toegevoegd oktober 2026 — nergens horizontaal scrollen op een iPad
   (staand 656–834 px, liggend 944–1366 px). Niet uit de mockup, ter
   goedkeuring. Tabellen passen in hun paneel: de knoppen bij "Acties", de
   kolomkoppen en lange codes mogen over meer regels; smallere cellen.
   Gecontroleerd met tools/browser/ipad-breedte-check.mjs.
   ========================================================================== */
@media (max-width: 1400px) {
  .tbl th { white-space: normal; }
  .tbl td { overflow-wrap: anywhere; }
  .tbl .t-acts { white-space: normal; }
  .tbl code { white-space: normal; overflow-wrap: anywhere; }
  .tbl .pill { white-space: nowrap; overflow-wrap: normal; }
  .tbl .t-acts .b { margin: .15rem 0 .15rem .3rem; }
  .tbl th, .tbl td { padding-left: .75rem; padding-right: .75rem; }
}
@media (max-width: 900px) {
  .tbl { font-size: .85rem; }
  .tbl th, .tbl td { padding-left: .5rem; padding-right: .5rem; }
  .tbl .nowrap { white-space: normal; }
}
@media (max-width: 700px) {
  .tbl { font-size: .82rem; }
  .tbl th, .tbl td { padding-left: .4rem; padding-right: .4rem; }
  .tbl th { letter-spacing: .06em; }
}

/* ==========================================================================
   Toegevoegd oktober 2026 — nieuwe inzendingen vallen op (keuze bestuur:
   "duidelijker dat er een nieuwe inzending is"). Niet uit de mockup, ter
   goedkeuring. De telling in het zijmenu wordt rood zodra er iets nieuw is,
   de bovenbalk krijgt op elke pagina een rode knop naar de inzendingen (ook
   op een telefoon, dan zonder tekst), en in de lijst staan nieuwe vet.
   ========================================================================== */
.adm__nav .cnt--nieuw { background: var(--red); color: #fff; }
.adm-nieuw { white-space: nowrap; }
@media (max-width: 600px) {
  .adm__topright > a.adm-nieuw { display: inline-flex; }
  .adm-nieuw__tekst { display: none; }
}
.tbl tr.is-nieuw td { font-weight: 700; }