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

.star-summary {margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:12px/1.5 Arial,sans-serif;color:var(--muted)}
.star-summary strong {display:block;color:#b45309;font-size:12px;margin-bottom:4px}
.star-summary span {display:block}
#calendar.has-stars .cal-day {height:auto !important}
.agenda-export-btn:disabled {opacity:.5;cursor:default}
.shift.star-shift h3,#calendar .star-cal,#legend .star-legend b {color:#b45309}
.star-shift .bar,.star-dot {background:#b45309}
#calendar .star-cal {margin-top:5px;padding-top:3px;border-top:1px dashed #b45309;text-align:center}
#calendar .star-symbol {display:block;font:700 26px/.9 Georgia,serif}
#calendar .star-cal-time {display:block;font:400 8px/1.4 Arial,sans-serif;white-space:nowrap}
#legend .star-legend {grid-column:1/-1;grid-template-columns:9px 1fr;white-space:normal}
#legend .star-legend b {font-size:22px;line-height:1}
#nextCard.is-star #nextTime,#nextCard .star-next-title {color:#b45309}
#nextCard .star-next-copy {font-size:13px;line-height:1.5;color:var(--ink);margin:8px 0 0}
#nextCard .star-next-copy strong {display:inline;font-size:inherit;color:inherit;margin:0}
#nextCard .star-next-start {font-size:12px;line-height:1.5;font-style:italic;color:var(--muted);margin:8px 0 0}
#nextCard .star-next-date {color:var(--ink)}
#nextCard .star-next-title {font-weight:600}
#nextCard.is-star #nextRelative,#nextCard.is-star #nextCoworkers {display:none}

:root {
  --bg: #f3f0e9;
  --paper: #fbfaf7;
  --ink: #171715;
  --muted: #6d6b64;
  --line: #ded9cf;
  --olive: #6f7c45;
  --olive-dark: #596538;
  --olive-pale: #eef0e5;
  --soft: #ece8df;
  --ok: #5f7144;
  --warn: #9b6a44;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

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

button,input,select {
  font: inherit;
}

.app {
  max-width: 760px;
  margin: auto;
  min-height: 100vh;
  padding: 22px 16px 88px;
}

.top {
  gap: 14px;
  padding: 4px 2px 20px;
  border-bottom: 1px solid var(--line);
}

.brand h1 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -.4px;
  margin: 0;
}

.brand p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .03em;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: 0 3px 16px rgba(42,38,29,.035);
}

.today {
  padding: 21px 20px;
  text-align: left;
  background: #f8f6f0;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
}

.today h2 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 29px;
  font-weight: 400;
  margin: 9px 0 6px;
}

.today .today-time {
  font-size: 17px;
  margin-top: 4px;
}

.today .today-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.5;
}

.next {
  border-left: 0;
  padding: 15px 18px;
  background: transparent;
  box-shadow: none;
  margin-top: -5px;
  border-radius: 0;
  border-width: 0 0 1px 0;
  border-bottom: 1px solid var(--line);
}

.next h2 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 21px;
  font-weight: 400;
  margin: 6px 0 4px;
}

.next .time {
  font-size: 16px;
}

.next .relative,.next .coworkers {
  font-size: 13px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.5;
}

.total-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 4px;
}

.total-item {
  text-align: center;
  padding: 24px 12px;
}

.total-item+ .total-item {
  border-left: 1px solid var(--line);
}

.total-item strong {
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 400;
  font-size: 34px;
  display: block;
}

.total-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.section-title h2 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}

.section-title span {
  font-size: 11px;
  color: var(--muted);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-bottom: 1px solid var(--line);
  margin: 22px 0 0;
}

.tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 11px 6px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab.active {
  color: var(--ink);
  border-bottom-color: #fc9001;
}

.calendar-head,.calendar {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 4px;
}

.calendar-head {
  margin-bottom: 5px;
}

.calendar-head div {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}

.cal-day {
  min-height: 58px;
  border-radius: 8px;
  position: relative;
  text-align: center;
  cursor: pointer;
}

.cal-day.blank {
  background: transparent;
}

.cal-day .num {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 14px;
}

.cal-day.today {
  outline: 1px solid var(--olive);
  outline-offset: -1px;
}

.cal-day .shift-info {
  grid-template-columns: 5px 1fr;
  column-gap: 6px;
}

.cal-day .shift-line {
  height: 32px;
}

.cal-day .shift-name {
  color: var(--ink);
}

.cal-day .shift-time {
  margin-bottom: 0;
}

.cal-day .off {
  margin-top: 9px;
  height: 32px;
}

.legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.legend span {
  display: grid;
  grid-template-columns: 9px 43px 1fr;
  align-items: center;
  column-gap: 4px;
  font-size: 9px;
  line-height: 1.2;
  color: var(--muted);
  min-width: 0;
  white-space: nowrap;
}

.legend i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0;
  justify-self: center;
}

.shift {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.shift:last-child {
  border-bottom: 0;
}

.bar {
  border-radius: 10px;
}

.shift h3 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 4px;
}

.shift .meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.shift .date {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  padding-top: 2px;
}

.day-select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf9;
  margin-bottom: 10px;
  color: var(--ink);
}

.day-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.day-row:last-child {
  border-bottom: 0;
}

.day-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

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

.day-row .what {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.me {
  background: var(--olive-pale);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
}

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #fffdf9;
  color: var(--ink);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 25px 8px;
  font-size: 13px;
}

@media (max-width:620px) {
  .app {
    padding: 16px 12px 72px;
  }

  .brand h1 {
    font-size: 29px;
  }

  .today h2 {
    font-size: 29px;
  }

  .total-item strong {
    font-size: 30px;
  }

  .cal-day {
    min-height: 62px;
    padding: 6px 3px;
  }

  .shift {
    grid-template-columns: 4px 1fr;
  }

  .shift .date {
    grid-column: 2;
    text-align: left;
  }

}

.shift-thanks-name {
  display: block;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 5px;
}

.shift-thanks-line {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  margin-top: 3px;
  white-space: nowrap;
}

.shift-thanks-heart {
  display: inline-block;
  flex: 0 0 auto;
  color: #e81b1e !important;
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1;
  vertical-align: baseline;
  margin-left: 2px;
  opacity: .78;
  transform-origin: center;
  animation: heartBeatSoft 1.35s ease-in-out infinite;
}

@keyframes heartBeatSoft{
  0%,100%{transform:scale(1);opacity:.62}
  12%{transform:scale(1.16);opacity:.92}
  22%{transform:scale(1);opacity:.72}
  34%{transform:scale(1.11);opacity:.86}
  46%{transform:scale(1);opacity:.66}
}

@media (prefers-reduced-motion: reduce) {
  .shift-thanks-heart {
    animation: none;
  }
}

.agenda-export-wrap {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  align-items: stretch;
}

.agenda-export-btn {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #cbd1b8;
  background: transparent;
  color: var(--olive-dark);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}

.agenda-export-btn:hover {
  border-color: var(--olive);
  background: var(--olive-pale);
}

.agenda-export-btn strong {
  display: block;
  font-size: 10px;
  font-weight: 600;
}

.agenda-export-btn small {
  display: none;
}

.agenda-export-icon {
  font-size: 13px;
  line-height: 1;
  color: var(--olive);
}

@media (max-height:760px) {
  .auth-card {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .auth-card h2 {
    margin-top: 20px;
  }

  .auth-card label {
    margin-top: 11px;
  }

  .auth-primary {
    margin-top: 14px;
  }
}

.legend-kind {
  min-width: 0;
}

.legend-hours {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oppas-intro {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

#oppasView .oppas-heading {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) minmax(0,128px);
  align-items: center;
  gap: 8px;
}

#oppasCount {
  min-width: 0;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.oppas-month-select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 5px 4px 5px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--olive-dark);
  font: 11px/1.25 Arial,Helvetica,sans-serif;
}

@media (max-width:370px) {
  #oppasView .oppas-heading {
    grid-template-columns: auto minmax(0,1fr) minmax(0,115px);
    gap: 6px;
  }
  .oppas-month-select { font-size: 10px; }
}

.oppas-toggle:disabled { opacity: .55; cursor: wait; }

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

.oppas-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  background: #fffdfa;
}

.oppas-item.high {
  border-left: 4px solid #c87524;
  padding-left: 10px;
}

.oppas-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.oppas-date strong {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 16px;
  font-weight: 400;
}

.oppas-badge {
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a5a22;
  background: #f6eadf;
  border-radius: 999px;
  padding: 4px 7px;
  white-space: nowrap;
}

.oppas-shifts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
}

.oppas-person {
  background: #f7f5ef;
  border-radius: 9px;
  padding: 8px;
}

.oppas-person b {
  display: block;
  font-size: 9px;
  color: var(--olive-dark);
  margin-bottom: 3px;
}

.oppas-person span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width:430px) {
  #mainTabs.josine-tabs .tab {
    font-size: 9px !important;
  }

  .oppas-shifts {
    grid-template-columns: 1fr 1fr;
  }
}

.oppas-item.resolved {
  border-left: 4px solid var(--olive);
  padding-left: 10px;
  background: #fbfcf7;
}

.oppas-badge.resolved {
  color: var(--olive-dark);
  background: var(--olive-pale);
}

.cal-day.special-day {
  background: #f8f3e8;
}

.special-label {
  margin-top: 1px;
  padding-left: 11px;
  font-size: 7px;
  line-height: 1;
  color: #9a6a3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.oppas-special {
  margin-top: 7px;
  padding: 5px 7px;
  border-radius: 7px;
  background: #f8f3e8;
  color: #8a623b;
  font-size: 9px;
  line-height: 1.3;
}

.oppas-item.arranged {
  border-left: 4px solid var(--olive);
  padding-left: 10px;
  background: #fbfcf7;
}

.oppas-badge.arranged {
  color: var(--olive-dark);
  background: var(--olive-pale);
}

.oppas-plan {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.oppas-toggle {
  appearance: none;
  border: 1px solid #cbd1b8;
  background: transparent;
  color: var(--olive-dark);
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.oppas-toggle.active {
  background: var(--olive-pale);
  border-color: #b7c092;
}

.oppas-note-label {
  display: block;
  margin-top: 9px;
  margin-bottom: 4px;
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.oppas-note {
  width: 100%;
  resize: vertical;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fffdfa;
  padding: 8px 9px;
  font: 10px/1.4 Arial,Helvetica,sans-serif;
  color: var(--ink);
}

.oppas-note:focus {
  outline: 1px solid var(--olive);
  outline-offset: 1px;
}

.oppas-tab {
  position: relative;
}

.salary-box {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.salary-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
  margin-bottom: 9px;
}

.salary-head h3 {
  margin: 0;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 18px;
  font-weight: 400;
}

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

.salary-lines {
  display: grid;
  gap: 6px;
}

.salary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: var(--muted);
}

.salary-line strong {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.salary-line.total {
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.salary-line.net {
  margin-top: 4px;
  padding: 10px;
  border-radius: 10px;
  background: var(--olive-pale);
  color: var(--olive-dark);
  font-size: 11px;
}

.salary-line.net strong {
  color: var(--olive-dark);
  font-size: 14px;
}

.salary-ort {
  margin: 9px 0;
  padding: 9px;
  border-radius: 10px;
  background: #f7f5ef;
}

.salary-ort-title {
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.salary-line.travel {
  margin-top: 7px;
  color: var(--muted);
}

.salary-line.travel strong {
  color: var(--olive-dark);
}

.salary-line.paid {
  margin-top: 7px;
  padding: 11px 10px;
  border-radius: 10px;
  background: #e7eadb;
  color: var(--olive-dark);
  font-size: 12px;
}

.salary-line.paid strong {
  color: var(--olive-dark);
  font-size: 15px;
}

.total-lock-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(25,25,20,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.total-lock-modal.hidden {
  display: none !important;
}

.total-lock-card {
  width: min(320px,100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.total-lock-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.total-lock-card h3 {
  margin: 0;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 20px;
  font-weight: 400;
}

.total-lock-card p {
  margin: 6px 0 13px;
  font-size: 10px;
  color: var(--muted);
}

#totalPinInput {
  width: 120px;
  text-align: center;
  font-size: 20px;
  letter-spacing: 8px;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdfa;
}

.total-pin-error {
  margin-top: 7px;
  font-size: 9px;
  color: #b23b32;
}

.total-lock-actions {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 13px;
}

#mainTabs .tab {
  min-height: 42px;
  padding: 10px 5px;
  line-height: 1.15;
  font-size: 11px;
}

@media (max-width:620px) {
  #mainTabs .tab {
    font-size: 10.5px;
    padding-left: 3px;
    padding-right: 3px;
  }
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 18px 0 18px;
}

.auth-tab {
  position: relative;
  border: 0;
  background: transparent;
  min-height: 44px;
  padding: 10px 5px 12px;
  font: 600 12px Arial,Helvetica,sans-serif;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.auth-tab.active {
  color: var(--ink);
}

.auth-tab.active::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: var(--olive);
}

.auth-intro {
  margin-top: 0;
}

@media (max-width:430px) {
  .auth-tab {
    font-size: 11px;
    padding-left: 2px;
    padding-right: 2px;
  }
}

.auth-tabs {
  border-bottom: 1px solid var(--line);
  align-items: stretch;
}

.auth-tab {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.auth-tab.active::after {
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 0;
}

.auth-login-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}

.auth-login-bottom .admin-link {
  margin: 0;
  padding: 6px 0;
  text-align: left;
}

.auth-login-bottom #forgotOpenBtn {
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--olive-dark);
  font: 600 10px Arial,sans-serif;
  cursor: pointer;
  text-align: right;
}

.auth-card {
  min-height: 470px;
}

.auth-tabs {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}

.auth-tab {
  min-height: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.auth-login-bottom {
  position: relative;
  margin-top: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.auth-login-bottom .admin-link {
  position: absolute;
  left: 0;
  top: 48px;
  padding: 0;
}

.auth-login-bottom #forgotOpenBtn {
  margin-left: auto;
}

.auth-credit-inline {
  position: absolute;
  right: 0;
  top: 48px;
  font-size: 8px;
  line-height: 1.2;
  color: var(--muted);
  opacity: .62;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
}

#mainTabs {
  grid-template-columns: .92fr .98fr 1.35fr .82fr .93fr !important;
}

#mainTabs .tab {
  min-height: 44px;
  padding: 10px 4px;
  font-size: 12px !important;
  line-height: 1.1;
}

@media (max-width:390px) {
  #mainTabs .tab {
    font-size: 11px !important;
    padding-left: 2px;
    padding-right: 2px;
  }
}

#mainTabs {
  grid-template-columns: .9fr .98fr 1.38fr .78fr .9fr !important;
}

#mainTabs .tab {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 46px;
  padding: 10px 3px;
  font-size: 13px !important;
  line-height: 1;
  text-align: center;
  overflow: visible;
}

@media (max-width:410px) {
  #mainTabs .tab {
    font-size: 12px !important;
    padding-left: 2px;
    padding-right: 2px;
  }
}

@media (max-width:360px) {
  #mainTabs .tab {
    font-size: 11px !important;
  }
}

.cal-day {
  min-height: 78px;
  padding: 7px 5px;
}

.cal-day .num {
  font-size: 15px;
}

.cal-day .shift-info {
  display: grid;
  grid-template-columns: 5px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 5px;
  align-items: start;
  margin-top: 8px;
  text-align: left;
}

.cal-day .shift-line {
  grid-row: 1/3;
  width: 5px;
  height: 34px;
  border-radius: 4px;
}

.cal-day .shift-name {
  font-size: 10px;
  line-height: 1.05;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-day .shift-time {
  font-size: 9px;
  line-height: 1.05;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
}

@media (max-width:420px) {
  .cal-day {
    min-height: 74px;
    padding: 6px 4px;
  }

  .cal-day .shift-name {
    font-size: 9.5px;
  }

  .cal-day .shift-time {
    font-size: 8.5px;
  }
}

.calendar .shift-name,.shift-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 10.5px !important;
  line-height: 1.08 !important;
  max-width: 58px !important;
}

.shift-time {
  font-size: 10.5px !important;
  white-space: nowrap !important;
}

.shift-name {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  max-width: 48px !important;
}

.shift-time {
  display: block !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  max-width: 48px !important;
  overflow: hidden !important;
}

@media (max-width:380px) {
  .shift-name {
    font-size: 9px !important;
    max-width: 43px !important;
  }

  .shift-time {
    font-size: 9px !important;
    max-width: 43px !important;
  }
}

.shift-name {
  font-size: 8.5px !important;
  line-height: 1.05 !important;
  max-width: 46px !important;
}

.shift-time {
  line-height: 1.05 !important;
  max-width: 46px !important;
}

.shift-name,.shift-time {
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.1px !important;
  max-width: 46px !important;
}

.shift-name {
  margin-top: 2px !important;
  padding-bottom: 0 !important;
}

.shift-time {
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

@media (max-width:380px) {
  .shift-name,.shift-time {
    font-size: 8px !important;
    max-width: 42px !important;
  }
}

.month-arrow {
  border: 0;
  background: transparent;
  color: var(--olive-dark);
  font: 28px/1 Georgia,"Times New Roman",serif;
  padding: 4px;
  cursor: pointer;
}

.month-arrow:disabled {
  opacity: .22;
}

.top {
  align-items: center;
  padding-bottom: 16px;
}

.brand h1 {
  font-size: 30px;
}

.today {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.next {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 1px solid #e7e2d8;
  border-radius: 0 0 16px 16px;
  padding: 14px 20px 17px;
}

.next .eyebrow {
  font-size: 9px;
}

.month-arrow {
  font-size: 25px !important;
  color: var(--olive-dark) !important;
}

.month-arrow:disabled {
  opacity: .2;
}

.section-title.calendar-heading {
  display: block;
}

.calendar-month-nav {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 34px;
  align-items: center;
  gap: 6px;
  max-width: 330px;
  margin: 0 auto;
}

.calendar-month-nav h2 {
  min-width: 0;
  text-align: center;
  line-height: 1.2;
}

.tabs {
  margin-top: 12px;
}

.tab {
  font-size: 11px;
  padding: 12px 3px;
}

#calendarView.card {
  padding: 18px 14px;
}

.section-title h2 {
  font-size: 22px;
}

.section-title span {
  font-size: 10px;
}

.day-group {
  margin: 14px 0 6px;
}

.day-group:first-child {
  margin-top: 4px;
}

.day-group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--olive-dark);
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--line);
}

.day-row {
  padding: 10px 4px;
}

.day-row .who {
  font-size: 15px;
}

.day-row .what {
  font-size: 11px;
}

.btn {
  font-size: 11px;
  padding: 11px 9px;
}

@media (max-width:420px) {
  .app {
    padding-left: 10px;
    padding-right: 10px;
  }

  .brand h1 {
    font-size: 27px;
  }

  .today {
    padding: 18px 17px;
  }

  .today h2 {
    font-size: 25px;
  }

  .next {
    padding-left: 17px;
    padding-right: 17px;
  }

  #calendarView.card {
    padding: 16px 10px;
  }
}

.shift-name {
  font-size: 6.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.1px !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
}

.shift-time {
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.calendar .cal-day {
  min-height: 74px;
  padding: 6px 4px;
}

.calendar .cal-day .shift-info {
  display: grid !important;
  grid-template-columns: 2px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 4px !important;
  align-items: start !important;
  margin-top: 8px !important;
  text-align: left !important;
}

.calendar .cal-day .shift-line {
  grid-row: 1/3 !important;
  width: 2px !important;
  min-width: 2px !important;
  height: 32px !important;
  border-radius: 1px !important;
}

.calendar .cal-day .shift-name {
  font-size: 6.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  max-width: 100% !important;
}

.calendar .cal-day .shift-time {
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  color: var(--muted) !important;
}

.calendar .cal-day .off {
  height: 32px !important;
  margin-top: 8px !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: left !important;
  padding-left: 6px !important;
}

#calendarView.card {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.cal-day {
  min-height: 68px !important;
  height: 68px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.cal-day .num {
  margin-bottom: 2px !important;
}

.shift-line {
  margin-top: 1px !important;
  min-height: 30px !important;
}

.shift-name {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.shift-time {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.off {
  margin-top: 2px !important;
}

.legend {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

@media (max-width:420px) {
  .cal-day {
    min-height: 64px !important;
    height: 64px !important;
  }

  .shift-line {
    min-height: 28px !important;
  }

}

.today {
  background: #e7ead8 !important;
  border-color: #cfd5b6 !important;
}

.today .eyebrow {
  color: #667044 !important;
}

.coworker-line {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr);
  column-gap: 4px;
  align-items: start;
  width: 100%;
}

.coworker-label {
  white-space: nowrap;
}

.coworker-names {
  color: #fc9001 !important;
  font-weight: 400;
  min-width: 0;
  overflow-wrap: anywhere;
}

.calendar .cal-day .off,
.cal-day .off {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 22px !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
}

#mainTabs.josine-tabs {
  grid-template-columns: .82fr .82fr .72fr 1.32fr .78fr .68fr !important;
}

#mainTabs:not(.josine-tabs) {
  grid-template-columns: 1fr 1.35fr .9fr .75fr !important;
}

#mainTabs .tab {
  font-size: 10px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  white-space: nowrap;
}

.oppas-tab.hidden {
  display: none !important;
}

.michael-calendar .shift-name {
  font-size: 6.5px !important;
  font-weight: 400 !important;
}

.michael-calendar .shift-time {
  font-size: 8.5px !important;
  font-weight: 400 !important;
}

.michael-calendar .shift-line {
  width: 2px !important;
  height: 32px !important;
}

.michael-calendar .off {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 22px !important;
  margin: 5px 0 0 !important;
  color: #111 !important;
  font-size: 13px !important;
}

.michael-legend span {
  font-size: 9px !important;
}

.michael-legend-settings {
  margin-top: 10px;
}

.michael-legend-settings .legend-settings-content {
  padding: 0 10px 10px;
}

.auth-locked .app {
  display: none !important;
}

/* Keep the login form from flashing while Identity restores the session. */
body.auth-pending #authGate {
  visibility: hidden;
}

body.auth-pending::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid rgba(89,101,56,.2);
  border-top-color: #596538;
  border-radius: 50%;
  animation: authPendingSpin .7s linear infinite;
}

body.demo-mode .page-footer-row {
  display: none !important;
}

@keyframes authPendingSpin { to { transform: rotate(360deg); } }

.auth-gate {
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  background: linear-gradient(180deg,#f3f0e9,#ece8df);
  overflow: auto;
}

.auth-screen {
  width: 100%;
  display: flex;
  justify-content: center;
}

.auth-screen.hidden {
  display: none !important;
}

.auth-card {
  width: min(440px,100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 20px 55px rgba(60,55,45,.12);
}

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

.auth-card h1 {
  font-size: 32px;
}

.auth-card h2 {
  font-size: 23px;
  margin-top: 25px;
}

.auth-sub {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}

.auth-card p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

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

.auth-card input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #d8d2c7;
  border-radius: 12px;
  background: #fffdfa;
  color: var(--ink);
  font: 14px Arial,sans-serif;
}

.auth-card input:focus {
  outline: none;
  border-color: #9aa47b;
  box-shadow: 0 0 0 3px rgba(111,124,69,.10);
}

.auth-primary {
  width: 100%;
  margin-top: 18px;
  padding: 13px 16px;
  border: 0;
  border-radius: 13px;
  background: var(--olive);
  color: #fff;
  font: 600 13px Arial,sans-serif;
  cursor: pointer;
}

.auth-back {
  border: 0;
  background: transparent;
  color: var(--olive-dark);
  font: 600 10px Arial,sans-serif;
  padding: 6px 0;
  cursor: pointer;
}

.auth-msg {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.auth-msg.ok {
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--olive-pale);
  color: var(--olive-dark);
}

.auth-msg.error {
  padding: 11px 12px;
  border-radius: 12px;
  background: #f7ece8;
  color: #8d5948;
}

.admin-link {
  font-size: 10px;
  font-weight: 600;
  color: var(--olive-dark);
  text-decoration: none;
}

.secure-logout {
  border: 0;
  background: transparent;
  color: var(--olive-dark);
  font: 600 10px Arial,sans-serif;
  cursor: pointer;
}

html body #personalContent #mainTabs,
html body #mainTabs {
  display: grid !important;
  grid-template-columns: .90fr .96fr 1.34fr .80fr .90fr !important;
  width: 100% !important;
  align-items: stretch !important;
  gap: 0 !important;
}

html body #personalContent #mainTabs > button.tab,
html body #mainTabs > button.tab {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: Arial,Helvetica,sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.15px !important;
  white-space: nowrap !important;
}

html body #mainTabs > button.tab[data-view="day"] {
  font-size: 13.5px !important;
  letter-spacing: -.35px !important;
}

@media (max-width:370px) {
  html body #personalContent #mainTabs > button.tab,
  html body #mainTabs > button.tab {
    font-size: 13.5px !important;
  }

  html body #mainTabs > button.tab[data-view="day"] {
    font-size: 12.5px !important;
  }
}

#mainTabs .oppas-tab {
  position: relative !important;
  isolation: isolate;
}

#mainTabs .oppas-tab.oppas-needs-attention::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid #fc9001;
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  animation: oppasOutlineBlink .9s steps(1,end) infinite !important;
  -webkit-animation: oppasOutlineBlink .9s steps(1,end) infinite !important;
}

/* Markeer alleen een OPEN oppasknelpunt in de agenda. De omlijning knippert
   net als het Oppas-tabblad; zodra de oppas als geregeld staat verdwijnt hij. */
.calendar .cal-day.oppas-conflict-day::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid #fc9001;
  border-radius: 8px;
  pointer-events: none;
  opacity: 1;
  animation: oppasOutlineBlink .9s steps(1,end) infinite !important;
  -webkit-animation: oppasOutlineBlink .9s steps(1,end) infinite !important;
}

@keyframes oppasOutlineBlink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

@-webkit-keyframes oppasOutlineBlink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

#calendarView > #michaelView.hidden {
  display: none !important;
}

.oppas-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.oppas-save {
  border: 1px solid var(--olive);
  background: var(--olive);
  color: #fff;
  border-radius: 8px;
  padding: 8px 13px;
  font: 600 10px Arial,sans-serif;
  cursor: pointer;
}

.oppas-save:disabled {
  opacity: .55;
  cursor: default;
}

.oppas-save-status {
  font-size: 8px;
  color: var(--muted);
}

.oppas-save-status.saved {
  color: var(--olive-dark);
}

.oppas-save-status.error,.oppas-save-status.warning {
  color: #9a493f;
}

#employeePreviewBanner {
  display: none;
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #eef0e5;
  border-bottom: 1px solid #cfd5b8;
  padding: 8px 12px;
}

#employeePreviewBanner.show {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#employeePreviewBanner .preview-copy {
  font-size: 10px;
  color: #4f5937;
  line-height: 1.35;
}

#employeePreviewBanner .preview-copy strong {
  display: block;
  font-size: 12px;
  color: #2f3522;
}

#employeePreviewBack {
  border: 1px solid #9ba677;
  background: #fbfaf7;
  color: #596538;
  border-radius: 9px;
  padding: 7px 10px;
  font: 600 10px Arial;
  white-space: nowrap;
}

body.employee-preview-mode #secureLogoutBtn {
  display: none !important;
}

html body #mainTabs.employee-tabs {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  width: 100% !important;
}

html body #mainTabs.employee-tabs > button.tab {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 14.5px !important;
}

#oppasTabSlot,#salaryTabSlot {
  display: none !important;
}

html body #personalContent #mainTabs.employee-tabs,
html body #mainTabs.employee-tabs {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  width: 100% !important;
  gap: 0 !important;
  align-items: stretch !important;
}

html body #personalContent #mainTabs.employee-tabs > button.tab,
html body #mainTabs.employee-tabs > button.tab {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 14.5px !important;
  white-space: nowrap !important;
}

.top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-height: 248px;
  padding: 18px 18px 16px;
  border: 0 !important;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(251,250,247,.88) 0%, rgba(251,250,247,.78) 26%, rgba(251,250,247,.38) 52%, rgba(251,250,247,.06) 74%),
    url("header-palsma-zathe.webp?v=170") center center / cover no-repeat;
  box-shadow: 0 8px 30px rgba(42,38,29,.06);
}

.top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  max-width: min(65%, 350px);
  padding-top: 92px;
}

.brand #greeting {
  order: 1;
  margin: 0;
  color: var(--ink);
  font-family: Georgia,"Times New Roman",serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.7px;
  white-space: nowrap;
}

.brand h1 {
  order: 2;
  margin: 8px 0 0;
  color: var(--olive-dark);
  font-family: Arial,Helvetica,sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
}

.brand p#subtitle {
  display: none !important;
}

.top-actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0;
  padding-top: 16px;
  transform: translateX(-8px) !important;
}

.employee-header-logo {
  display: block;
  width: 170px;
  max-width: 36vw;
  height: auto;
  object-fit: contain;
  margin: 0 !important;
}

.today {
  margin-top: 8px !important;
}

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

.today-head .eyebrow {
  margin: 0;
}

.today-date-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  white-space: nowrap;
  text-align: left;
}

.today-head .secure-logout {
  display: none !important;
}

@media (max-width:620px) {
  .top {
    min-height: 220px;
    padding: 14px 16px 14px;
    border-radius: 22px;
    background: linear-gradient(90deg, rgba(251,250,247,.90) 0%, rgba(251,250,247,.82) 28%, rgba(251,250,247,.44) 54%, rgba(251,250,247,.08) 78%),
      url("header-palsma-zathe.webp?v=170") center center / cover no-repeat;
  }

  .brand {
    max-width: 68%;
    padding-top: 86px;
  }

  .brand #greeting {
    font-size: 28px;
    letter-spacing: -.55px;
  }

  .brand h1 {
    font-size: 12px;
    margin-top: 7px;
  }

  .top-actions {
    padding-top: 12px;
    transform: translateX(-4px) !important;
  }

  .employee-header-logo {
    width: 140px;
    max-width: 39vw;
  }

  .today {
    margin-top: 6px !important;
  }
}

@media (max-width:430px) {
  .top {
    min-height: 198px;
    padding: 12px 14px 12px;
    border-radius: 20px;
  }

  .brand {
    max-width: 68%;
    padding-top: 78px;
  }

  .brand #greeting {
    font-size: 24px;
    letter-spacing: -.5px;
  }

  .brand h1 {
    font-size: 11px;
  }

  .top-actions {
    padding-top: 10px;
    transform: translateX(-2px) !important;
  }

  .employee-header-logo {
    width: 122px;
    max-width: 40vw;
  }
}

@media (max-width:370px) {
  .brand #greeting {
    font-size: 21px;
  }

  .brand h1 {
    font-size: 10.5px;
  }

  .employee-header-logo {
    width: 110px;
  }
}

.brand p#subtitle {
  order: 4;
}

.today-head {
  justify-content: flex-start !important;
  gap: 9px !important;
}

#mainTabs .oppas-tab.oppas-needs-attention::after {
  border-color: #fc9001 !important;
}

.page-footer-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: 10px 2px 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.page-footer-row .footer-logout {
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid #c9c5bb;
  border-radius: 8px;
  background: transparent;
  color: var(--olive-dark);
  font: 600 9px Arial,Helvetica,sans-serif;
  line-height: 1.1;
  text-align: center;
}

@media (max-width:430px) {
  .page-footer-row {
    gap: 10px;
    margin-top: 8px;
    padding-top: 9px;
  }

  .page-footer-row .footer-logout {
    font-size: 8.5px;
    padding: 5px 8px;
  }
}

@media (max-width:430px) {
  .agenda-export-wrap {
    gap: 6px;
  }

  .agenda-export-btn {
    padding: 8px 7px;
  }

  .agenda-export-btn strong {
    font-size: 9px;
  }
}

.top.top-photo-header {
  position: relative !important;
  min-height: 188px !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: 2px solid #fc9001 !important;
  border-bottom: 2px solid #fc9001 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: #f3f0e9 !important;
  box-sizing: border-box !important;
}

.top.top-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);
}

.top.top-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%);
  pointer-events: none;
}

.top.top-photo-header .brand,
.top.top-photo-header .top-actions {
  position: relative;
  z-index: 2;
}

.top.top-photo-header .brand {
  display: flex !important;
  flex-direction: column !important;
  align-self: flex-start !important;
  max-width: 57% !important;
  padding: 72px 0 0 26px !important;
}

.top.top-photo-header .brand #greeting {
  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;
}

.top.top-photo-header .brand h1 {
  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;
}

.top.top-photo-header .top-actions {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 14px 18px 0 0 !important;
  transform: none !important;
}

.top.top-photo-header .employee-header-logo {
  display: block !important;
  width: 150px !important;
  max-width: 34vw !important;
  height: auto !important;
  margin: 0 !important;
}

@media (max-width:620px) {
  .app {
    padding-top: 0 !important;
  }

  .top.top-photo-header {
    min-height: 178px !important;
    margin: 0 -12px 0 !important;
  }

  .top.top-photo-header .brand {
    max-width: 56% !important;
    padding: 68px 0 0 22px !important;
  }

  .top.top-photo-header .brand #greeting {
    font-size: 28px !important;
  }

  .top.top-photo-header .brand h1 {
    font-size: 11.5px !important;
  }

  .top.top-photo-header .top-actions {
    padding: 14px 16px 0 0 !important;
  }

  .top.top-photo-header .employee-header-logo {
    width: 136px !important;
    max-width: 33vw !important;
  }
}

@media (max-width:430px) {
  .top.top-photo-header {
    min-height: 170px !important;
    margin: 0 -12px 0 !important;
  }

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

  .top.top-photo-header .brand {
    max-width: 53% !important;
    padding: 66px 0 0 20px !important;
  }

  .top.top-photo-header .brand #greeting {
    font-size: 24px !important;
    letter-spacing: -.45px !important;
  }

  .top.top-photo-header .brand h1 {
    margin-top: 8px !important;
    font-size: 10px !important;
  }

  .top.top-photo-header .top-actions {
    padding: 13px 14px 0 0 !important;
  }

  .top.top-photo-header .employee-header-logo {
    width: 124px !important;
    max-width: 34vw !important;
  }

}

@media (max-width:370px) {
  .top.top-photo-header .brand {
    max-width: 54% !important;
    padding-left: 18px !important;
  }

  .top.top-photo-header .brand #greeting {
    font-size: 21px !important;
  }

  .top.top-photo-header .brand h1 {
    font-size: 9.5px !important;
  }

  .top.top-photo-header .top-actions {
    padding-right: 10px !important;
  }

  .top.top-photo-header .employee-header-logo {
    width: 112px !important;
  }
}

.top.top-photo-header {
  min-height: 142px !important;
}

.top.top-photo-header .top-actions {
  padding-top: 14px !important;
  padding-right: 34px !important;
  transform: translateX(-10px) !important;
}

.top.top-photo-header .employee-header-logo {
  width: 138px !important;
}

@media (max-width:620px) {
  .top.top-photo-header {
    min-height: 130px !important;
  }

  .top.top-photo-header .top-actions {
    padding-top: 12px !important;
    padding-right: 30px !important;
    transform: translateX(-9px) !important;
  }

  .top.top-photo-header .employee-header-logo {
    width: 128px !important;
  }
}

@media (max-width:430px) {
  .top.top-photo-header {
    min-height: 122px !important;
  }

  .top.top-photo-header .brand {
    padding-top: 45px !important;
    padding-left: 20px !important;
  }

  .top.top-photo-header .brand #greeting {
    font-size: 23px !important;
  }

  .top.top-photo-header .top-actions {
    padding-top: 13px !important;
    padding-right: 26px !important;
    transform: translateX(-8px) !important;
  }

  .top.top-photo-header .employee-header-logo {
    width: 116px !important;
  }
}

@media (max-width:370px) {
  .top.top-photo-header {
    min-height: 116px !important;
  }

  .top.top-photo-header .brand {
    padding-top: 44px !important;
  }

  .top.top-photo-header .brand #greeting {
    font-size: 20px !important;
  }

  .top.top-photo-header .top-actions {
    padding-top: 12px !important;
    padding-right: 22px !important;
    transform: translateX(-6px) !important;
  }

  .top.top-photo-header .employee-header-logo {
    width: 106px !important;
  }
}

.calendar-head,.calendar {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(7,minmax(0,1fr)) !important;
  gap: 4px !important;
}

.calendar-head>*,.calendar>* {
  min-width: 0 !important;
  max-width: 100% !important;
}

.cal-day {
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.cal-day .shift-info {
  min-width: 0 !important;
}

.cal-day .shift-name,.cal-day .shift-time {
  min-width: 0 !important;
  max-width: 100% !important;
}

.cal-day.vacation-day {
  background: #f1ead9 !important;
}

.legend .legend-vacation {
  grid-template-columns: 13px 1fr !important;
  grid-column: 1/-1 !important;
  align-items: center !important;
  margin-top: 3px !important;
}

.vacation-legend-swatch {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border: 1px solid #dfd3b9 !important;
  border-radius: 3px !important;
  background: #f1ead9 !important;
}

.legend-vacation-name {
  font-size: 9px !important;
  color: var(--muted) !important;
}

#mainTabs.josine-tabs {
  display: grid !important;
  grid-template-columns: .82fr .90fr 1.40fr .75fr .85fr !important;
  width: 100% !important;
  align-items: stretch !important;
  column-gap: 0 !important;
}

#mainTabs.employee-tabs {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  width: 100% !important;
  align-items: stretch !important;
  column-gap: 0 !important;
}

#mainTabs.employee-tabs .tab {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 4px !important;
  text-align: center !important;
  justify-content: center !important;
}

#mainTabs .tab {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width:370px) {
  #mainTabs .tab {
    font-size: 12px !important;
  }
}

.card.today .today-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100%;
  text-align: left !important;
}

.card.today .today-date-label,
.card.today .today-live-clock {
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap;
  font-size: 11px !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calendar-head div {
  font-size: 11px !important;
}

.cal-day .shift-name,.cal-day .shift-time {
  font-size: 9.5px !important;
  line-height: 1.1 !important;
}

.legend span,.legend-vacation-name {
  font-size: 10px !important;
}

.section-title span {
  font-size: 11px !important;
}

.next .eyebrow {
  font-size: 10px !important;
}

@media (max-width:370px) {
  .card.today .today-date-label,.card.today .today-live-clock {
    font-size: 9.5px !important;
    letter-spacing: .07em !important;
  }

  .cal-day .shift-name,.cal-day .shift-time {
    font-size: 9px !important;
  }
}

@media (max-width:620px) {
  .top.top-photo-header {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

.top.top-photo-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(243,240,233,.90) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.top.top-photo-header::before {
  opacity: .86 !important;
}

.top.top-photo-header::after {
  opacity: .90 !important;
}

.top.top-photo-header .brand {
  padding-top: 46px !important;
}

@media (max-width:620px) {
  .top.top-photo-header .brand {
    padding-top: 42px !important;
  }
}

@media (max-width:430px) {
  .top.top-photo-header .brand {
    padding-top: 39px !important;
  }
}

@media (max-width:370px) {
  .top.top-photo-header .brand {
    padding-top: 38px !important;
  }
}

.top.top-photo-header .brand {
  padding-top: 38px !important;
}

.top.top-photo-header .top-actions {
  padding-top: 6px !important;
}

@media (max-width:620px) {
  .top.top-photo-header .brand {
    padding-top: 34px !important;
  }

  .top.top-photo-header .top-actions {
    padding-top: 4px !important;
  }
}

@media (max-width:430px) {
  .top.top-photo-header .brand {
    padding-top: 31px !important;
  }

  .top.top-photo-header .top-actions {
    padding-top: 5px !important;
  }
}

@media (max-width:370px) {
  .top.top-photo-header .brand {
    padding-top: 30px !important;
  }

  .top.top-photo-header .top-actions {
    padding-top: 4px !important;
  }
}

.top.top-photo-header .brand {
  padding-top: 82px !important;
}

@media (max-width:620px) {
  .top.top-photo-header .brand {
    padding-top: 74px !important;
  }
}

@media (max-width:430px) {
  .top.top-photo-header .brand {
    padding-top: 70px !important;
  }
}

@media (max-width:370px) {
  .top.top-photo-header .brand {
    padding-top: 68px !important;
  }
}

.top.top-photo-header .brand {
  padding-top: 62px !important;
}

@media (max-width:620px) {
  .top.top-photo-header .brand {
    padding-top: 58px !important;
  }
}

@media (max-width:430px) {
  .top.top-photo-header .brand {
    padding-top: 54px !important;
  }
}

@media (max-width:370px) {
  .top.top-photo-header .brand {
    padding-top: 52px !important;
  }
}

.top.top-photo-header {
  background: rgba(243,240,233,.48) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.top.top-photo-header::before {
  opacity: .62 !important;
}

.top.top-photo-header::after {
  opacity: .60 !important;
}

.top.top-photo-header {
  min-height: 134px !important;
  border-top-width: 1px !important;
  border-bottom-width: 1px !important;
}

@media (max-width:620px) {
  .top.top-photo-header {
    min-height: 122px !important;
  }
}

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

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

.top.top-photo-header .brand {
  padding-top: 52px !important;
}

@media (max-width:620px) {
  .top.top-photo-header .brand {
    padding-top: 48px !important;
  }
}

@media (max-width:430px) {
  .top.top-photo-header .brand {
    padding-top: 44px !important;
  }
}

@media (max-width:370px) {
  .top.top-photo-header .brand {
    padding-top: 42px !important;
  }
}

#mainTabs {
  margin-top: 4px !important;
}

html body #mainTabs > button.tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.15 !important;
  padding: 0 4px !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
}

html body #mainTabs > button.tab[data-view="day"] {
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
}

@media (max-width:370px) {
  html body #mainTabs > button.tab,
  html body #mainTabs > button.tab[data-view="day"] {
    font-size: 12px !important;
  }
}

html body #personalContent #mainTabs.josine-tabs {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0 !important;
  width: 100% !important;
  grid-template-columns: none !important;
}

html body #personalContent #mainTabs.josine-tabs > #oppasTabSlot,
html body #personalContent #mainTabs.josine-tabs > #salaryTabSlot {
  display: none !important;
}

html body #personalContent #mainTabs.josine-tabs > button.tab {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: Arial,Helvetica,sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

@media (max-width:340px) {
  html body #personalContent #mainTabs.josine-tabs > button.tab {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 11.5px !important;
  }
}

#loginScreen .auth-card {
  padding-top: 0 !important;
  overflow: hidden !important;
}

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

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

#loginScreen .auth-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;
}

#loginScreen .auth-photo-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 24px 15px;
}

#loginScreen .auth-photo-copy h1 {
  margin: 0 !important;
  color: #171715;
}

#loginScreen .auth-photo-copy .auth-sub {
  margin-top: 3px;
}

@media (max-width:430px) {
  #loginScreen .auth-photo-header {
    height: 104px;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 18px;
  }

  #loginScreen .auth-photo-copy {
    padding: 0 22px 14px;
  }
}

#loginScreen .auth-photo-copy {
  justify-content: flex-start !important;
  padding: 17px 22px 0 !important;
}

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

#loginScreen .auth-photo-text {
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 1px;
}

#loginScreen .auth-photo-copy h1 {
  font-size: 25px !important;
  line-height: 1.02 !important;
  white-space: nowrap;
}

#loginScreen .auth-photo-copy .auth-sub {
  margin-top: 4px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

#loginScreen .auth-photo-logo {
  display: block;
  flex: 0 0 auto;
  width: 108px;
  max-width: 37%;
  height: auto;
  margin-top: -8px;
  object-fit: contain;
}

@media (max-width:430px) {
  #loginScreen .auth-photo-copy {
    padding: 14px 18px 0 !important;
  }

  #loginScreen .auth-photo-row {
    gap: 9px;
  }

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

  #loginScreen .auth-photo-logo {
    width: 100px;
    max-width: 38%;
    margin-top: -7px;
  }
}

@media (max-width:360px) {
  #loginScreen .auth-photo-copy h1 {
    font-size: 20px !important;
  }

  #loginScreen .auth-photo-logo {
    width: 92px;
  }
}

#loginScreen .auth-photo-text {
  padding-top: 18px !important;
}

#loginScreen .auth-photo-copy h1 {
  font-size: 30px !important;
  line-height: 1 !important;
}

#loginScreen .auth-photo-logo {
  margin-right: 10px !important;
}

@media (max-width:430px) {
  #loginScreen .auth-photo-text {
    padding-top: 17px !important;
  }

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

  #loginScreen .auth-photo-logo {
    margin-right: 8px !important;
  }
}

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

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

#loginScreen .auth-card {
  border: 2px solid #fc9001 !important;
}

#loginScreen .auth-card {
  border: 1px solid var(--line) !important;
}

#loginScreen .auth-tab.active::after {
  background: #fc9001 !important;
}

.auth-screen .auth-tab.active::after {
  background: #fc9001 !important;
}

#mainTabs > .tab.active {
  border-bottom-color: #fc9001 !important;
}

.auth-screen .auth-primary {
  background: rgba(252,144,1,.30) !important;
  color: #171715 !important;
  border: 1px solid rgba(252,144,1,.48) !important;
}

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

#authGate .auth-card {
  width: min(440px,100%) !important;
  height: min(610px,calc(100dvh - 32px)) !important;
  display: flex !important;
  flex-direction: column !important;
}

#authGate .auth-photo-header {
  width: auto !important;
}

#authGate .auth-back {
  align-self: flex-start;
  margin-top: 2px;
}

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

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

#authGate .auth-card {
  padding-top: 0 !important;
}

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

#authGate .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;
}

#authGate .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;
}

#authGate .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;
}

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

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

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

#authGate .auth-photo-copy .auth-sub {
  margin-top: 4px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

#authGate .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;
}

#authGate .auth-back {
  margin-top: 0 !important;
}

@media (max-width:430px) {
  #authGate .auth-photo-header {
    flex-basis: 104px !important;
    height: 104px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    margin-bottom: 18px !important;
  }

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

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

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

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

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

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

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

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

#authGate {
  padding: 12px 16px !important;
}

#authGate .auth-card {
  width: min(400px,100%) !important;
  height: 500px !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 0 20px 18px !important;
  border-radius: 22px !important;
}

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

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

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

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

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

#authGate .auth-tabs {
  margin: 10px 0 11px !important;
}

#authGate .auth-tab {
  height: 42px !important;
  min-height: 42px !important;
  padding-top: 8px !important;
  padding-bottom: 9px !important;
}

#authGate .auth-card p {
  margin-top: 7px !important;
  margin-bottom: 7px !important;
}

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

#authGate .auth-card input {
  padding: 10px 11px !important;
}

#authGate .auth-primary {
  margin-top: 12px !important;
  padding: 11px 14px !important;
}

#authGate .auth-login-bottom {
  margin-top: 7px !important;
  padding-bottom: 12px !important;
}

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

#authGate .auth-back {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

#authGate .auth-msg {
  margin-top: 8px !important;
}

#authGate .auth-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

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

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

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

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

#activateMsg.existing-account-msg {
  display: block !important;
}

#activateMsg .existing-account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

#activateMsg .existing-account-action {
  min-width: 0;
  border: 1px solid rgba(252,144,1,.52);
  border-radius: 10px;
  padding: 9px 7px;
  background: rgba(252,144,1,.22);
  color: #171715;
  font: 600 10px Arial,Helvetica,sans-serif;
  line-height: 1.15;
  cursor: pointer;
  text-align: center;
}

#activateMsg .existing-account-action.secondary {
  background: rgba(255,255,255,.50);
}

@media (max-width:360px) {
  #activateMsg .existing-account-actions {
    grid-template-columns: 1fr;
  }
}

.auth-login-bottom .admin-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;
}

.auth-login-bottom .admin-link:hover,
.auth-login-bottom .admin-link:focus-visible {
  text-decoration: none !important;
  color: var(--ink) !important;
}

.shift-thanks-line {
  display: block !important;
  white-space: normal !important;
  max-width: 100% !important;
  overflow-wrap: break-word;
}

.shift-thanks-heart {
  display: inline-block !important;
  margin-left: 3px !important;
  white-space: nowrap !important;
}

.push-settings,.legend-settings {
  margin: 4px 0 0;
  border: 1px solid var(--line,#dedbd2);
  border-radius: 8px;
  background: var(--card,#fffdf8);
  color: var(--olive-dark,#4f5937);
}

/* Michaels schakelaar hoort bij zijn hele pagina, niet bij één tabblad. */
#michaelPage > .michael-push-settings {
  display: block !important;
  margin: 8px 0 12px;
}

.push-settings summary,.legend-settings summary {
  cursor: pointer;
  min-height: 22px;
  padding: 3px 8px;
  font: 600 10px/1.4 Arial,sans-serif;
}

.push-settings summary span {
  float: right;
  color: var(--muted,#69685e);
  font-weight: 400;
  margin-left: 12px;
}

.push-settings-content,.legend-settings-content {
  padding: 0 14px 14px;
}

.legend-settings .legend {
  margin-top: 0 !important;
}

.michael-month-nav {
  max-width: 330px;
  margin: 0 auto 15px;
}

.michael-month-nav h3 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font: 400 15px/1.2 Georgia,"Times New Roman",serif;
  text-align: center;
}

.michael-month-nav .month-arrow {
  padding: 0 4px;
  font-size: 25px !important;
}

.michael-calendar .cal-day {
  min-height: 68px !important;
  height: 68px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

@media (max-width:420px) {
  .michael-calendar .cal-day {
    min-height: 64px !important;
    height: 64px !important;
  }
}

.michael-calendar .cal-day.michael-vacation-day {
  background: #f0f3e7 !important;
}

.michael-calendar .cal-day.michael-factory-stop-day {
  box-shadow: inset 0 0 0 1px #263040;
}

.michael-event-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  padding: 2px 1px;
  color: #fff;
  font: 600 5.5px/1 Arial,sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.michael-event-badge.training { background: #287ca7; }
.michael-event-badge.session,.michael-event-badge.cluster { background: #80629a; }
.michael-event-badge.meeting { background: #c77a19; }
.michael-event-badge.stop { background: #263040; }

.michael-event-list {
  display: grid;
  gap: 5px;
  margin: 10px 0 4px;
}

.michael-event-list[hidden] { display: none; }

.michael-event-row {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  border-left: 3px solid #80629a;
  border-radius: 5px;
  background: #f5f1f7;
  padding: 6px 8px;
  font: 10px/1.25 Arial,sans-serif;
}

.michael-event-row.training { border-color: #287ca7; background: #eef6f9; }
.michael-event-row.meeting { border-color: #c77a19; background: #fbf3e8; }
.michael-event-row.stop { border-color: #263040; background: #eef0f2; }
.michael-event-row.vacation { border-color: #8b9b65; background: #f0f3e7; }

.michael-event-date { color: var(--muted); }
.michael-event-copy strong,.michael-event-copy small { display: block; }
.michael-event-copy strong { color: var(--ink); font-size: 10px; }
.michael-event-copy small { margin-top: 1px; color: var(--muted); font-size: 9px; }

.michael-vacation-legend {
  grid-column: 1/-1;
  justify-self: center;
}

.push-settings p {
  font: 400 14px/1.6 Arial,sans-serif;
  margin: 0 0 12px;
  color: var(--muted,#69685e);
}

.push-settings .push-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.push-settings button {
  border: 1px solid var(--olive,#72814a);
  border-radius: 9px;
  background: var(--olive-dark,#4f5937);
  color: #fff;
  min-height: 44px;
  padding: 10px 14px;
  font: 600 14px/1.4 Arial,sans-serif;
  cursor: pointer;
}

.push-settings button.push-secondary {
  background: transparent;
  color: var(--olive-dark,#4f5937);
}

.push-settings button:disabled {
  opacity: .55;
  cursor: wait;
}

.push-settings button:focus-visible,.push-settings summary:focus-visible,.legend-settings summary:focus-visible {
  outline: 3px solid var(--olive,#72814a);
  outline-offset: 3px;
}

.push-settings .push-error {
  color: #9d342b;
}

.push-settings [hidden] {
  display: none !important;
}

body.employee-preview-mode .push-settings {
  display: none !important;
}

/* Compact downloads below the heading, above the employee's shift list. */
#mineView .agenda-export-wrap {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
  margin: 10px 0;
}

#mineView .agenda-export-btn {
  min-width: 0;
  min-height: 32px;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 8px;
}

#mineView .agenda-export-btn strong {
  min-width: 0;
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#mineView .agenda-export-icon { flex: 0 0 auto; font-size: 12px; }

/* Give Vandaag and Volgende dienst a little more room below the header. */
#vandaag,
#michaelTodayCard {
  margin-top: 20px !important;
}

/* Keep the full greeting inside the space beside the logo. */
.top.top-photo-header .brand {
  flex: 1 1 0;
  min-width: 0;
  max-width: none !important;
  padding-bottom: 12px !important;
}

.top.top-photo-header .brand #greeting,
.top.top-photo-header .brand h1 {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Volwaardige roosterpagina's voor Josine en Michael. */
.roster-owner-switch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 -6px;
}

.roster-owner-switch button {
  min-height: 32px;
  border: 1px solid var(--olive,#72814a);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--paper,#fffdf8);
  color: var(--olive-dark,#4f5937);
  font: 600 11px/1.2 Arial,Helvetica,sans-serif;
  cursor: pointer;
}

.roster-owner-switch button:focus-visible {
  outline: 3px solid rgba(252,144,1,.42);
  outline-offset: 2px;
}

.roster-owner-switch .roster-owner-default {
  border-color: #cbd1b8;
  color: var(--muted,#6d6b64);
}

.roster-owner-switch .roster-owner-default.is-default {
  border-color: var(--olive,#72814a);
  background: var(--olive-pale,#eef0e5);
  color: var(--olive-dark,#4f5937);
}

.roster-owner-page,
.oppas-view-slot {
  min-width: 0;
}

/* Dezelfde scheiding tussen de wisselknop en beide dagoverzichten. */
#josinePage:not(.hidden),
#michaelPage:not(.hidden) {
  margin-top: 12px;
  padding-top: 1px;
  border-top: 1px solid var(--line);
}

#michaelTabs {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  width: 100%;
  margin-top: 4px !important;
}

html body #michaelTabs > button.tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 8px !important;
  font: 500 12.5px/1 Arial,Helvetica,sans-serif !important;
  text-align: center !important;
}

#michaelTabs > .tab.active {
  border-bottom-color: #287ca7 !important;
}

#michaelTabs .oppas-tab {
  position: relative;
  isolation: isolate;
}

#michaelTabs .oppas-tab.oppas-needs-attention::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 3;
  border: 1px solid #286c96;
  border-radius: 8px;
  opacity: 1;
  pointer-events: none;
  animation: oppasOutlineBlink .9s steps(1,end) infinite !important;
}

#michaelCalendar .cal-day.oppas-conflict-day::after {
  border-color: #286c96;
}

#michaelRosterView {
  margin-top: 16px;
}

#michaelRosterView.card {
  padding: 14px !important;
}

@media (max-width:420px) {
  #michaelRosterView.card {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}

#michaelRosterView .michael-month-nav h2 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font: 400 22px/1.2 Georgia,"Times New Roman",serif;
  text-align: center;
}

/* Michael krijgt een eigen, herkenbare Huhtamaki-header. */
html body .top.top-photo-header.michael-header {
  border-color: #287ca7 !important;
  background: rgba(239,246,250,.64) !important;
}

html body .top.top-photo-header.michael-header::before {
  background: url("header-huhtamaki.webp?v=170") center 40% / cover no-repeat !important;
  filter: blur(1.55px) saturate(.86) brightness(1.04) !important;
  opacity: .64 !important;
  transform: scale(1.03) !important;
}

html body .top.top-photo-header.michael-header::after {
  background:
    linear-gradient(90deg,
      rgba(251,253,254,.96) 0%,
      rgba(251,253,254,.90) 18%,
      rgba(251,253,254,.72) 36%,
      rgba(251,253,254,.42) 54%,
      rgba(251,253,254,.30) 70%,
      rgba(251,253,254,.64) 100%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.20)) !important;
  opacity: .72 !important;
}

html body .top.top-photo-header.michael-header .brand #greeting {
  color: #173f5c !important;
  font-size: 25px !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}

html body .top.top-photo-header.michael-header .brand h1,
html body .top.top-photo-header.michael-header .brand #subtitle {
  color: #286c96 !important;
}

html body .top.top-photo-header.michael-header .brand {
  padding-top: 44px !important;
}

html body .top.top-photo-header.michael-header .top-actions {
  padding-top: 52px !important;
}

html body .top.top-photo-header.michael-header .employee-header-logo {
  width: 235px !important;
  max-width: 46vw !important;
  margin-top: -3px !important;
}

@media (max-width:430px) {
  .roster-owner-switch {
    margin-top: 8px;
  }

  .roster-owner-switch button {
    min-height: 29px;
    padding: 5px 11px;
    font-size: 10px;
  }

  html body .top.top-photo-header.michael-header .brand #greeting {
    font-size: 21px !important;
  }

  html body .top.top-photo-header.michael-header .brand {
    padding-top: 36px !important;
  }

  html body .top.top-photo-header.michael-header .top-actions {
    padding-top: 44px !important;
  }

  html body .top.top-photo-header.michael-header .employee-header-logo {
    width: 176px !important;
    max-width: 45vw !important;
    margin-top: -2px !important;
  }
}

@media (max-width:370px) {
  html body .top.top-photo-header.michael-header .brand {
    padding-top: 34px !important;
  }

  html body .top.top-photo-header.michael-header .top-actions {
    padding-top: 42px !important;
  }

  html body .top.top-photo-header.michael-header .employee-header-logo {
    width: 158px !important;
    max-width: 44vw !important;
  }

  html body .top.top-photo-header.michael-header .brand #greeting {
    font-size: 19px !important;
  }
}

/* Beide bedrijfsheaders houden exact dezelfde buitenmaat. */
html body .top.top-photo-header {
  height: 134px !important;
  min-height: 134px !important;
  max-height: 134px !important;
}

@media (max-width:620px) {
  html body .top.top-photo-header {
    height: 122px !important;
    min-height: 122px !important;
    max-height: 122px !important;
  }
}

@media (max-width:430px) {
  html body .top.top-photo-header {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
  }
}

@media (max-width:370px) {
  html body .top.top-photo-header {
    height: 103px !important;
    min-height: 103px !important;
    max-height: 103px !important;
  }
}


/* v171 · gedeelde schoolagenda Josine + Michael */
.school-event-list {display:grid;gap:5px;margin:10px 0 4px}
.school-event-list[hidden] {display:none}
.school-event-row {display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:center;border-left:3px solid #467f93;border-radius:5px;background:#eef5f7;padding:6px 8px;font:10px/1.25 Arial,sans-serif}
.school-event-row.contact {border-color:#79858c;background:#f2f4f5}
.school-event-row.lice {border-color:#4084a6;background:#edf6fa}
.school-event-row.activity {border-color:#bd633c;background:#fbf0eb}
.school-event-row.schoolfree {border-color:#b52d27;background:#faeceb}
.school-event-date {color:var(--muted)}
.school-event-copy strong,.school-event-copy small {display:block}
.school-event-copy strong {color:var(--ink);font-size:10px}
.school-event-copy small {margin-top:1px;color:var(--muted);font-size:9px}
.school-event-dots {position:absolute;top:3px;right:3px;display:flex;gap:2px;z-index:3}
.school-event-dot {width:5px;height:5px;border-radius:999px;background:#467f93;box-shadow:0 0 0 1px rgba(255,255,255,.9)}
.school-event-dot.contact {background:#79858c}
.school-event-dot.lice {background:#4084a6}
.school-event-dot.activity {background:#bd633c}
.school-event-dot.schoolfree {background:#b52d27}
.school-event-legend i {background:#467f93 !important}
.michael-event-row.school-school {border-color:#467f93;background:#eef5f7}
.michael-event-row.school-contact {border-color:#79858c;background:#f2f4f5}
.michael-event-row.school-lice {border-color:#4084a6;background:#edf6fa}
.michael-event-row.school-activity {border-color:#bd633c;background:#fbf0eb}
.michael-event-row.school-schoolfree {border-color:#b52d27;background:#faeceb}

.session-connection-notice {
  margin: 8px 16px 0;
  padding: 9px 11px;
  border: 1px solid #d4c9aa;
  border-radius: 10px;
  background: #fff7df;
  color: #68572c;
  font-size: 12px;
  line-height: 1.35;
}

/* Sterdienst omzetten naar werkelijk gewerkte dienst */
.star-shift-picker{margin-top:14px;padding-top:13px;border-top:1px solid rgba(180,83,9,.22)}
.star-shift-picker label{display:block;font-size:.9rem;font-weight:700;margin-bottom:7px;color:#713f12}
.star-shift-picker-row{display:flex;gap:8px;align-items:center}
.star-shift-picker select{min-width:0;flex:1;padding:10px 11px;border:1px solid #d6d3d1;border-radius:10px;background:#fff;color:#1f2937;font:inherit}
.star-shift-picker button{border:0;border-radius:10px;padding:10px 14px;background:#b45309;color:#fff;font-weight:800;cursor:pointer}
.star-shift-picker button:disabled{opacity:.6;cursor:default}
.star-shift-status{min-height:1.2em;margin-top:6px;font-size:.82rem;color:#57534e}
@media(max-width:460px){.star-shift-picker-row{align-items:stretch;flex-direction:column}.star-shift-picker button{width:100%}}

/* v183: sterdienst overname */
.star-replace-wrap{display:grid;gap:6px;margin-top:10px}.star-replace-wrap label{font-size:.88rem;font-weight:700}.star-replace-wrap select{width:100%;min-width:0}.star-shift-picker>button{margin-top:10px}.star-replace-wrap.hidden{display:none}


/* v184: centrale sterdienst zichtbaar en wijzigbaar via Dagbezetting */
.day-star-assignment{display:inline-flex;align-items:center;margin-left:6px;padding:2px 6px;border-radius:999px;background:#fff3df;color:#a34f05;font-size:.72rem;font-weight:800;vertical-align:middle}
.day-star-edit{margin-left:5px;padding:3px 7px;border:1px solid #c77a19;border-radius:7px;background:#fff;color:#9a4c08;font:700 .72rem/1.1 Arial,sans-serif;cursor:pointer;vertical-align:middle}
.day-star-edit:hover{background:#fff7e8}
.star-edit-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:rgba(22,24,18,.46);backdrop-filter:blur(2px)}
.star-edit-modal.hidden{display:none}
.star-edit-card{width:min(460px,100%);max-height:calc(100vh - 36px);overflow:auto;border:1px solid #ddd8ca;border-radius:20px;background:#fffdf8;padding:20px;box-shadow:0 20px 55px rgba(0,0,0,.22)}
.star-edit-kicker{color:#a34f05;font:800 .75rem/1.2 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.star-edit-card h3{margin:5px 0 2px;font-size:1.45rem}
.star-edit-date{margin:0 0 3px;font-weight:700;color:#58613f}
.star-edit-current{margin:0 0 16px;color:#6b6b63;font-size:.88rem}
.star-edit-card label{display:block;margin:11px 0 5px;font-size:.86rem;font-weight:800;color:#44483a}
.star-edit-card select{width:100%;padding:10px 11px;border:1px solid #d5d2c8;border-radius:10px;background:#fff;font:inherit;color:#20241b}
.star-edit-status{min-height:1.2em;margin-top:7px;font-size:.82rem;color:#665f55}
.star-edit-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px}
.star-edit-actions button{border-radius:10px;padding:9px 11px;font-weight:800;cursor:pointer}
.star-edit-secondary{border:1px solid #d1cec5;background:#fff;color:#4d5045}
.star-edit-restore{border:1px solid #d69b68;background:#fff8ef;color:#9a4c08}
.star-edit-primary{border:0;background:#a34f05;color:#fff}
.star-edit-actions button:disabled{opacity:.55;cursor:default}
@media(max-width:480px){.star-edit-actions{display:grid;grid-template-columns:1fr 1fr}.star-edit-primary{grid-column:1/-1}.star-edit-actions button{width:100%}.day-star-assignment{margin-top:3px}.day-star-edit{margin-top:3px}}

/* v195 CSP-safe dynamic colors */
.csp-bg-o1{background:#facc15}
.csp-bg-o2{background:#f59e0b}
.csp-bg-o3{background:#fce4d6}
.csp-bg-m1{background:#38bdf8}
.csp-bg-m2{background:#2563eb}
.csp-bg-m3{background:#a855f7}
.csp-bg-n{background:#ef4444}
.csp-bg-training{background:#287ca7}
.csp-bg-session{background:#80629a}
.csp-bg-meeting{background:#c77a19}
.csp-bg-stop{background:#263040}
.csp-bg-vacation{background:#aab987}

/* v196 Restore CSP-safe calendar shift backgrounds */
.calendar .cal-day.csp-bg-o1{background:#fff4a8}
.calendar .cal-day.csp-bg-o2{background:#ffe0a3}
.calendar .cal-day.csp-bg-o3{background:#fce4d6}
.calendar .cal-day.csp-bg-m1{background:#d9f1fb}
.calendar .cal-day.csp-bg-m2{background:#dbe7ff}
.calendar .cal-day.csp-bg-m3{background:#eadcf7}
.calendar .cal-day.csp-bg-n{background:#f8d6d6}

/* v199 Calendar swipe and selected-month feedback */
#calendar,#michaelCalendar{will-change:transform,opacity}
.calendar-slide-out-left{animation:calendarOutLeft .12s ease-in both}
.calendar-slide-out-right{animation:calendarOutRight .12s ease-in both}
.calendar-slide-in-right{animation:calendarInRight .26s cubic-bezier(.2,.8,.2,1) both}
.calendar-slide-in-left{animation:calendarInLeft .26s cubic-bezier(.2,.8,.2,1) both}
.calendar-month-nav h2.month-title-flash{animation:monthTitleFlash .5s ease-out}
@keyframes calendarOutLeft{to{transform:translateX(-22px);opacity:.25}}
@keyframes calendarOutRight{to{transform:translateX(22px);opacity:.25}}
@keyframes calendarInRight{from{transform:translateX(28px);opacity:.15}to{transform:translateX(0);opacity:1}}
@keyframes calendarInLeft{from{transform:translateX(-28px);opacity:.15}to{transform:translateX(0);opacity:1}}
@keyframes monthTitleFlash{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.08);filter:brightness(1.45)}100%{transform:scale(1);filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){.calendar-slide-out-left,.calendar-slide-out-right,.calendar-slide-in-right,.calendar-slide-in-left,.calendar-month-nav h2.month-title-flash{animation:none}}

/* v200 Michael calendar CSP-safe shift backgrounds */
#michaelCalendar .cal-day.csp-bg-o1{background:#fff4a8 !important}
#michaelCalendar .cal-day.csp-bg-o2{background:#ffe0a3 !important}
#michaelCalendar .cal-day.csp-bg-o3{background:#fce4d6 !important}
#michaelCalendar .cal-day.csp-bg-m1{background:#d9f1fb !important}
#michaelCalendar .cal-day.csp-bg-m2{background:#dbe7ff !important}
#michaelCalendar .cal-day.csp-bg-m3{background:#eadcf7 !important}
#michaelCalendar .cal-day.csp-bg-n{background:#f8d6d6 !important}
#michaelCalendar .cal-day.michael-vacation-day{background:#f0f3e7 !important}

/* v209: offline status; restored classic animated calendar swipe */
.offline-banner{position:sticky;top:0;z-index:10020;margin:0;padding:8px 14px;text-align:center;background:#fff3cd;color:#664d03;border-bottom:1px solid #ffecb5;font:700 .82rem/1.3 Arial,sans-serif}
.offline-banner[hidden]{display:none}