/* MAS Kerk - Planning : huisstijl De Voorhof
   Oranje van de Protestantse Kerk op wit, met het blauw van het dak en de
   stalen kolommen als tweede accent. De liturgische kleuren staan apart:
   die horen bij het kerkelijk jaar, niet bij de app. */

:root{
  --oranje:#F39200;
  --oranje-diep:#D97E00;
  --oranje-licht:#FEF3E4;
  --blauw:#3C5A8F;          /* dak en kolommen van De Voorhof */
  --blauw-diep:#2A4269;
  --blauw-licht:#EDF1F8;

  --ink:#2B2B2B;
  --gedempt:#6E6D6A;
  --lijn:#E4E2DE;
  --vlak:#FFFFFF;
  --papier:#F8F7F5;

  --rood:#B3261E;  --rood-vlak:#FCEDEC;
  --groen:#2E7D52; --groen-vlak:#EDF6F0;
  --paars:#6B3FA0;

  --schaduw:0 1px 2px rgba(43,43,43,.05), 0 8px 24px rgba(43,43,43,.06);
  --rond:12px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--papier); line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:400; letter-spacing:-.01em}
button{font-family:inherit; cursor:pointer}
a{color:var(--blauw)}
.hidden{display:none !important}
.stil{color:var(--gedempt)}
.leeg{padding:34px; text-align:center; color:var(--gedempt)}

/* ---------- merk ---------- */
.merk{display:flex; align-items:center; gap:12px}
.merk .logo{width:44px; height:44px; flex:0 0 auto}
.merk b{font-size:19px; font-weight:600; display:block; line-height:1.15}
.merk span{font-size:12px; color:var(--gedempt)}

/* ---------- knoppen ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent;
  background:var(--oranje); color:#fff; padding:10px 16px; border-radius:9px; font-weight:600; font-size:14px}
.btn:hover{background:var(--oranje-diep)}
.btn.blok{width:100%; margin-top:18px}
.btn.rand{background:#fff; color:var(--ink); border-color:var(--lijn)}
.btn.rand:hover{background:var(--oranje-licht); border-color:var(--oranje)}
.btn.blauw{background:var(--blauw)} .btn.blauw:hover{background:var(--blauw-diep)}
.btn.gevaar{background:#fff; color:var(--rood); border-color:#EBC9C6}
.btn.gevaar:hover{background:var(--rood-vlak)}
.btn.sm{padding:7px 11px; font-size:12.5px; border-radius:8px}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- formulier ---------- */
label{display:block; font-size:12.5px; font-weight:600; color:var(--gedempt); margin:14px 0 6px}
input,select,textarea{width:100%; padding:10px 12px; border:1px solid var(--lijn); border-radius:9px;
  font-size:14px; background:#fff; color:var(--ink); font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(243,146,0,.35); border-color:var(--oranje)}
.veld{display:flex; flex-direction:column}
.rij{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.fout{color:var(--rood); font-size:13px; margin-top:12px; min-height:18px}

/* ---------- inloggen ---------- */
#inlog{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1100px 460px at 50% -10%, rgba(243,146,0,.10), transparent 62%), var(--papier)}
.inlogkaart{width:100%; max-width:400px; background:var(--vlak); border:1px solid var(--lijn);
  border-radius:var(--rond); box-shadow:var(--schaduw); padding:32px 30px 26px}
.inlogkaart h1{font-size:20px; margin:18px 0 2px}
.inlogkaart p.sub{margin:0 0 16px; color:var(--gedempt); font-size:13.5px}
.hint{margin-top:18px; padding:11px 13px; background:var(--oranje-licht); border:1px solid #F6DFC0;
  border-radius:9px; font-size:12.5px; color:#7A4E06}
.hint b{color:var(--oranje-diep)}

/* ---------- schil: zijbalk links, werkvlak rechts ---------- */
.schil{display:grid; grid-template-columns:246px 1fr; min-height:100vh}
.zijbalk{background:var(--blauw-diep); color:#fff; padding:20px 14px; display:flex; flex-direction:column;
  gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto}
.zijbalk .merk{padding:4px 8px 18px}
.zijbalk .merk .logo{background:#fff; border-radius:10px; padding:5px; box-shadow:4px 4px 0 var(--oranje)}
.zijbalk .merk b{color:#fff; font-size:15px}
.zijbalk .merk span{color:rgba(255,255,255,.66)}
.menu{display:flex; flex-direction:column; gap:2px}
.menu a{display:flex; align-items:center; gap:11px; color:#DCE4F2; text-decoration:none; padding:10px 12px;
  border-radius:9px; font-size:14px; font-weight:500; cursor:pointer; user-select:none}
.menu a:hover{background:rgba(255,255,255,.10); color:#fff}
.menu a.actief{background:#fff; color:var(--blauw-diep); font-weight:700}
.menu a svg{width:18px; height:18px; flex:0 0 18px}
.menu a .telling{margin-left:auto; font-size:11.5px; font-weight:700; background:rgba(255,255,255,.16);
  padding:1px 8px; border-radius:999px}
.menu a.actief .telling{background:var(--oranje); color:#fff}
.menu .scheiding{margin:12px 8px 6px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.45); font-weight:700}
.rek{flex:1; min-height:14px}
.zijvoet{border-top:1px solid rgba(255,255,255,.15); padding-top:12px; display:flex; flex-direction:column; gap:8px;
  font-size:13px; color:rgba(255,255,255,.8)}
.zijvoet .naam{color:#fff; font-weight:600}
.zijvoet button{background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:8px; padding:8px 10px; font-size:12.5px; cursor:pointer; text-align:left}
.zijvoet button:hover{background:rgba(255,255,255,.2)}
.werkvlak{min-width:0}
main{max-width:1180px; margin:0 auto; padding:22px 22px 80px}

.mobielbalk{display:none; position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--lijn);
  align-items:center; gap:12px; padding:8px 12px}
.hamburger{border:1px solid var(--lijn); background:#fff; border-radius:9px; padding:7px 9px; color:var(--ink); display:flex}
.menusluier{display:none; position:fixed; inset:0; background:rgba(20,28,46,.45); z-index:44}

.kop{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:6px 0 16px; flex-wrap:wrap}
.kop h2{font-size:23px; margin:0}
.kop .uitleg{color:var(--gedempt); font-size:14px; margin-top:3px}
.werkbalk{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.kaart{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--rond); box-shadow:var(--schaduw)}
.pad{padding:16px 18px}
.raster2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:820px){.raster2{grid-template-columns:1fr}}

/* ---------- tabellen ---------- */
.scroll{overflow:auto; border-radius:var(--rond)}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:7px 9px; text-align:left; border-bottom:1px solid var(--lijn); white-space:nowrap; vertical-align:middle}
thead th{position:sticky; top:0; background:var(--blauw); color:#fff; font-weight:600; font-size:12px; z-index:1}
tbody tr:hover{background:#FBFAF8}
td.midden,th.midden{text-align:center}
.scroll table td:first-child{position:sticky; left:0; background:#fff; z-index:1}
.scroll table thead th:first-child{position:sticky; left:0; z-index:3}
.scroll tbody tr:hover td:first-child{background:#FBFAF8}
.scroll tr.botsrij td:first-child{background:#FDF4F3}
td.botsing{background:var(--rood-vlak) !important; box-shadow:inset 0 0 0 2px rgba(179,38,30,.45); border-radius:6px}
tr.botsrij{background:#FDF4F3}

select.cel{border:1px solid transparent; background:transparent; padding:5px 6px; border-radius:7px;
  font-size:12.5px; min-width:140px; max-width:220px; width:100%}
select.cel:hover{border-color:var(--lijn); background:#fff}
input.cel{border:1px solid transparent; background:transparent; padding:5px 6px; border-radius:7px; font-size:12.5px}
input.cel:hover{border-color:var(--lijn); background:#fff}
.wegknop{border:none; background:transparent; color:var(--gedempt); font-size:15px; line-height:1; padding:2px 6px; border-radius:6px}
.wegknop:hover{background:var(--rood-vlak); color:var(--rood)}

/* ---------- kleine onderdelen ---------- */
.speld{display:inline-flex; align-items:center; gap:7px; max-width:100%}
.vlek{width:11px; height:11px; border-radius:3px; flex:0 0 auto; border:1px solid rgba(0,0,0,.08)}
.pil{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700}
.melding{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:14px}
.melding.let{background:var(--rood-vlak); color:#7A1A14; border:1px solid #F1CFCC}
.melding.goed{background:var(--groen-vlak); color:#1E5638; border:1px solid #CFE7DA}
.melding.info{background:var(--oranje-licht); color:#7A4E06; border:1px solid #F6DFC0}
.voet{color:var(--gedempt); font-size:12px; margin-top:10px}
.maandkop{display:flex; align-items:center; gap:12px; margin:22px 0 10px}
.maandkop .bar{height:1px; background:var(--lijn); flex:1}
.geruild{display:inline-block; margin-left:5px; color:var(--oranje-diep); font-weight:700; cursor:help}

/* twee plekken in één vakje (Kosters, Bloemen) */
.stapel{display:flex; flex-direction:column; gap:3px; align-items:flex-start}
.stapel > *{width:100%}
.rolraster .rk .rv + .rv{margin-top:1px}

/* eigen dienst valt op in het rooster */
td.vanmij{box-shadow:inset 3px 0 0 var(--oranje)}
.ruilknop{border:1px solid var(--oranje); background:var(--oranje-licht); color:var(--oranje-diep);
  font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:7px; margin-left:6px}
.ruilknop:hover{background:var(--oranje); color:#fff}

/* ---------- komende dienst ---------- */
.komend{overflow:hidden}
.komend-kop{padding:20px 24px; background:linear-gradient(135deg,var(--blauw),#4E6FA8); color:#fff}
.bovenregel{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#D8E2F2; font-weight:700; margin-bottom:7px}
.datumregel{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.datumregel .dag{font-size:26px; text-transform:capitalize; line-height:1}
.datumregel .dd{font-size:18px; opacity:.92}
.datumregel .tt{font-size:14px; background:rgba(255,255,255,.18); padding:3px 11px; border-radius:999px}
.vg{margin-top:10px; font-size:14px; color:#EEF2F9}
.notitie{margin-top:9px; font-size:13px; background:rgba(255,255,255,.14); padding:6px 11px; border-radius:8px; display:inline-block}
.rolraster{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1px; background:var(--lijn)}
.rk{background:#fff; padding:11px 15px; display:flex; flex-direction:column; gap:3px}
.rk .rl{font-size:11px; font-weight:700; letter-spacing:.03em}
.rk .rv{font-size:14px}

/* ---------- podium ---------- */
.podium{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:end; max-width:700px; margin:8px auto 26px}
.trede{border-radius:12px 12px 0 0; color:#3A2F18; padding:16px 12px; text-align:center;
  border:1px solid rgba(0,0,0,.06); border-bottom:none}
.trede .nm{font-weight:700; font-size:15px; margin-bottom:4px}
.trede .ct{font-size:12.5px; opacity:.8}
.trede .medaille{font-size:29px; margin-bottom:6px}
.trede.goud{background:linear-gradient(180deg,#FBE28A,#F2C744); height:148px}
.trede.zilver{background:linear-gradient(180deg,#E6E7EA,#CBCED4); height:118px}
.trede.brons{background:linear-gradient(180deg,#E7BC93,#CE854F); height:98px}

/* ---------- matrix met bolletjes ---------- */
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.bol{cursor:pointer; font-size:16px; color:var(--lijn); user-select:none; display:inline-block; min-width:20px}
.bol.aan{color:var(--groen)}
.merkjes{display:flex; gap:6px; flex-wrap:wrap; max-width:560px}
.merkje{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  border:1px solid var(--lijn); background:#fff; padding:5px 9px; border-radius:8px; cursor:pointer}
.merkje input{width:auto}
.merkje.aan{border-color:var(--oranje); background:var(--oranje-licht)}

/* ---------- venster ---------- */
.overlay{position:fixed; inset:0; background:rgba(43,43,43,.42); display:grid; place-items:center; z-index:60; padding:20px}
.venster{background:#fff; border-radius:14px; box-shadow:var(--schaduw); padding:22px 22px 18px; width:100%; max-width:420px;
  max-height:88vh; overflow:auto}
.venster.breed{max-width:620px}
.venster h3{margin:0 0 4px; font-size:19px}
.venster .vsub{margin:0 0 10px; color:var(--gedempt); font-size:13px}
.vknoppen{display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap}
.keuzelijst{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.keuze{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  border:1px solid var(--lijn); background:#fff; border-radius:9px; padding:9px 12px; text-align:left; font-size:13.5px}
.keuze:hover{border-color:var(--oranje); background:var(--oranje-licht)}
.keuze .mee{font-size:12px; color:var(--gedempt); white-space:nowrap}
.keuze.waarschuw .mee{color:var(--rood)}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:10px; font-size:13px; box-shadow:var(--schaduw); opacity:0; transition:.25s;
  pointer-events:none; z-index:80; max-width:90vw; text-align:center}
.toast.zichtbaar{opacity:1; bottom:30px}

/* ---------- print ---------- */
#printvlak{display:none}
@media print{
  .zijbalk,.mobielbalk,.werkbalk,.wegknop,.hero,.menusluier{display:none}
  .schil{grid-template-columns:1fr}
  body{background:#fff}
  body.printen>*{display:none !important}
  body.printen #printvlak{display:block !important}
  #printvlak{font-family:Arial,Helvetica,sans-serif; color:#000}
  #printvlak h1{font-size:20px; margin:0 0 2px}
  #printvlak .pmeta{color:#555; font-size:11px; margin-bottom:14px}
  #printvlak h3{font-size:15px; margin:16px 0 6px}
  #printvlak table{border-collapse:collapse; width:100%; font-size:10px; margin-bottom:12px}
  #printvlak th{background:#3C5A8F; color:#fff; border:1px solid #999; padding:3px 5px; text-align:left}
  #printvlak td{border:1px solid #bbb; padding:2px 5px}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  @page{size:landscape; margin:10mm}
}

/* ---------- de drie blokken op het startscherm ---------- */
.blokken{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px}
@media(max-width:1080px){.blokken{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.blokken{grid-template-columns:1fr}}
.blok{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--rond); box-shadow:var(--schaduw);
  padding:14px 16px; display:flex; flex-direction:column}
.blok.mijn{border-left:4px solid var(--oranje)}
.blok.volgende{border-left:4px solid var(--blauw)}
.bloklabel{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gedempt)}
.blokgroot{font-size:20px; margin-top:6px; line-height:1.15}
.blokregel{font-size:13px; margin-top:3px}
.blokknoppen{display:flex; gap:8px; margin-top:auto; padding-top:12px; flex-wrap:wrap}
.blok .keuze{padding:7px 10px}

/* ---------- dienstkaarten die openklappen ---------- */
.dienstlijst{display:flex; flex-direction:column; gap:10px}
.dienstkaart{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--rond); box-shadow:var(--schaduw);
  overflow:hidden}
.dienstkaart.open{border-color:var(--oranje)}
.dienstkop{display:flex; align-items:center; gap:14px; width:100%; border:none; background:transparent;
  padding:12px 14px; text-align:left}
.dienstkop:hover{background:var(--oranje-licht)}
.dienstkaart.open .dienstkop{background:var(--oranje-licht); border-bottom:1px solid var(--lijn)}
.datumblok{flex:0 0 auto; width:52px; text-align:center; background:var(--blauw); color:#fff;
  border-radius:9px; padding:5px 2px; line-height:1.05}
.datumblok .dg{font-size:19px; font-weight:700; display:block}
.datumblok .mnd{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; opacity:.9}
.dienstkaart.verleden .datumblok{background:#B7B4AE}
.dienstinfo{flex:1; min-width:0}
.dienstinfo .t1{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.dienstinfo .t2{font-size:12.5px; color:var(--gedempt); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pijl{flex:0 0 auto; color:var(--gedempt); transition:transform .18s}
.dienstkaart.open .pijl{transform:rotate(90deg); color:var(--oranje-diep)}
.dienstlijf{padding:14px}
.takenraster{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.taakvak{border:1px solid var(--lijn); border-radius:10px; padding:9px 11px; background:#FCFBF9}
.taakvak.vanjou{border-color:var(--oranje); background:var(--oranje-licht)}
.taakvak.botsvak{border-color:#E9C4C1; background:var(--rood-vlak)}
.taakvak .tl{font-size:11px; font-weight:700; letter-spacing:.03em; display:block; margin-bottom:5px}
.taakvak .tp{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13.5px; min-height:26px}
.taakvak .tp + .tp{margin-top:4px; padding-top:4px; border-top:1px dashed var(--lijn)}
.dienstvelden{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:12px}
.dienstvelden label{margin-top:0}

/* ---------- mobiel ---------- */
@media(max-width:860px){
  .mobielbalk{display:flex}
  .schil{grid-template-columns:1fr}
  .zijbalk{position:fixed; top:0; left:0; z-index:45; width:min(84vw,300px); height:100vh;
    transform:translateX(-100%); transition:transform .26s ease; padding-bottom:24px}
  :root.menu-open .zijbalk{transform:translateX(0); box-shadow:var(--schaduw)}
  :root.menu-open .menusluier{display:block}
  main{padding:14px 12px 70px}
  .takenraster{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .kop h2{font-size:20px}
  .werkbalk{width:100%}
  select.cel,input.cel{min-height:38px; font-size:14px; max-width:190px}
  th,td{padding:9px 10px}
  .podium{gap:8px}
  .trede.goud{height:130px} .trede.zilver{height:104px} .trede.brons{height:88px}
  .inlogkaart{padding:26px 22px}
}
@media(max-width:480px){
  .takenraster{grid-template-columns:1fr}
  .mobielbalk .merk span{display:none}
}