/* Agenda (025 Stijlboek, 8.11 Agenda and 8.12 Tijdsloten). The grid has a
   row per quarter of an hour (12px, so an hour is 48px). Positions come from
   classes (gr-N: first row, gs-N: number of rows, agr-N: rows of a column),
   because the Content-Security-Policy does not allow inline styles. */
.agenda-card { overflow: hidden; }
.agenda-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; justify-content: space-between; }
.agenda-nav { display: flex; align-items: center; gap: 6px; }
.agenda-nav h2 { margin-left: 6px; }
.agenda-nav .btn { padding: 3px 10px; }
.agenda-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-filters .in { width: auto; }
.agenda { overflow-x: auto; }
.ag-heads, .ag-body { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); grid-template-columns: 48px; min-width: max-content; }
/* Room above the first hour, so its label (aligned on its line) is not cut off. */
.ag-body { padding-top: 8px; }
.ag-heads { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); }
.ag-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-left: 1px solid var(--line-2); min-width: 0; }
.ag-head span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ag-head small { color: var(--fg-2); font-size: 11px; }
.ag-head .initials { width: 22px; height: 22px; font-size: 10px; flex: none; }
.ag-times, .ag-col { display: grid; grid-template-columns: minmax(0, 1fr); }
.ag-times span { font-size: 10.5px; color: var(--fg-2); text-align: right; padding-right: 6px; transform: translateY(-6px); }
.ag-col { position: relative; border-left: 1px solid var(--line-2); }
.ag-cell { grid-column: 1; border-top: 1px solid transparent; }
.ag-cell:nth-child(4n+1) { border-top-color: var(--line); }
.ag-cell:not(:nth-child(4n+1)) { border-top-color: var(--line-2); border-top-style: dotted; }
.ag-cell.ok { background: var(--accent-soft); }
.ag-off { grid-column: 1; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-2) 6px 7px); color: var(--fg-3); font-size: 10.5px; padding: 2px 6px; overflow: hidden; z-index: 0; }
.ag-item { grid-column: 1; position: relative; z-index: 1; margin: 1px 3px; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-s);
  border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--fg); padding: 2px 6px; font-size: 11px; line-height: 1.3; }
.ag-item:hover { text-decoration: none; filter: brightness(.97); }
.ag-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-item small { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-item.intake { border-left-color: var(--ok); background: var(--ok-soft); }
.ag-item.st-done, .ag-item.st-no_show { opacity: .7; }
.ag-item.st-no_show { border-left-color: var(--bad); }
.ag-item.st-in_progress { border-left-color: var(--warn); }
.ag-item.draggable { cursor: grab; }
.ag-item.dragging { opacity: .8; }
.ag-item .ag-note { color: var(--warn); }
/* Preparation and closing time lie over the block (they never push the
   text); the text starts below the preparation (pt-N). */
.ag-prep, .ag-after { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.6) 4px 6px); pointer-events: none; }
.ag-prep { top: 0; }
.ag-after { bottom: 0; }
.slots + .slots { margin-top: 6px; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-s); color: var(--fg); }
.slot:hover, .slot:focus-visible { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.slot .initials { width: 18px; height: 18px; font-size: 9px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th, .grid-table td { padding: 4px 6px; text-align: left; vertical-align: top; }
.grid-table th { font-weight: 600; color: var(--fg-2); font-size: 11px; }
.grid-table td .in { width: 100%; }
.filters { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.filters .in { width: auto; }

/* Generated: grid positions. */
.gr-1{grid-row-start:1}
.gs-1{grid-row-end:span 1}
.agr-1{grid-template-rows:repeat(1,12px)}
.gr-2{grid-row-start:2}
.gs-2{grid-row-end:span 2}
.agr-2{grid-template-rows:repeat(2,12px)}
.gr-3{grid-row-start:3}
.gs-3{grid-row-end:span 3}
.agr-3{grid-template-rows:repeat(3,12px)}
.gr-4{grid-row-start:4}
.gs-4{grid-row-end:span 4}
.agr-4{grid-template-rows:repeat(4,12px)}
.gr-5{grid-row-start:5}
.gs-5{grid-row-end:span 5}
.agr-5{grid-template-rows:repeat(5,12px)}
.gr-6{grid-row-start:6}
.gs-6{grid-row-end:span 6}
.agr-6{grid-template-rows:repeat(6,12px)}
.gr-7{grid-row-start:7}
.gs-7{grid-row-end:span 7}
.agr-7{grid-template-rows:repeat(7,12px)}
.gr-8{grid-row-start:8}
.gs-8{grid-row-end:span 8}
.agr-8{grid-template-rows:repeat(8,12px)}
.gr-9{grid-row-start:9}
.gs-9{grid-row-end:span 9}
.agr-9{grid-template-rows:repeat(9,12px)}
.gr-10{grid-row-start:10}
.gs-10{grid-row-end:span 10}
.agr-10{grid-template-rows:repeat(10,12px)}
.gr-11{grid-row-start:11}
.gs-11{grid-row-end:span 11}
.agr-11{grid-template-rows:repeat(11,12px)}
.gr-12{grid-row-start:12}
.gs-12{grid-row-end:span 12}
.agr-12{grid-template-rows:repeat(12,12px)}
.gr-13{grid-row-start:13}
.gs-13{grid-row-end:span 13}
.agr-13{grid-template-rows:repeat(13,12px)}
.gr-14{grid-row-start:14}
.gs-14{grid-row-end:span 14}
.agr-14{grid-template-rows:repeat(14,12px)}
.gr-15{grid-row-start:15}
.gs-15{grid-row-end:span 15}
.agr-15{grid-template-rows:repeat(15,12px)}
.gr-16{grid-row-start:16}
.gs-16{grid-row-end:span 16}
.agr-16{grid-template-rows:repeat(16,12px)}
.gr-17{grid-row-start:17}
.gs-17{grid-row-end:span 17}
.agr-17{grid-template-rows:repeat(17,12px)}
.gr-18{grid-row-start:18}
.gs-18{grid-row-end:span 18}
.agr-18{grid-template-rows:repeat(18,12px)}
.gr-19{grid-row-start:19}
.gs-19{grid-row-end:span 19}
.agr-19{grid-template-rows:repeat(19,12px)}
.gr-20{grid-row-start:20}
.gs-20{grid-row-end:span 20}
.agr-20{grid-template-rows:repeat(20,12px)}
.gr-21{grid-row-start:21}
.gs-21{grid-row-end:span 21}
.agr-21{grid-template-rows:repeat(21,12px)}
.gr-22{grid-row-start:22}
.gs-22{grid-row-end:span 22}
.agr-22{grid-template-rows:repeat(22,12px)}
.gr-23{grid-row-start:23}
.gs-23{grid-row-end:span 23}
.agr-23{grid-template-rows:repeat(23,12px)}
.gr-24{grid-row-start:24}
.gs-24{grid-row-end:span 24}
.agr-24{grid-template-rows:repeat(24,12px)}
.gr-25{grid-row-start:25}
.gs-25{grid-row-end:span 25}
.agr-25{grid-template-rows:repeat(25,12px)}
.gr-26{grid-row-start:26}
.gs-26{grid-row-end:span 26}
.agr-26{grid-template-rows:repeat(26,12px)}
.gr-27{grid-row-start:27}
.gs-27{grid-row-end:span 27}
.agr-27{grid-template-rows:repeat(27,12px)}
.gr-28{grid-row-start:28}
.gs-28{grid-row-end:span 28}
.agr-28{grid-template-rows:repeat(28,12px)}
.gr-29{grid-row-start:29}
.gs-29{grid-row-end:span 29}
.agr-29{grid-template-rows:repeat(29,12px)}
.gr-30{grid-row-start:30}
.gs-30{grid-row-end:span 30}
.agr-30{grid-template-rows:repeat(30,12px)}
.gr-31{grid-row-start:31}
.gs-31{grid-row-end:span 31}
.agr-31{grid-template-rows:repeat(31,12px)}
.gr-32{grid-row-start:32}
.gs-32{grid-row-end:span 32}
.agr-32{grid-template-rows:repeat(32,12px)}
.gr-33{grid-row-start:33}
.gs-33{grid-row-end:span 33}
.agr-33{grid-template-rows:repeat(33,12px)}
.gr-34{grid-row-start:34}
.gs-34{grid-row-end:span 34}
.agr-34{grid-template-rows:repeat(34,12px)}
.gr-35{grid-row-start:35}
.gs-35{grid-row-end:span 35}
.agr-35{grid-template-rows:repeat(35,12px)}
.gr-36{grid-row-start:36}
.gs-36{grid-row-end:span 36}
.agr-36{grid-template-rows:repeat(36,12px)}
.gr-37{grid-row-start:37}
.gs-37{grid-row-end:span 37}
.agr-37{grid-template-rows:repeat(37,12px)}
.gr-38{grid-row-start:38}
.gs-38{grid-row-end:span 38}
.agr-38{grid-template-rows:repeat(38,12px)}
.gr-39{grid-row-start:39}
.gs-39{grid-row-end:span 39}
.agr-39{grid-template-rows:repeat(39,12px)}
.gr-40{grid-row-start:40}
.gs-40{grid-row-end:span 40}
.agr-40{grid-template-rows:repeat(40,12px)}
.gr-41{grid-row-start:41}
.gs-41{grid-row-end:span 41}
.agr-41{grid-template-rows:repeat(41,12px)}
.gr-42{grid-row-start:42}
.gs-42{grid-row-end:span 42}
.agr-42{grid-template-rows:repeat(42,12px)}
.gr-43{grid-row-start:43}
.gs-43{grid-row-end:span 43}
.agr-43{grid-template-rows:repeat(43,12px)}
.gr-44{grid-row-start:44}
.gs-44{grid-row-end:span 44}
.agr-44{grid-template-rows:repeat(44,12px)}
.gr-45{grid-row-start:45}
.gs-45{grid-row-end:span 45}
.agr-45{grid-template-rows:repeat(45,12px)}
.gr-46{grid-row-start:46}
.gs-46{grid-row-end:span 46}
.agr-46{grid-template-rows:repeat(46,12px)}
.gr-47{grid-row-start:47}
.gs-47{grid-row-end:span 47}
.agr-47{grid-template-rows:repeat(47,12px)}
.gr-48{grid-row-start:48}
.gs-48{grid-row-end:span 48}
.agr-48{grid-template-rows:repeat(48,12px)}
.gr-49{grid-row-start:49}
.gs-49{grid-row-end:span 49}
.agr-49{grid-template-rows:repeat(49,12px)}
.gr-50{grid-row-start:50}
.gs-50{grid-row-end:span 50}
.agr-50{grid-template-rows:repeat(50,12px)}
.gr-51{grid-row-start:51}
.gs-51{grid-row-end:span 51}
.agr-51{grid-template-rows:repeat(51,12px)}
.gr-52{grid-row-start:52}
.gs-52{grid-row-end:span 52}
.agr-52{grid-template-rows:repeat(52,12px)}
.gr-53{grid-row-start:53}
.gs-53{grid-row-end:span 53}
.agr-53{grid-template-rows:repeat(53,12px)}
.gr-54{grid-row-start:54}
.gs-54{grid-row-end:span 54}
.agr-54{grid-template-rows:repeat(54,12px)}
.gr-55{grid-row-start:55}
.gs-55{grid-row-end:span 55}
.agr-55{grid-template-rows:repeat(55,12px)}
.gr-56{grid-row-start:56}
.gs-56{grid-row-end:span 56}
.agr-56{grid-template-rows:repeat(56,12px)}
.gr-57{grid-row-start:57}
.gs-57{grid-row-end:span 57}
.agr-57{grid-template-rows:repeat(57,12px)}
.gr-58{grid-row-start:58}
.gs-58{grid-row-end:span 58}
.agr-58{grid-template-rows:repeat(58,12px)}
.gr-59{grid-row-start:59}
.gs-59{grid-row-end:span 59}
.agr-59{grid-template-rows:repeat(59,12px)}
.gr-60{grid-row-start:60}
.gs-60{grid-row-end:span 60}
.agr-60{grid-template-rows:repeat(60,12px)}
.gr-61{grid-row-start:61}
.gs-61{grid-row-end:span 61}
.agr-61{grid-template-rows:repeat(61,12px)}
.gr-62{grid-row-start:62}
.gs-62{grid-row-end:span 62}
.agr-62{grid-template-rows:repeat(62,12px)}
.gr-63{grid-row-start:63}
.gs-63{grid-row-end:span 63}
.agr-63{grid-template-rows:repeat(63,12px)}
.gr-64{grid-row-start:64}
.gs-64{grid-row-end:span 64}
.agr-64{grid-template-rows:repeat(64,12px)}
.gr-65{grid-row-start:65}
.gs-65{grid-row-end:span 65}
.agr-65{grid-template-rows:repeat(65,12px)}
.gr-66{grid-row-start:66}
.gs-66{grid-row-end:span 66}
.agr-66{grid-template-rows:repeat(66,12px)}
.gr-67{grid-row-start:67}
.gs-67{grid-row-end:span 67}
.agr-67{grid-template-rows:repeat(67,12px)}
.gr-68{grid-row-start:68}
.gs-68{grid-row-end:span 68}
.agr-68{grid-template-rows:repeat(68,12px)}
.gr-69{grid-row-start:69}
.gs-69{grid-row-end:span 69}
.agr-69{grid-template-rows:repeat(69,12px)}
.gr-70{grid-row-start:70}
.gs-70{grid-row-end:span 70}
.agr-70{grid-template-rows:repeat(70,12px)}
.gr-71{grid-row-start:71}
.gs-71{grid-row-end:span 71}
.agr-71{grid-template-rows:repeat(71,12px)}
.gr-72{grid-row-start:72}
.gs-72{grid-row-end:span 72}
.agr-72{grid-template-rows:repeat(72,12px)}
.gr-73{grid-row-start:73}
.gs-73{grid-row-end:span 73}
.agr-73{grid-template-rows:repeat(73,12px)}
.gr-74{grid-row-start:74}
.gs-74{grid-row-end:span 74}
.agr-74{grid-template-rows:repeat(74,12px)}
.gr-75{grid-row-start:75}
.gs-75{grid-row-end:span 75}
.agr-75{grid-template-rows:repeat(75,12px)}
.gr-76{grid-row-start:76}
.gs-76{grid-row-end:span 76}
.agr-76{grid-template-rows:repeat(76,12px)}
.gr-77{grid-row-start:77}
.gs-77{grid-row-end:span 77}
.agr-77{grid-template-rows:repeat(77,12px)}
.gr-78{grid-row-start:78}
.gs-78{grid-row-end:span 78}
.agr-78{grid-template-rows:repeat(78,12px)}
.gr-79{grid-row-start:79}
.gs-79{grid-row-end:span 79}
.agr-79{grid-template-rows:repeat(79,12px)}
.gr-80{grid-row-start:80}
.gs-80{grid-row-end:span 80}
.agr-80{grid-template-rows:repeat(80,12px)}
.gr-81{grid-row-start:81}
.gs-81{grid-row-end:span 81}
.agr-81{grid-template-rows:repeat(81,12px)}
.gr-82{grid-row-start:82}
.gs-82{grid-row-end:span 82}
.agr-82{grid-template-rows:repeat(82,12px)}
.gr-83{grid-row-start:83}
.gs-83{grid-row-end:span 83}
.agr-83{grid-template-rows:repeat(83,12px)}
.gr-84{grid-row-start:84}
.gs-84{grid-row-end:span 84}
.agr-84{grid-template-rows:repeat(84,12px)}
.gr-85{grid-row-start:85}
.gs-85{grid-row-end:span 85}
.agr-85{grid-template-rows:repeat(85,12px)}
.gr-86{grid-row-start:86}
.gs-86{grid-row-end:span 86}
.agr-86{grid-template-rows:repeat(86,12px)}
.gr-87{grid-row-start:87}
.gs-87{grid-row-end:span 87}
.agr-87{grid-template-rows:repeat(87,12px)}
.gr-88{grid-row-start:88}
.gs-88{grid-row-end:span 88}
.agr-88{grid-template-rows:repeat(88,12px)}
.gr-89{grid-row-start:89}
.gs-89{grid-row-end:span 89}
.agr-89{grid-template-rows:repeat(89,12px)}
.gr-90{grid-row-start:90}
.gs-90{grid-row-end:span 90}
.agr-90{grid-template-rows:repeat(90,12px)}
.gr-91{grid-row-start:91}
.gs-91{grid-row-end:span 91}
.agr-91{grid-template-rows:repeat(91,12px)}
.gr-92{grid-row-start:92}
.gs-92{grid-row-end:span 92}
.agr-92{grid-template-rows:repeat(92,12px)}
.gr-93{grid-row-start:93}
.gs-93{grid-row-end:span 93}
.agr-93{grid-template-rows:repeat(93,12px)}
.gr-94{grid-row-start:94}
.gs-94{grid-row-end:span 94}
.agr-94{grid-template-rows:repeat(94,12px)}
.gr-95{grid-row-start:95}
.gs-95{grid-row-end:span 95}
.agr-95{grid-template-rows:repeat(95,12px)}
.gr-96{grid-row-start:96}
.gs-96{grid-row-end:span 96}
.agr-96{grid-template-rows:repeat(96,12px)}
.h-1{height:12px}
.h-2{height:24px}
.h-3{height:36px}
.h-4{height:48px}
.h-5{height:60px}
.h-6{height:72px}
.h-7{height:84px}
.h-8{height:96px}
.h-9{height:108px}
.h-10{height:120px}
.h-11{height:132px}
.h-12{height:144px}
.h-13{height:156px}
.h-14{height:168px}
.h-15{height:180px}
.h-16{height:192px}
.ag-item.pt-1{padding-top:14px}
.ag-item.pt-2{padding-top:26px}
.ag-item.pt-3{padding-top:38px}
.ag-item.pt-4{padding-top:50px}
.ag-item.pt-5{padding-top:62px}
.ag-item.pt-6{padding-top:74px}
.ag-item.pt-7{padding-top:86px}
.ag-item.pt-8{padding-top:98px}
.ag-item.pt-9{padding-top:110px}
.ag-item.pt-10{padding-top:122px}
.ag-item.pt-11{padding-top:134px}
.ag-item.pt-12{padding-top:146px}
.ag-item.pt-13{padding-top:158px}
.ag-item.pt-14{padding-top:170px}
.ag-item.pt-15{padding-top:182px}
.ag-item.pt-16{padding-top:194px}