/* Keep the expanded main navigation reachable on laptops and phones. */
.vacation-inline-editor{margin:12px;padding:14px;border:1px solid #d9b16b;border-radius:8px;background:#fffaf1}
.vacation-edit-head,.vacation-edit-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vacation-edit-head h3{margin:0;font-size:16px}.vacation-inline-editor p{font-size:12px;line-height:1.4}
.vacation-edit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.vacation-edit-fields label{display:grid;gap:4px;font-size:12px}.vacation-edit-fields .full{grid-column:1/-1}
.vacation-edit-fields input,.vacation-edit-fields select,.vacation-edit-fields textarea{width:100%;min-height:38px;padding:7px;border:1px solid #cbc4b9;border-radius:5px;background:#fff;box-sizing:border-box}
.vacation-edit-fields .vacation-edit-check{display:flex;align-items:center;gap:7px}.vacation-edit-check input{width:18px;min-height:18px}
.vacation-inline-editor table{width:100%;border-collapse:collapse;font-size:12px}.vacation-inline-editor th,.vacation-inline-editor td{padding:7px;text-align:left;border-bottom:1px solid #dedbd4}.vacation-inline-editor td small{display:block}.vacation-inline-editor .is-blocked{background:#fae5e3;color:#963c36}
.vacation-edit-actions{justify-content:flex-end;margin-top:10px}.vacation-edit-actions button{font-size:12px}
@media(max-width:600px){.vacation-edit-fields{grid-template-columns:1fr}.vacation-edit-actions button{min-height:42px}.vacation-inline-editor{margin:8px;padding:10px}}
#app > header { gap: 18px; }
#app > header nav { min-width: 0; flex: 1; overflow-x: auto; }
#app > header .nav { flex-shrink: 0; padding-inline: 12px; white-space: nowrap; }
#app > header .header-actions { flex-shrink: 0; }
@media (max-width: 1450px) {
  #app > header { height: auto; min-height: 76px; flex-wrap: wrap; padding-top: 10px; gap: 8px 18px; }
  #app > header nav { order: 3; flex-basis: 100%; height: 46px; }
  #app > header .brand { min-width: 0; }
}
.vacation-page-actions { display: flex; align-items: end; gap: 12px; }
.vacation-page-actions > label { width: 140px; }
.vacation-page-actions .smart-select { min-width: 140px; }
.vacation-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin: 20px 0; }
.vacation-search { flex: 1; min-width: 220px; max-width: 430px; font-size: 12px; }
.vacation-search input { padding: 12px 14px; border: 1px solid #d9d3c9; border-radius: 7px; background: #fff; outline-color: #cf7f07; }
.vacation-types { display: flex; padding: 4px; gap: 3px; background: #e9e5de; border-radius: 8px; }
.vacation-types button { background: transparent; color: #655f55; padding: 10px 12px; font-size: 12px; }
.vacation-types button[aria-pressed="true"] { background: #292c2e; color: #fff; box-shadow: 0 2px 6px #0002; }
.vacation-inactive { display: flex; align-items: center; gap: 6px; padding: 12px 0; font-size: 12px; color: #6d675d; }
.vacation-inactive input { accent-color: #cf7f07; }
.vacation-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.vacation-stat { background: #fff; border: 1px solid #ded8ce; border-top: 3px solid #cf7f07; border-radius: 9px; padding: 17px 19px; box-shadow: 0 6px 20px #20180009; }
.vacation-stat > span { font-size: 11px; color: #777064; }
.vacation-stat > b { display: block; margin-top: 8px; font-size: 29px; font-weight: 600; color: #292c2e; }
.vacation-stat > b small { font-size: 13px; font-weight: 400; color: #888074; }
.vacation-stat p { margin: 5px 0 0; color: #8a8378; font-size: 11px; }
.vacation-stat.remaining { border-top-color: #34704b; }
.vacation-stat.sick { border-top-color: #b24b46; }
.vacation-stat.other { border-top-color: #527d9a; }
.vacation-stat.negative { border-top-color: #a33b34; }
.vacation-stat.negative > b, .vacation-remaining.negative { color: #a33b34; }
.vacation-warning, .vacation-archive-notice { padding: 13px 16px; margin-bottom: 10px; border-radius: 6px; background: #fff2d9; border-left: 4px solid #cf7f07; color: #795520; font-size: 13px; }
.vacation-archive-notice { background: #eaf2ed; border-left-color: #34704b; color: #315b40; }
.vacation-warning.error { background: #faeae7; color: #923e34; border-left-color: #a33b34; }
.vacation-explanation { margin: 0; padding: 13px 20px; background: #faf8f4; border-bottom: 1px solid #e5dfd5; font-size: 12px; color: #756e62; line-height: 1.6; }
.vacation-group-label { display: flex; gap: 9px; align-items: center; padding: 13px 20px; background: #efece6; color: #4b453b; font-size: 12px; font-weight: 750; }
.vacation-group-label > span { padding: 2px 7px; border-radius: 10px; background: #fff; color: #807565; font-size: 10px; }
.vacation-balance-scroll, .vacation-table-scroll { overflow-x: auto; }
.vacation-balance-content { min-width: 940px; }
.vacation-balance-head, .vacation-driver > summary { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(65px, .7fr)) minmax(120px, 1fr) repeat(2, minmax(70px, .7fr)); align-items: center; gap: 12px; padding: 14px 20px; }
.vacation-balance-head { background: #292c2e; color: #fff; font-size: 10px; font-weight: 700; }
.vacation-balance-head > span:not(:first-child), .vacation-driver > summary > span:not(:first-child) { text-align: right; }
.vacation-driver { border-bottom: 1px solid #e9e3d9; }
.vacation-driver > summary { list-style: none; cursor: pointer; font-size: 14px; }
.vacation-driver > summary::-webkit-details-marker { display: none; }
.vacation-driver > summary:hover, .vacation-driver[open] > summary { background: #fffaf1; }
.vacation-driver > summary:focus-visible { outline: 2px solid #cf7f07; outline-offset: -3px; }
.vacation-driver-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vacation-driver-name b { display: block; overflow-wrap: anywhere; }
.vacation-driver-name small { display: block; color: #908779; font-size: 10px; margin-top: 3px; }
.vacation-chevron { color: #ad751e; font-size: 24px; }
.vacation-driver[open] .vacation-chevron { transform: rotate(90deg); }
.vacation-remaining { color: #34704b; font-weight: 800; font-size: 17px; }
.vacation-driver-status { display: inline-block; padding: 2px 6px; margin-top: 5px; border-radius: 4px; background: #e5efe8; color: #34704b; font-size: 9px; }
.vacation-driver-status.inactive { background: #e8e5e0; color: #777; }
.vacation-driver-status.overdrawn { background: #f8e5e2; color: #a33b34; }
.vacation-driver-status.sick, .vacation-period-kind.sick { background: #fae5e3; color: #963c36; }
.vacation-driver-status.other, .vacation-period-kind.other { background: #e4eef6; color: #3a6683; }
.vacation-sick-total { color: #963c36; font-weight: 700; }
.vacation-other-total { color: #3a6683; font-weight: 700; }
.vacation-driver-detail { padding: 16px 20px 20px; background: #f7f5f0; border-top: 1px solid #e9e3d9; }
.vacation-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vacation-detail-head button, .vacation-period button { padding: 7px 10px; font-size: 11px; }
.vacation-period { display: grid; grid-template-columns: 220px 130px 1fr auto; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid #e6e0d5; border-radius: 6px; margin-top: 7px; font-size: 12px; }
.vacation-period small { display: block; margin-top: 3px; color: #857b6e; font-size: 10px; }
.vacation-period-kind { width: max-content; border-radius: 4px; padding: 4px 7px; font-size: 10px; }
.vacation-period-kind.booked { background: #e1efe5; color: #34704b; }
.vacation-period-kind.planned { background: #fff0cf; color: #95600d; }
.vacation-period-note { color: #81796e; white-space: pre-wrap; overflow-wrap: anywhere; }
.vacation-month-controls { display: flex; gap: 7px; align-items: center; }
.vacation-month-label { width: 160px; }
.vacation-month-controls > button { padding: 9px 12px; font-size: 20px; }
#vacationView button:disabled { opacity: .45; cursor: not-allowed; }
.vacation-legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 13px 20px; color: #797164; font-size: 11px; }
.vacation-legend span { display: flex; gap: 6px; align-items: center; }
.vacation-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.vacation-calendar { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.vacation-calendar th, .vacation-calendar td { text-align: center; border-right: 1px solid #e9e4db; border-bottom: 1px solid #e9e4db; padding: 3px; min-width: 33px; }
.vacation-calendar th:first-child { position: sticky; left: 0; z-index: 2; min-width: 190px; max-width: 240px; padding: 12px 15px; text-align: left; background: #fff; box-shadow: 3px 0 5px #21190008; }
.vacation-calendar thead th { background: #292c2e; color: #fff; }
.vacation-calendar thead th:first-child { background: #292c2e; }
.vacation-calendar thead button { padding: 4px 0; width: 100%; background: transparent; color: inherit; border-radius: 3px; }
.vacation-calendar small { display: block; font-size: 9px; font-weight: 400; margin-bottom: 3px; }
.vacation-calendar-name { display: block; text-align: left; padding: 0; color: #37332d; background: transparent; font-size: 12px; overflow-wrap: anywhere; }
.vacation-calendar-name:hover { color: #a7680b; }
.vacation-calendar-group th:first-child { background: #efece6; font-size: 10px; padding: 8px 15px; color: #736959; }
.vacation-cell { width: 100%; min-width: 27px; height: 31px; padding: 0; background: transparent; color: #c6bfb3; font-size: 11px; border-radius: 4px; }
.vacation-booked { background: #dceee1; color: #28613b; }
.vacation-planned { background: #fff0ca; color: #926211; }
.vacation-sick { background: #fae5e3; color: #963c36; }
.vacation-other { background: #e4eef6; color: #3a6683; }
.vacation-weekend { background: #f0ede7; }
.vacation-calendar thead .vacation-weekend { background: #59554e; }
.vacation-calendar .vacation-week-start { border-left: 2px solid #c8bfae; }
.vacation-calendar .vacation-today { box-shadow: inset 0 2px #cf7f07, inset 0 -2px #cf7f07; }
.vacation-cell:hover { outline: 1px solid #cf7f07; }
.vacation-calendar tfoot { font-weight: 700; color: #aca396; }
.vacation-calendar tfoot th:first-child { background: #faf8f4; color: #6c6253; }
.vacation-count-active { color: #795623; background: #fff5e4; }
.vacation-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1450px) {
  .vacation-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .vacation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vacation-calendar-panel > .panel-head { flex-wrap: wrap; gap: 15px; }
}
@media (max-width: 600px) {
  .vacation-page-actions { width: 100%; justify-content: space-between; }
  .vacation-page-actions > label { width: 120px; }
  .vacation-search { max-width: none; width: 100%; }
  .vacation-filters { gap: 10px; }
  .vacation-types { width: 100%; }
  .vacation-types button { flex: 1; }
  .vacation-stat { padding: 12px; }
  .vacation-stat > b { font-size: 25px; }
  .vacation-calendar th:first-child { min-width: 135px; max-width: 135px; padding-inline: 10px; }
  .vacation-calendar-name { font-size: 11px; }
}

/* A fixed 42-day window; scrolling the period changes dates, never bookings. */
.vacation-window-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vacation-window-controls b{font-size:13px;text-align:center;min-width:190px}.vacation-window-controls button{min-height:38px;padding:8px 12px}
.vacation-window-slider{padding:12px 20px;background:#faf8f4;border-bottom:1px solid #e5dfd5}.vacation-window-slider label{display:block;font-size:12px;font-weight:600;color:#5e594f;margin-bottom:5px}.vacation-window-slider input{display:block;width:100%;height:25px;accent-color:#cf7f07;cursor:ew-resize;margin:0}.vacation-window-slider>div{display:flex;justify-content:space-between;font-size:10px;color:#7f7567}
.vacation-calendar{table-layout:fixed;min-width:1120px}.vacation-calendar .vacation-name-column{width:180px}.vacation-calendar th,.vacation-calendar td{min-width:0;padding:2px 1px}.vacation-calendar .vacation-cell{min-width:0;height:32px;font-size:11px}
.vacation-calendar th:first-child{min-width:0;max-width:none}.vacation-calendar thead .vacation-week-label{position:static;min-width:0;max-width:none;text-align:center;padding:7px 0;background:#36434c;font-size:10px;box-shadow:none;border-left:2px solid #74818a}
.vacation-calendar thead .vacation-days th{position:static;min-width:0;max-width:none;text-align:center;padding:2px 1px;box-shadow:none;font-size:11px}.vacation-calendar thead .vacation-days th:not(.vacation-weekend){background:#292c2e}.vacation-calendar thead small{font-size:8px;margin-bottom:1px}.vacation-inline-editor{scroll-margin-top:130px}
@media(min-width:1800px){.vacation-calendar .vacation-name-column{width:220px}.vacation-calendar .vacation-cell{font-size:12px}}
@media(max-width:600px){.vacation-window-controls{width:100%;justify-content:space-between}.vacation-window-controls b{min-width:0;font-size:12px}.vacation-window-slider{padding:10px}.vacation-calendar .vacation-name-column{width:155px}}