#admin.officeCompact .officeMessageSwitch,#admin.officeCompact .officePurchaseEntry,#admin.officeCompact #dashMessageAlert{display:none!important}
#admin.officeCompact .officeSummaryTiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0}
#admin.officeCompact .officeSummaryTile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:66px;border:1px solid #d8e2ed;border-radius:12px;padding:10px 15px;background:#fff;color:#173653;text-align:left;cursor:pointer;font:inherit}
#admin.officeCompact .officeSummaryTile small{color:#607387;font-size:12px}
#admin.officeCompact #dash .dashMainGrid>.dashAreaRecent,#admin.officeCompact #dash .dashMainGrid>.dashAreaFleet{display:none!important}
#admin.officeCompact #dashWeekRestCard{height:var(--office-rest-height,300px)!important;max-height:var(--office-rest-height,300px)!important;min-height:0!important;display:flex!important;flex-direction:column;overflow:hidden!important}
#admin.officeCompact #dashWeekRestBody{min-height:0!important;flex:1;overflow:auto!important;overscroll-behavior:contain}
#admin.officeCompact #dashWeekRestScroller{overflow:auto!important;max-height:none!important;min-height:0!important}
#admin.officeCompact #dashWeekRestBody>p{margin:6px 0;font-size:12px}
#admin.officeCompact .officeNotificationGroups{position:sticky;top:var(--notification-top,110px);z-index:99;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 12px;padding:10px 12px;border:1px solid #d8e2ed;border-radius:12px;background:#fff;box-sizing:border-box}
#admin.officeCompact .officeNotificationStatus{font-size:14px;color:#173653;margin-right:auto}
#admin.officeCompact .officeNotificationGroups .btn{background:#f3f6fa;border-color:#d8e2ed;color:#536779;font-size:13px;min-height:36px}
#admin.officeCompact .officeNotificationGroups .btn.hasNewNotice{background:#c92336;border-color:#a7192a;color:#fff;font-weight:800}
#admin.officeCompact .officeNotificationGroups:has(.hasNewNotice) .officeNotificationStatus{color:#b0182a}
@media(max-width:700px){
 #admin.officeCompact > .top{padding:9px!important;gap:7px!important;flex-wrap:wrap!important}
 #admin.officeCompact > .top .right{display:flex!important;flex-wrap:wrap!important;gap:5px!important;width:100%}
 #admin.officeCompact > .top .btn{font-size:12px!important;min-height:36px!important;padding:6px 8px!important}
 #admin.officeCompact .officeNotificationGroups{padding:6px;gap:4px;margin:5px 0 8px}
 #admin.officeCompact .officeNotificationStatus{width:100%;font-size:12px}
 #admin.officeCompact .officeNotificationGroups .btn{font-size:11px;padding:5px;min-height:32px}
 #admin.officeCompact .officeTileGrid.officeHomeLinks{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,64px);gap:6px;margin-bottom:8px}
 #admin.officeCompact .officeTile{padding:6px!important;gap:4px!important;border-radius:10px}
 #admin.officeCompact .officeTile b{font-size:12px}
 #admin.officeCompact .officeTileIcon{font-size:19px}
 #admin.officeCompact #officeHome .officeTileGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:70px;grid-template-rows:none;min-height:0;height:auto;gap:6px}
 #admin.officeCompact .officeSummaryTiles{gap:6px;margin:6px 0}
 #admin.officeCompact .officeSummaryTile{padding:8px;min-height:54px;font-size:12px}
}
#admin.officeCompact .officeNotificationGroups button[hidden]{display:none!important}
.layout-editing #admin.officeCompact button:not(#layoutToggle):not(#layoutUndo):not(#officeCompactMenu){cursor:grab;touch-action:none;user-select:none}
#admin.officeCompact .officeButtonDragging{opacity:.5;outline:2px dashed #176fd2}

/* Responsive kantoor: bestaande mobiele canvasverplaatsing vervangen door normale grids. */
#admin.officeCompact{width:100%!important;max-width:none!important;box-sizing:border-box}
#admin.officeCompact #dash{width:100%!important;max-width:none!important;padding:0!important}
#admin.officeCompact #dash .dashMainGrid{margin:0!important;gap:0!important;padding:0!important}
#admin.officeCompact #dashWeekRestCard{margin:0!important;min-width:0!important;width:100%!important}
#admin.officeCompact #dashWeekRestBody,#admin.officeCompact #dashWeekRestScroller{max-width:100%!important;box-sizing:border-box}
#admin.officeCompact .dashStatusGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;margin:8px 0!important}
#admin.officeCompact .dashStatusCard{width:100%!important;min-width:0!important;min-height:72px!important;height:auto!important;padding:9px!important;grid-column:auto!important}
#admin.officeCompact .dashStatusCard b{font-size:24px}
#admin.officeCompact .officeTileGrid.officeHomeLinks{grid-template-rows:82px;margin-bottom:8px}
@media(max-width:700px){
 #admin.officeCompact .officeTileGrid.officeHomeLinks{grid-template-rows:repeat(2,72px)}
 #admin.officeCompact .dashStatusGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
 #admin.officeCompact .dashStatusCard{padding:6px!important;min-height:62px!important}
 #admin.officeCompact .dashStatusCard span{font-size:11px}
 #admin.officeCompact .dashStatusCard small{font-size:10px}
 #admin.officeCompact .officeTile b{font-size:13px}
 #admin.officeCompact #officeHome .officeTileGrid{height:calc(100dvh - 280px);grid-template-rows:repeat(4,minmax(76px,1fr));grid-auto-rows:auto}
}

#admin.officeCompact .officeHomeLinks .officeTile{padding:8px!important;gap:4px!important}
#admin.officeCompact .officeHomeLinks .officeTileIcon{font-size:23px}

#admin.officeCompact #officeHome .officeTileGrid{height:var(--office-start-space,60dvh)!important;min-height:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(110px,1fr))!important;gap:12px}
#admin.officeCompact #officeHome .officeTile{padding:10px!important;gap:6px}
@media(max-width:700px){#admin.officeCompact #officeHome .officeTileGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(4,minmax(76px,1fr))!important;gap:7px}}

#admin.officeCompact > .top{flex-wrap:wrap!important}
#admin.officeCompact .officeWelcome{flex:0 0 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ffffff25;padding-top:7px;color:#fff;font-size:13px;box-sizing:border-box}
#admin.officeCompact .officeWeather{color:#d9eaff;font-size:12px}
@media(max-width:700px){#admin.officeCompact .officeWelcome{flex-wrap:wrap;font-size:12px;gap:4px}#admin.officeCompact .officeWeather{font-size:11px}}
#admin.officeCompact .officeNoteCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
#admin.officeCompact .officeNoteCard h3{margin-top:0}
#admin.officeCompact .officeNoteCard form{display:grid;gap:10px}
#admin.officeCompact .officeNoteCard label{display:grid;gap:4px}
#admin.officeCompact .officeNoteCard input,#admin.officeCompact .officeNoteCard select,#admin.officeCompact .officeNoteCard textarea{width:100%;box-sizing:border-box;font:inherit}
#admin.officeCompact .officeNoteDue{background:#b71930!important;color:white!important;animation:office-note-pulse 2s ease-in-out infinite}
#admin.officeCompact .officeNoteDue small{color:white!important}
#admin.officeCompact .officeNoteDueCount{font-size:12px;font-weight:700}
@keyframes office-note-pulse{50%{background:#e34151;box-shadow:inset 0 0 0 3px #ffbac3;opacity:.8}}
@media(prefers-reduced-motion:reduce){#admin.officeCompact .officeNoteDue{animation:none}}
#admin.officeCompact #dashNotesOverview[hidden]{display:none!important}
#admin.officeCompact .officeStaffForm{max-width:900px;display:grid;gap:12px}
#admin.officeCompact .officeStaffForm>label,#admin.officeCompact .officePermissionGrid label{display:grid;gap:5px}
#admin.officeCompact .officePermissionGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
#admin.officeCompact .officeStaffForm input,#admin.officeCompact .officeStaffForm select,#admin.officeCompact .officeStaffForm textarea{font:inherit;box-sizing:border-box;width:100%;padding:9px}
#admin.officeCompact .officeStaffForm input[type=checkbox]{width:auto;justify-self:start}
#admin.officeCompact .officeInviteResult textarea{min-height:100px}
#admin.officeCompact #backup button[hidden]{display:none!important}

.officeStaffSignup[hidden],#loginPane[hidden],#admin [data-office-destination][hidden],#admin [data-notification-kind][hidden],#admin #officeStaff[hidden]{display:none!important}

#admin [data-staff-hidden="true"]{display:none!important}

/* Kantoorregistratie volgt de bestaande inlogvelden en knoppen. */
#officeSignupPane .field{margin-bottom:14px}
#officeSignupPane .wide{width:100%;margin-top:8px}
#officeSignupPane .help{margin:0 0 16px;line-height:1.5}
#officeNotes .agendaNotesTable[hidden]{display:none!important}
#officeNotes #agendaNotesCard{margin-bottom:16px}
#admin.officeCompact #officeNotes.active{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:16px;align-items:start}
#officeNotes>h2{grid-column:1/-1;margin-bottom:0}
#officeNotes #agendaNotesCard{grid-column:1;grid-row:2;margin:0}
#officeNotes .officeNoteCards{grid-column:1;grid-row:3}
#officeNotes>.dashAreaAttention{grid-column:2;grid-row:2/span 2;width:auto!important;max-width:none!important;margin:0!important}
@media(max-width:760px){#admin.officeCompact #officeNotes.active{grid-template-columns:minmax(0,1fr)}#officeNotes>.dashAreaAttention{grid-column:1;grid-row:4}}
#officeNotes .agendaNoteTextField{grid-column:1/-1}
#officeNotes #agendaNoteForm>label{display:grid;gap:6px;font-size:13px;font-weight:700;margin:12px 0;max-width:260px}
#officeNotes #agendaNoteKind,#officeNotes #agendaNoteReminderTime{font:inherit;min-height:42px;padding:8px 12px;border:1px solid #d4e0ef;border-radius:10px;background:#fff;color:#17324d;box-sizing:border-box;width:100%}

#admin .officeAccountManagement{margin-bottom:14px}#admin .officeAccountManagement article{margin-top:10px}#admin .officeAccountManagement article .btn{margin-right:8px}#admin .officeInactiveFilter{display:flex;align-items:center;gap:8px;margin:12px 0}#admin .officeInactiveFilter input{width:18px;height:18px;min-height:0}#admin .officeAccountRelations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}#admin .officeAccountRelations select{width:100%;padding:10px;margin-bottom:10px;border:1px solid #d7e2ef;border-radius:8px}#admin .officeAccountRelations[hidden],#admin .officeAccountManagement[hidden]{display:none!important}@media(max-width:700px){#admin .officeAccountRelations{grid-template-columns:1fr}}

/* Alleen een omlijning voor de notities die de rode herinnering veroorzaken. */
#admin .officeNoteCard.officeNoteReminderOutline{outline:2px solid #c8102e;outline-offset:-2px}