/* Beheerpagina. Volgorde bewaart de bestaande opmaak en schermgroottes. */

.admin-push-tests {padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--olive-pale);margin-bottom:22px}
.admin-push-tests h3 {margin:0 0 6px;font-size:16px}
.admin-push-tests p {font-size:12px;margin:0 0 10px}
.admin-push-tests label {font-size:12px}
.admin-push-tests input {width:100%;min-width:0;margin-bottom:10px}
.admin-push-test-buttons {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.admin-push-test-buttons .btn {width:100%;min-width:0;min-height:34px;padding:7px 4px;font-size:11px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.admin-push-tests .msg {font-size:12px}
.admin-push-tests [hidden] {display:none!important}

:root {
  --bg: #f3f0e9;
  --paper: #fbfaf7;
  --ink: #171715;
  --muted: #6d6b64;
  --line: #ded9cf;
  --olive: #6f7c45;
  --olive-dark: #596538;
  --olive-pale: #eef0e5;
  --red: #a5533d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial,Helvetica,sans-serif;
}

.hidden {
  display: none !important;
}

.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.login-card,.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.login-card {
  width: min(430px,100%);
  padding: 28px;
}

.shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px;
}

.panel {
  padding: 22px;
}

h1,h2 {
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 14px 0 6px;
}

input,select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
  background: #fffdfa;
  font: 13px Arial;
  color: var(--ink);
}

.btn {
  border: 1px solid #a7af8c;
  background: transparent;
  color: var(--olive-dark);
  border-radius: 12px;
  padding: 10px 13px;
  font: 600 11px Arial;
  cursor: pointer;
}

.btn.primary {
  background: var(--olive);
  color: #fff;
  border-color: var(--olive);
}

.btn.danger {
  color: var(--red);
  border-color: #d8b8ae;
}

.login-card .primary {
  width: 100%;
  margin-top: 18px;
}

.top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.nav {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: stretch;
  width: 100%;
  gap: 0;
  margin: 16px 0 18px;
  border-bottom: 1px solid var(--line);
}

.nav .btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 12px 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}

.nav .btn > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.nav .btn.active {
  background: transparent;
  color: var(--ink);
}

.nav .btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #fc9001;
}

@media (max-width:520px) {
  .nav .btn {
    min-height: 52px;
    padding: 10px 4px 12px;
    font-size: 12px;
  }
}

.employee-list {
  display: grid;
  gap: 7px;
}

.emp {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.emp-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.emp-actions .btn {
  padding: 8px 9px;
}

.name {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 16px;
}

.status {
  font-size: 9px;
  border-radius: 999px;
  padding: 4px 7px;
  white-space: nowrap;
}

.linked {
  background: #e8eddc;
  color: #5c693f;
}

.unlinked {
  background: #f4e6df;
  color: #9b5e42;
}

.addform,.uploadbox {
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
}

.addform {
  background: var(--olive-pale);
  border: 1px solid #d7ddc2;
}

.uploadbox {
  border: 1px dashed #bfc5a5;
  background: #f8f7f1;
}

.msg {
  margin-top: 10px;
  font-size: 11px;
}

.msg.ok {
  color: var(--olive-dark);
}

.msg.error {
  color: var(--red);
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width:700px) {
  .top {
    flex-direction: column;
  }

  .emp {
    grid-template-columns: 1fr;
  }

  .emp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .emp-actions .btn {
    width: 100%;
  }
}

.employee-head-tools {
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}

.employee-search {
  margin: 0;
  max-width: 330px;
}

@media (max-width:700px) {
  .employee-head-tools {
    grid-template-columns: 1fr;
  }

  .employee-search {
    max-width: none;
  }

  .employee-head-tools .btn {
    width: 100%;
  }

}

.active-rosters {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.active-rosters-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.active-roster-list {
  display: grid;
  gap: 8px;
}

.roster-file {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfaf7;
}

.roster-file-main {
  min-width: 0;
}

.roster-file-name {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-file-meta {
  margin-top: 3px;
  font-size: 9px;
  color: var(--muted);
  line-height: 1.45;
}

.roster-file-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.roster-file-actions .btn {
  padding: 8px 9px;
}

.roster-file-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

@media (max-width:700px) {
  .active-rosters-head {
    flex-direction: column;
  }

  .active-rosters-head .btn {
    width: 100%;
  }

  .roster-file {
    grid-template-columns: 1fr;
  }

  .roster-file-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .roster-file-actions .btn {
    width: 100%;
  }
}

.roster-archive-badge,.roster-current-badge,.roster-future-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 6px;
  border-radius: 999px;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 8px;
  font-weight: 600;
  vertical-align: 2px;
}

.roster-archive-badge {
  background: #ecebe6;
  color: #77746d;
}

.roster-current-badge {
  background: #e8eddc;
  color: #5c693f;
}

.roster-future-badge {
  background: #edf1f3;
  color: #60717a;
}

.archived-roster {
  background: #faf9f5;
}

.roster-locked-text {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}

.employee-preview-box {
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid #d7ddc2;
  border-radius: 14px;
  background: var(--olive-pale);
}

.employee-preview-box h3 {
  margin: 0 0 4px;
  font: 400 18px Georgia,"Times New Roman",serif;
}

.employee-preview-box p {
  margin: 0 0 10px;
}

.employee-preview-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
}

.employee-preview-controls select {
  margin: 0;
}

.employee-preview-note {
  margin-top: 7px;
  font-size: 9px;
  color: var(--muted);
}

@media (max-width:600px) {
  .employee-preview-controls {
    grid-template-columns: 1fr;
  }

  .employee-preview-controls .btn {
    width: 100%;
  }
}

.statistics-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.statistics-head p {
  margin: 5px 0 0;
}

.statistics-period {
  width: auto;
  min-width: 130px;
  margin: 0;
}

.statistics-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin: 14px 0;
}

.statistics-kpi {
  background: #f7f6f0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.statistics-kpi strong {
  display: block;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 20px;
  font-weight: 400;
}

.statistics-kpi span {
  font-size: 9px;
  color: var(--muted);
}

.statistics-chart {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdfa;
}

.statistics-chart-title {
  font: 400 15px Georgia,"Times New Roman",serif;
  margin: 0 0 10px;
}

.statistics-chart-list {
  display: grid;
  gap: 7px;
}

.statistics-chart-row {
  display: grid;
  grid-template-columns: minmax(100px,1.1fr) minmax(120px,2fr) 46px;
  gap: 8px;
  align-items: center;
}

.statistics-chart-name {
  font-size: 9px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statistics-chart-track {
  height: 8px;
  border-radius: 999px;
  background: #ece8df;
  overflow: hidden;
}

.statistics-chart-bar {
  height: 100%;
  border-radius: 999px;
  background: #fc9001;
  min-width: 2px;
}

.statistics-chart-value {
  font-size: 9px;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}

.statistics-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.statistics-row {
  display: grid;
  grid-template-columns: minmax(130px,1.3fr) minmax(190px,1.8fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdfa;
}

.statistics-name {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 15px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics-values {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
  text-align: center;
}

.statistics-values strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.statistics-values span {
  display: block;
  font-size: 8px;
  color: var(--muted);
  margin-top: 2px;
}

.statistics-badge {
  font-size: 8px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 7px;
  white-space: nowrap;
  background: #ecebe6;
  color: #77746d;
}

.statistics-badge.low {
  background: #fff0e4;
  color: #a95c19;
}

.statistics-badge.even {
  background: #e8eddc;
  color: #5c693f;
}

.statistics-badge.high {
  background: #edf1f3;
  color: #60717a;
}

.statistics-note {
  margin: 12px 2px 0;
  font-size: 9px;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width:700px) {
  .statistics-head {
    flex-direction: column;
  }

  .statistics-period {
    width: 100%;
  }

  .statistics-summary {
    gap: 5px;
  }

  .statistics-kpi {
    padding: 8px;
  }

  .statistics-kpi strong {
    font-size: 18px;
  }

  .statistics-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .statistics-values {
    grid-column: 1/-1;
    grid-row: 2;
  }

  .statistics-badge {
    grid-column: 2;
    grid-row: 1;
  }

  .statistics-chart-row {
    grid-template-columns: minmax(88px,1fr) minmax(90px,1.6fr) 42px;
    gap: 6px;
  }

  .statistics-chart-name,.statistics-chart-value {
    font-size: 8.5px;
  }
}

.message-form {
  margin-top: 18px;
}

.message-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.message-form legend {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 7px;
}

.message-form textarea {
  display: block;
  width: 100%;
  min-height: 190px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
  background: #fffdfa;
  color: var(--ink);
  font: 14px/1.6 Arial,Helvetica,sans-serif;
}

.message-form input[type="text"],.message-form input[type="search"] {
  font-size: 14px;
}

.message-audience-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.message-audience-tools input {
  flex: 1 1 200px;
  min-width: 0;
}

.message-audience-tools .btn {
  padding: 9px 11px;
}

.message-recipients {
  max-height: 248px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 10px;
  background: #fffdfa;
}

.message-form .message-recipient {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.message-recipient:last-child {
  border-bottom: 0;
}

.message-recipient input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--olive-dark);
}

.message-recipient>span {
  min-width: 0;
}

.message-recipient strong {
  display: block;
  font: 400 15px Georgia,"Times New Roman",serif;
  color: var(--ink);
}

.message-recipient span span {
  display: block;
  font-size: 11px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.message-summary {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--olive-dark);
}

.message-excluded {
  margin: 6px 0 0;
  font-size: 11px;
}

.message-empty {
  margin: 0;
  padding: 14px;
}

.message-length {
  margin: 5px 0 0;
  text-align: right;
  font-size: 10px;
}

.message-form .btn:disabled {
  cursor: default;
  opacity: .55;
}

.message-form input:focus-visible,.message-form textarea:focus-visible,.message-form select:focus-visible,.message-form button:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

#messageStatus {
  line-height: 1.6;
}

.nav .btn.active::after {
  background: #fc9001 !important;
}

#adminLoginBtn {
  background: rgba(252,144,1,.30) !important;
  color: #171715 !important;
  border-color: rgba(252,144,1,.48) !important;
}

#adminLoginBtn:hover,
#adminLoginBtn:focus-visible {
  background: rgba(252,144,1,.40) !important;
  color: #171715 !important;
}

#adminLogin.login {
  padding: 16px 22px !important;
  background: linear-gradient(180deg,#f3f0e9,#ece8df) !important;
}

#adminLogin .login-card {
  width: min(440px,100%) !important;
  height: min(610px,calc(100dvh - 32px)) !important;
  padding: 0 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 55px rgba(60,55,45,.12) !important;
}

#adminLogin .auth-photo-header {
  position: relative !important;
  flex: 0 0 112px !important;
  height: 112px !important;
  width: auto !important;
  margin: 0 -24px 20px !important;
  overflow: hidden !important;
  background: rgba(243,240,233,.48) !important;
}

#adminLogin .auth-photo-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: url("login-header-palsma-zathe.webp?v=170") center 61% / cover no-repeat !important;
  filter: blur(1.7px) saturate(.87) brightness(1.03) !important;
  transform: scale(1.03) !important;
  opacity: .62 !important;
}

#adminLogin .auth-photo-header::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
      rgba(251,250,247,.97) 0%,
      rgba(251,250,247,.92) 16%,
      rgba(251,250,247,.78) 31%,
      rgba(251,250,247,.52) 46%,
      rgba(251,250,247,.24) 58%,
      rgba(251,250,247,.26) 66%,
      rgba(251,250,247,.48) 80%,
      rgba(251,250,247,.74) 92%,
      rgba(251,250,247,.86) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.05) 28%,
      rgba(255,255,255,.18) 100%) !important;
  opacity: .60 !important;
  pointer-events: none !important;
}

#adminLogin .auth-photo-copy {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 17px 22px 0 !important;
}

#adminLogin .auth-photo-row {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#adminLogin .auth-photo-text {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding-top: 18px !important;
}

#adminLogin .auth-photo-copy h1 {
  margin: 0 !important;
  color: #171715 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#adminLogin .auth-sub {
  margin-top: 4px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--olive) !important;
}

#adminLogin .auth-photo-logo {
  display: block !important;
  flex: 0 0 auto !important;
  width: 108px !important;
  height: auto !important;
  margin-top: -8px !important;
  margin-right: 10px !important;
  object-fit: contain !important;
}

#adminLogin .login-card > h2 {
  margin-top: 18px !important;
}

#adminLogin .login-card > p {
  margin-bottom: 10px !important;
}

#adminLogin .login-card label {
  margin-top: 14px !important;
}

#adminLogin .login-card .primary {
  margin-top: 18px !important;
}

@media (max-width:430px) {
  #adminLogin .login-card {
    height: min(590px,calc(100dvh - 24px)) !important;
  }

  #adminLogin .auth-photo-header {
    flex-basis: 104px !important;
    height: 104px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    margin-bottom: 18px !important;
  }

  #adminLogin .auth-photo-copy {
    padding: 14px 18px 0 !important;
  }

  #adminLogin .auth-photo-row {
    gap: 9px !important;
  }

  #adminLogin .auth-photo-text {
    padding-top: 17px !important;
  }

  #adminLogin .auth-photo-copy h1 {
    font-size: 28px !important;
  }

  #adminLogin .auth-photo-logo {
    width: 100px !important;
    max-width: 38% !important;
    margin-top: -7px !important;
    margin-right: 8px !important;
  }
}

@media (max-width:360px) {
  #adminLogin .auth-photo-text {
    padding-top: 16px !important;
  }

  #adminLogin .auth-photo-copy h1 {
    font-size: 25px !important;
  }

  #adminLogin .auth-photo-logo {
    width: 92px !important;
  }
}

#adminLogin.login {
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
  overflow: auto !important;
}

#adminLogin .login-card {
  width: min(400px,100%) !important;
  height: 500px !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  margin: 0 !important;
  padding: 0 20px 18px !important;
  border-radius: 22px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#adminLogin .auth-photo-header {
  flex: 0 0 100px !important;
  height: 100px !important;
  margin: 0 -20px 14px !important;
}

#adminLogin .auth-photo-copy {
  padding: 12px 16px 0 !important;
}

#adminLogin .auth-photo-text {
  padding-top: 15px !important;
}

#adminLogin .auth-photo-copy h1 {
  font-size: 27px !important;
}

#adminLogin .auth-photo-logo {
  width: 96px !important;
  max-width: 37% !important;
  margin-top: -6px !important;
  margin-right: 6px !important;
}

#adminLogin .login-card > h2 {
  margin-top: 12px !important;
  font-size: 21px !important;
}

#adminLogin .login-card > p {
  margin-top: 7px !important;
  margin-bottom: 7px !important;
}

#adminLogin .login-card label {
  margin: 9px 0 4px !important;
}

#adminLogin .login-card input {
  padding: 10px 11px !important;
}

#adminLogin .login-card .primary {
  margin-top: 12px !important;
  padding: 11px 14px !important;
}

#adminLogin #loginMsg {
  margin-top: 8px !important;
}

@media (max-width:430px) {
  #adminLogin .login-card {
    width: min(380px,100%) !important;
    height: 480px !important;
    max-height: calc(100dvh - 20px) !important;
  }

  #adminLogin .auth-photo-header {
    flex-basis: 94px !important;
    height: 94px !important;
  }

  #adminLogin .auth-photo-copy h1 {
    font-size: 26px !important;
  }

  #adminLogin .auth-photo-logo {
    width: 92px !important;
  }
}

#adminLogin.login.hidden {
  display: none !important;
}

#adminApp {
  padding-top: 0 !important;
}

#adminApp .admin-main-photo-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  min-height: 134px !important;
  width: 100vw !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid #fc9001 !important;
  border-bottom: 1px solid #fc9001 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: rgba(243,240,233,.48) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-sizing: border-box !important;
}

#adminApp .admin-main-photo-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("header-palsma-zathe.webp?v=170") center 49% / cover no-repeat;
  filter: blur(1.7px) saturate(.87) brightness(1.03);
  transform: scale(1.03);
  opacity: .62;
}

#adminApp .admin-main-photo-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(251,250,247,.97) 0%,
      rgba(251,250,247,.92) 16%,
      rgba(251,250,247,.78) 31%,
      rgba(251,250,247,.52) 46%,
      rgba(251,250,247,.24) 58%,
      rgba(251,250,247,.26) 66%,
      rgba(251,250,247,.48) 80%,
      rgba(251,250,247,.74) 92%,
      rgba(251,250,247,.86) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.05) 28%,
      rgba(255,255,255,.18) 100%);
  opacity: .60;
  pointer-events: none;
}

#adminApp .admin-main-brand,
#adminApp .admin-main-actions {
  position: relative;
  z-index: 2;
}

#adminApp .admin-main-brand {
  display: flex !important;
  flex-direction: column !important;
  align-self: flex-start !important;
  max-width: 57% !important;
  padding: 52px 0 0 26px !important;
}

#adminApp .admin-main-brand h1 {
  margin: 0 !important;
  color: #171715 !important;
  font-family: Georgia,"Times New Roman",serif !important;
  font-size: 31px !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -.55px !important;
  white-space: nowrap !important;
}

#adminApp .admin-main-brand p {
  margin: 8px 0 0 !important;
  color: var(--olive-dark) !important;
  font-family: Arial,Helvetica,sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

#adminApp .admin-main-actions {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 6px 34px 0 0 !important;
  transform: translateX(-10px) !important;
}

#adminApp .admin-main-logo {
  display: block !important;
  width: 138px !important;
  max-width: 34vw !important;
  height: auto !important;
  margin: 0 !important;
}

#adminApp .admin-utility-row {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 -7px;
}

#adminApp .admin-utility-row #logoutAdmin {
  padding: 7px 10px;
  font-size: 10px;
}

@media (max-width:620px) {
  #adminApp {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #adminApp .admin-main-photo-header {
    min-height: 122px !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  #adminApp .admin-main-brand {
    max-width: 56% !important;
    padding: 48px 0 0 22px !important;
  }

  #adminApp .admin-main-brand h1 {
    font-size: 28px !important;
  }

  #adminApp .admin-main-brand p {
    font-size: 11.5px !important;
  }

  #adminApp .admin-main-actions {
    padding-top: 4px !important;
    padding-right: 30px !important;
    transform: translateX(-9px) !important;
  }

  #adminApp .admin-main-logo {
    width: 128px !important;
    max-width: 33vw !important;
  }
}

@media (max-width:430px) {
  #adminApp .admin-main-photo-header {
    min-height: 114px !important;
  }

  #adminApp .admin-main-photo-header::before {
    background-position: center 49% !important;
    filter: blur(1.55px) saturate(.86) brightness(1.03) !important;
  }

  #adminApp .admin-main-brand {
    max-width: 53% !important;
    padding: 44px 0 0 20px !important;
  }

  #adminApp .admin-main-brand h1 {
    font-size: 23px !important;
    letter-spacing: -.45px !important;
  }

  #adminApp .admin-main-brand p {
    margin-top: 8px !important;
    font-size: 10px !important;
  }

  #adminApp .admin-main-actions {
    padding-top: 5px !important;
    padding-right: 26px !important;
    transform: translateX(-8px) !important;
  }

  #adminApp .admin-main-logo {
    width: 116px !important;
    max-width: 34vw !important;
  }
}

@media (max-width:370px) {
  #adminApp .admin-main-photo-header {
    min-height: 103px !important;
  }

  #adminApp .admin-main-brand {
    max-width: 54% !important;
    padding-top: 42px !important;
    padding-left: 18px !important;
  }

  #adminApp .admin-main-brand h1 {
    font-size: 20px !important;
  }

  #adminApp .admin-main-brand p {
    font-size: 9.5px !important;
  }

  #adminApp .admin-main-actions {
    padding-top: 4px !important;
    padding-right: 22px !important;
    transform: translateX(-6px) !important;
  }

  #adminApp .admin-main-logo {
    width: 106px !important;
  }
}

#adminApp .admin-main-photo-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

#adminApp .admin-main-brand {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#adminApp .admin-main-actions {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

@media (max-width:700px) {
  #adminApp .admin-main-photo-header {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
}

#adminApp .admin-main-brand h1 {
  font-size: 36px !important;
}

#adminApp #adminHeaderDate {
  white-space: nowrap !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

@media (max-width:620px) {
  #adminApp .admin-main-brand h1 {
    font-size: 33px !important;
  }

  #adminApp #adminHeaderDate {
    font-size: 10.5px !important;
  }
}

@media (max-width:430px) {
  #adminApp .admin-main-brand h1 {
    font-size: 31px !important;
  }

  #adminApp #adminHeaderDate {
    font-size: 10px !important;
  }
}

@media (max-width:370px) {
  #adminApp .admin-main-brand h1 {
    font-size: 28px !important;
  }

  #adminApp #adminHeaderDate {
    font-size: 9px !important;
  }
}

#adminLogin .employee-login-link-wrap {
  margin-top: 16px !important;
  text-align: left !important;
}

#adminLogin .employee-login-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--olive-dark) !important;
  font: 600 10px Arial,Helvetica,sans-serif !important;
  text-decoration: none !important;
}

#adminLogin .employee-login-link:hover,
#adminLogin .employee-login-link:focus-visible {
  color: var(--ink) !important;
  text-decoration: none !important;
}

#adminLogin .employee-login-link-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: 10px !important;
  text-align: right !important;
}

#adminLogin .employee-login-link {
  margin-left: auto !important;
  text-align: right !important;
}

/* v189 · Toegangsaanvragen */
.access-requests-panel{margin:18px 0 22px;padding:16px;border:1px solid rgba(118,132,74,.25);border-radius:16px;background:rgba(255,255,255,.58)}
.access-requests-panel.hidden{display:none}.access-requests-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}.access-requests-head h3{margin:0 0 4px}.access-requests-head p{margin:0;color:#71756a;font-size:.9rem}.access-request-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:#f0a000;color:#fff;font-weight:700}.access-request-list{display:flex;flex-direction:column}.access-request-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid rgba(0,0,0,.08)}.access-request-card:first-child{border-top:0}.access-request-copy{min-width:0}.access-request-copy strong{display:block}.access-request-copy div{font-size:.9rem;color:#666;overflow-wrap:anywhere}.access-request-copy small{display:block;margin-top:3px;color:#8a8a82}.access-request-actions{display:flex;gap:8px;flex-wrap:wrap}.access-request-actions .btn{white-space:nowrap}@media(max-width:680px){.access-request-card{align-items:flex-start;flex-direction:column}.access-request-actions{width:100%}.access-request-actions .btn{flex:1}}

.weekend-audit{margin-top:28px;padding:16px;border:1px solid #d9ddcf;border-radius:16px}.weekend-audit-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}.weekend-audit-controls select{padding:8px}.weekend-audit-table{width:100%;border-collapse:collapse;min-width:650px;font-size:13px}.weekend-audit-table td,.weekend-audit-table th{padding:9px 7px;text-align:left;border-bottom:1px solid #e8e8e2}.weekend-audit-table th{font-weight:700}#weekendAuditList{overflow-x:auto}#weekendAuditMessage{line-height:1.5;margin:12px 0}

/* Apart tabblad Weekend */
.weekend-audit{display:grid;gap:14px}.weekend-audit-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.weekend-missing{padding:12px 14px;border-radius:10px;background:#fff4dc;border:1px solid #e8cb8a;color:#704e16}.weekend-missing.complete{background:#edf7ef;border-color:#abd3b2;color:#235735}.weekend-chart-card{border:1px solid #e0e6e9;border-radius:12px;padding:16px;min-width:0}.weekend-chart-card h3{margin:0 0 6px}.weekend-chart-card p{margin:0 0 12px}.weekend-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:15px}.weekend-legend span{display:inline-flex;align-items:center;gap:6px}.weekend-dot{display:inline-block;width:12px;height:12px;border-radius:3px}.weekend-dot.past,.weekend-bar-past{background:#27765b}.weekend-dot.future,.weekend-bar-future{background:#e7a23d}.weekend-chart{display:grid;gap:12px}.weekend-chart-row{display:grid;grid-template-columns:minmax(85px,140px) minmax(80px,1fr) 28px;align-items:center;gap:10px}.weekend-chart-name{overflow-wrap:anywhere}.weekend-chart-track{height:22px;border-radius:5px;background:#edf0f1;display:flex;overflow:hidden}.weekend-bar-past,.weekend-bar-future{display:block;height:100%;flex:none}.weekend-chart-value{text-align:right}.weekend-table-scroll{max-width:100%;overflow-x:auto}.weekend-audit-table{border-collapse:collapse;width:100%;min-width:900px}.weekend-audit-table th,.weekend-audit-table td{text-align:left;padding:10px;border-bottom:1px solid #e3e6e8}.weekend-audit-table th{white-space:normal}.weekend-audit-table td:first-child{font-weight:600}@media(max-width:650px){.weekend-chart-row{grid-template-columns:minmax(75px,100px) minmax(60px,1fr) 25px;gap:7px;font-size:13px}}

/* Weekendkalender: aparte interactieve detailweergave in Beheer. */
.weekend-calendar-card{border:1px solid #e0e6e9;border-radius:12px;padding:16px;min-width:0}
.weekend-calendar-card h3{margin:0 0 6px}
.weekend-calendar-card select{max-width:100%;min-width:135px}
.weekend-calendar-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;margin:10px 0 14px}
.weekend-calendar-legend span:nth-child(1){color:#27765b}.weekend-calendar-legend span:nth-child(2){color:#a36a05}.weekend-calendar-legend span:nth-child(3){color:#704eaa}.weekend-calendar-legend span:nth-child(4){color:#557b8c}.weekend-calendar-legend span:nth-child(5){color:#707782}
.weekend-calendar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.weekend-calendar-day{cursor:pointer;text-align:left;padding:13px;border:1px solid #cfd8dc;border-left:5px solid #707782;border-radius:9px;background:#f6f7f8;color:#24333a;font:inherit;font-size:13px}
.weekend-calendar-day:focus-visible,.weekend-calendar-day.selected{outline:2px solid #255b82;outline-offset:2px}
.weekend-status-gewerkt{border-left-color:#27765b;background:#edf7ef}.weekend-status-gepland{border-left-color:#e7a23d;background:#fff5e5}.weekend-status-sterdienst,.weekend-status-opgeroepen{border-left-color:#8661ad;background:#f6f0fa}.weekend-status-vrij,.weekend-status-vrij-gepland{border-left-color:#7295a2;background:#f0f6f8}
.weekend-calendar-detail{margin-top:14px;padding:14px;border-radius:9px;background:#f5f7f8;min-height:48px;overflow-wrap:anywhere}.weekend-calendar-detail p{margin:7px 0}

/* v195 CSP-safe dynamic presentation */
.csp-upload-btn{margin-top:12px}.csp-section-title{font-size:20px}.csp-hidden{display:none!important}
.csp-width-0{width:0%}
.csp-width-1{width:1%}
.csp-width-2{width:2%}
.csp-width-3{width:3%}
.csp-width-4{width:4%}
.csp-width-5{width:5%}
.csp-width-6{width:6%}
.csp-width-7{width:7%}
.csp-width-8{width:8%}
.csp-width-9{width:9%}
.csp-width-10{width:10%}
.csp-width-11{width:11%}
.csp-width-12{width:12%}
.csp-width-13{width:13%}
.csp-width-14{width:14%}
.csp-width-15{width:15%}
.csp-width-16{width:16%}
.csp-width-17{width:17%}
.csp-width-18{width:18%}
.csp-width-19{width:19%}
.csp-width-20{width:20%}
.csp-width-21{width:21%}
.csp-width-22{width:22%}
.csp-width-23{width:23%}
.csp-width-24{width:24%}
.csp-width-25{width:25%}
.csp-width-26{width:26%}
.csp-width-27{width:27%}
.csp-width-28{width:28%}
.csp-width-29{width:29%}
.csp-width-30{width:30%}
.csp-width-31{width:31%}
.csp-width-32{width:32%}
.csp-width-33{width:33%}
.csp-width-34{width:34%}
.csp-width-35{width:35%}
.csp-width-36{width:36%}
.csp-width-37{width:37%}
.csp-width-38{width:38%}
.csp-width-39{width:39%}
.csp-width-40{width:40%}
.csp-width-41{width:41%}
.csp-width-42{width:42%}
.csp-width-43{width:43%}
.csp-width-44{width:44%}
.csp-width-45{width:45%}
.csp-width-46{width:46%}
.csp-width-47{width:47%}
.csp-width-48{width:48%}
.csp-width-49{width:49%}
.csp-width-50{width:50%}
.csp-width-51{width:51%}
.csp-width-52{width:52%}
.csp-width-53{width:53%}
.csp-width-54{width:54%}
.csp-width-55{width:55%}
.csp-width-56{width:56%}
.csp-width-57{width:57%}
.csp-width-58{width:58%}
.csp-width-59{width:59%}
.csp-width-60{width:60%}
.csp-width-61{width:61%}
.csp-width-62{width:62%}
.csp-width-63{width:63%}
.csp-width-64{width:64%}
.csp-width-65{width:65%}
.csp-width-66{width:66%}
.csp-width-67{width:67%}
.csp-width-68{width:68%}
.csp-width-69{width:69%}
.csp-width-70{width:70%}
.csp-width-71{width:71%}
.csp-width-72{width:72%}
.csp-width-73{width:73%}
.csp-width-74{width:74%}
.csp-width-75{width:75%}
.csp-width-76{width:76%}
.csp-width-77{width:77%}
.csp-width-78{width:78%}
.csp-width-79{width:79%}
.csp-width-80{width:80%}
.csp-width-81{width:81%}
.csp-width-82{width:82%}
.csp-width-83{width:83%}
.csp-width-84{width:84%}
.csp-width-85{width:85%}
.csp-width-86{width:86%}
.csp-width-87{width:87%}
.csp-width-88{width:88%}
.csp-width-89{width:89%}
.csp-width-90{width:90%}
.csp-width-91{width:91%}
.csp-width-92{width:92%}
.csp-width-93{width:93%}
.csp-width-94{width:94%}
.csp-width-95{width:95%}
.csp-width-96{width:96%}
.csp-width-97{width:97%}
.csp-width-98{width:98%}
.csp-width-99{width:99%}
.csp-width-100{width:100%}