*{box-sizing:border-box}
:root{--bg:#f4f6f8;--panel:#fff;--text:#18212b;--muted:#687586;--line:#e3e8ee;--blue-bg:#e7f1fb;--blue:#246da8;--green-bg:#e6f5ed;--green:#218052;--rest-bg:#edf0f3;--shadow:0 8px 24px rgba(24,33,43,.07)}
body{margin:0;padding:26px 16px 40px;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app{max-width:1280px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
h1{margin:0 0 5px;font-size:clamp(23px,4vw,31px);letter-spacing:-.5px}.topbar p{margin:0;color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.calendar-heading,.employees-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.calendar-heading h2,.employees-heading h2{font-size:18px;margin:0 0 3px}
.muted{color:var(--muted);font-size:12px}.nav-buttons{display:flex;gap:6px;flex-wrap:wrap}.nav-buttons button{padding:8px 10px;font-size:12px}
.palette-area{border:2px dashed #cbd3dc;border-radius:14px;background:#fafbfc;padding:14px;margin-bottom:23px;transition:outline .1s}
.palette-area.over{outline:3px solid #8aaed0;outline-offset:2px}.palette-heading{font-weight:700;font-size:14px}.palette-area p{font-size:12px;color:var(--muted);margin:4px 0 12px}
.palette{display:flex;gap:10px;flex-wrap:wrap}.palette-item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:7px 11px;cursor:grab;user-select:none}.palette-item span:last-child{font-size:13px}
.add-button{background:#1f3448;color:#fff;border-color:#1f3448;display:flex;align-items:center;gap:7px}.add-button span{font-size:20px;line-height:12px}
.employees{display:flex;flex-direction:column;gap:22px}
.employee-card{border:1px solid var(--line);border-radius:15px;padding:15px;background:#fff;min-width:0}
.employee-settings{display:grid;grid-template-columns:minmax(180px,1fr) minmax(270px,1fr) 42px;align-items:end;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.name-field,.hours-field{display:flex;flex-direction:column;gap:7px;min-width:0}.name-field label,.hours-field>label{font-size:13px;font-weight:650}
.name-field input{width:100%;height:43px;padding:0 12px;border:1px solid #cfd7e0;border-radius:10px;font:inherit;outline:none}
.name-field input:focus{border-color:#79a6ce;box-shadow:0 0 0 3px #e7f1fb}
.hour-picker{display:flex;gap:7px}.hour-picker button{flex:1;min-width:0;height:43px;border:1px solid #d7dee6;border-radius:10px;background:#fff;color:#566373;font-weight:700;padding:7px}
.hour-picker button.selected{background:#1f3448;border-color:#1f3448;color:#fff;box-shadow:0 4px 12px #1f344833}
.remove-button{width:42px;height:43px;padding:0;border-radius:11px;font-size:23px;line-height:1;color:#9b4545;border-color:#eddada}.remove-button:disabled{opacity:.3;cursor:not-allowed}
.employee-calendar-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:13px 0 9px}.employee-calendar-heading h3{font-size:14px;margin:0}
.schedule-wrap{overflow-x:auto;padding-bottom:5px}.schedule{min-width:820px;display:grid;grid-template-columns:48px repeat(6,minmax(105px,1fr));gap:6px}
.corner-label,.day-head{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;font-weight:650;min-height:24px}
.week-head{background:#f5f7fa;border:1px solid var(--line);border-radius:9px;padding:7px 4px;text-align:center;display:flex;flex-direction:column;gap:2px;min-height:48px}
.week-head strong{font-size:12px}.week-head span{font-size:10px;color:var(--muted)}
.day-head{background:#fafbfc;border-radius:7px;min-height:51px}
.slot{min-width:0;height:52px;border-radius:9px;display:grid;place-items:stretch}
.day{width:100%;height:52px;display:grid;place-items:center;border-radius:9px;position:relative;cursor:grab;user-select:none;border:1px solid transparent}
.day[data-kind=D]{background:var(--blue-bg);color:var(--blue)}.day[data-kind=E]{background:var(--green-bg);color:var(--green)}.day[data-kind=S]{background:var(--rest-bg);color:#657180}
.day .letter{font-size:21px;line-height:1;font-weight:800}.empty-slot{background:#fbfcfd;border:1px dashed #cbd3dc;display:grid;place-items:center;color:#b2bdc8}.empty-plus{font-size:19px}
.slot.over{outline:3px solid #8aaed0;outline-offset:1px}.dragging{opacity:.3}
.totals{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:10px}
.total-card{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:3px;min-width:0}
.total-card>span{font-size:10px;color:var(--muted)}.total-card strong{font-size:18px;line-height:1.2;white-space:nowrap}.total-card small{font-size:10px;font-weight:500;color:var(--muted)}
.total-card em{font-style:normal;color:var(--muted);font-size:9px}.total-card b{font-size:9px;font-weight:650}.over-hours{color:#bd3939}.on-target{color:#218052}.under-hours{color:#687586}
.employee-footer{margin-top:2px}
.swatch{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;font-weight:750;flex:0 0 auto}.swatch.d{background:var(--blue-bg);color:var(--blue)}.swatch.e{background:var(--green-bg);color:var(--green)}.swatch.s{background:var(--rest-bg);color:#657180}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;flex-wrap:wrap}.save-indicator{color:var(--green);font-size:12px}.small{font-size:11px;margin-top:4px}
button,.logout{border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);padding:10px 14px;font:600 13px system-ui,sans-serif;cursor:pointer;text-decoration:none}
button:hover,.logout:hover{filter:brightness(.97)}.note{font-size:11px;color:var(--muted);margin-top:13px}
.error{background:#fff0f0;border:1px solid #efcaca;color:#9d2929;border-radius:10px;padding:12px;margin:12px 0}
.login-body{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(100%,390px);background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.login-card h1{font-size:23px}.login-card p,.login-card small{color:var(--muted)}.login-card form{display:grid;gap:10px;margin:22px 0}
.login-card label{font-size:13px;font-weight:600}.login-card input{width:100%;padding:12px;border:1px solid #cfd7e0;border-radius:9px;font:inherit}.login-card button{background:#1e2935;color:#fff}
@media(max-width:760px){body{padding:15px 9px 25px}.panel{padding:12px}.calendar-heading,.employees-heading{align-items:flex-start;flex-direction:column}.nav-buttons{width:100%}.nav-buttons button{flex:1;padding:8px 5px}.employee-card{padding:10px}.employee-settings{grid-template-columns:minmax(0,1fr) 42px 42px;gap:8px}.name-field{grid-column:1/-1}.hours-field{grid-column:1}.hour-picker{gap:4px}.hour-picker button{font-size:12px;padding:6px 3px}.employee-calendar-heading{align-items:flex-start;flex-direction:column}.totals{gap:5px}.total-card{padding:6px}.total-card strong{font-size:16px}.total-card em,.total-card b{font-size:8px}.palette{gap:6px}}

/* Egyedi, munkatársankénti műszakpaletta és összecsukható naptár */
.employee-calendar-details{margin-top:12px}
.employee-calendar-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:9px 11px;border-radius:10px;background:#f5f7fa;border:1px solid var(--line);user-select:none}
.employee-calendar-summary::-webkit-details-marker{display:none}
.employee-calendar-summary::before{content:'＋';font-weight:800;color:#526273;margin-right:2px}
.employee-calendar-details[open]>.employee-calendar-summary::before{content:'−'}
.employee-calendar-title{font-size:14px;font-weight:750}
.employee-calendar-summary .muted{margin-left:auto;text-align:right}
.employee-palette{margin:12px 0 13px;padding:12px;border-width:1px}
.employee-palette p{margin-bottom:9px}
.employee-palette .palette-item{min-width:145px}
.swatch.shift-4{background:#e9f2ff;color:#245f9c}
.swatch.shift-6{background:#e9f5ed;color:#28764a}
.swatch.shift-8{background:#fff0df;color:#9a5a17}
.day[data-hours="4"]{background:#e9f2ff;color:#245f9c;border-color:#d7e7fb}
.day[data-hours="6"]{background:#e9f5ed;color:#28764a;border-color:#d5eadc}
.day[data-hours="8"]{background:#fff0df;color:#9a5a17;border-color:#f5dfc4}
.day{display:flex;align-items:center;justify-content:center;padding:4px 3px;text-align:center}
.day .letter{display:block;width:100%;font-size:12px;line-height:1.15;font-weight:800;align-self:center;}
.employee-calendar-details>.totals{margin-top:10px}
@media(max-width:760px){.employee-calendar-summary{align-items:flex-start}.employee-calendar-summary .muted{font-size:10px}.employee-palette .palette-item{min-width:0;flex:1 1 125px}}

/* A szabadnap önálló, jól megkülönböztethető behúzható elem. */
.swatch.off{background:#edf0f3;color:#596675;font-size:11px;letter-spacing:.2px}
.palette-rest-item{border-style:solid;border-color:#c8d0d9;background:#f7f8fa}
.palette-rest-item:hover{border-color:#8996a5;background:#eef1f4}
.day[data-kind=S]{background:#edf0f3;color:#596675;border-color:#d9dfe5}

/* Délelőtti és délutáni munkarend – azonos méretű, középre igazított feliratok. */
.swatch.d{background:var(--blue-bg);color:var(--blue)}
.swatch.e{background:var(--green-bg);color:var(--green)}
.day[data-kind=D]{background:var(--blue-bg);color:var(--blue);border-color:#d7e7fb}
.day[data-kind=E]{background:var(--green-bg);color:var(--green);border-color:#d5eadc}
.day[data-kind=S]{background:var(--rest-bg);color:#596675;border-color:#d9dfe5}
.day .letter{font-size:12px;line-height:1.15;text-align:center}
.employee-settings{grid-template-columns:minmax(180px,1fr) minmax(270px,1fr) 42px}
@media(max-width:760px){.employee-settings{grid-template-columns:minmax(0,1fr) 42px}.name-field{grid-column:1/-1}.hours-field{grid-column:1}.remove-button{grid-column:2;grid-row:2}}

/* 6.0 – egységes középre igazítás és munkatársi színkódolás */
button,
.logout,
.add-button,
.nav-buttons button,
.hour-picker button,
.remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}
.remove-button {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  padding: 0;
  line-height: 1;
  font-size: 23px;
}
.employee-settings {
  grid-template-columns: minmax(170px, 1.25fr) minmax(76px, .35fr) minmax(240px, 1fr) 42px;
  align-items: center;
}
.name-field,
.color-field,
.hours-field {
  align-self: center;
  align-items: stretch;
}
.name-field label,
.color-field label,
.hours-field > label {
  display: flex;
  align-items: center;
  min-height: 20px;
}
.color-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.color-field input[type="color"] {
  width: 100%;
  min-width: 60px;
  height: 43px;
  padding: 4px;
  border: 1px solid #cfd7e0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.hour-picker button { text-align: center; }
.weekly-summary-panel { margin-bottom: 18px; }
.summary-table-wrap { width: 100%; overflow-x: auto; padding-bottom: 4px; }
.summary-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 5px;
  table-layout: fixed;
}
.summary-table th,
.summary-table td {
  min-height: 48px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
}
.summary-table thead th {
  background: #f5f7fa;
  font-weight: 750;
}
.summary-table thead th span,
.summary-table thead th small {
  display: block;
  text-align: center;
}
.summary-table thead th small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}
.summary-table .summary-employee-col { width: 180px; }
.summary-table .summary-employee-name {
  text-align: left;
  background: #fafbfc;
  font-weight: 700;
}
.summary-employee-name > span { vertical-align: middle; }
.employee-color-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
.summary-shift { font-weight: 750; }
.summary-off { background: #edf0f3; color: #596675; font-weight: 700; }
.summary-blank { background: #fbfcfd; color: #aab4bf; }
.summary-empty { color: var(--muted); }

/* Minden slot, ikon, gomb és vezérlő középre igazított tartalmat kap. */
.slot,
.day,
.empty-slot,
.swatch,
.palette-item,
.palette-item .swatch,
.employee-calendar-summary,
.total-card,
.corner-label,
.day-head,
.week-head,
.summary-table td,
.summary-table th {
  text-align: center;
}
.slot { display: grid; place-items: center; }
.day { display: flex; align-items: center; justify-content: center; }
.day .letter { margin: 0; text-align: center; }
.palette-item { justify-content: center; }
.swatch { display: grid; place-items: center; }

@media (max-width: 760px) {
  .employee-settings {
    grid-template-columns: minmax(0, 1fr) 74px 42px;
    align-items: center;
    gap: 8px;
  }
  .name-field { grid-column: 1 / -1; }
  .color-field { grid-column: 1; grid-row: 2; }
  .hours-field { grid-column: 1 / -1; grid-row: 3; }
  .remove-button { grid-column: 3; grid-row: 2; align-self: center; justify-self: center; }
  .color-field input[type="color"] { height: 43px; }
  .summary-table { min-width: 820px; }
}


/* 9.0 – A hathetes Tervezési időszak műszakszínei minden munkatársnál azonosak.
   A személyre szabott szín kizárólag a felső heti összesítőben használatos. */
.employee-card .day[data-kind="D"] {
  background: #e7f1fb;
  border-color: #c8def2;
  color: #245f91;
}
.employee-card .day[data-kind="E"] {
  background: #e6f5ed;
  border-color: #c9e7d5;
  color: #216b49;
}
.employee-card .day[data-kind="S"] {
  background: #edf0f3;
  border-color: #d9dfe5;
  color: #596675;
}


/* 10.0 – Egységes vezérlőméretek, színválasztó és heti összesítő drag & drop. */
.employee-settings {
  grid-template-columns: minmax(170px, 1.25fr) minmax(76px, .35fr)
                       minmax(240px, 3fr) minmax(76px, 1fr);
  align-items: center;
}
.remove-button {
  width: 100%;
  min-width: 0;
  height: 43px;
  min-height: 43px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  align-self: center;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}
.hour-picker {
  display: flex;
  align-items: stretch;
  gap: 7px;
}
.hour-picker button {
  flex: 1 1 0;
  min-width: 0;
  height: 43px;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}
.color-field input[type="color"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 43px;
  min-height: 43px;
  padding: 0;
  border: 1px solid #cfd7e0;
  border-radius: 10px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 8px;
}
.color-field input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 8px;
}
.summary-table td.summary-drop-target {
  cursor: default;
  user-select: none;
}
.summary-table td.summary-shift,
.summary-table td.summary-off {
  cursor: grab;
}
.summary-table td.summary-shift:active,
.summary-table td.summary-off:active {
  cursor: grabbing;
}
.summary-table td.summary-drop-target.over {
  outline: 3px solid #8aaed0;
  outline-offset: 1px;
}
.summary-table td.dragging {
  opacity: .35;
}
@media (max-width: 760px) {
  .employee-settings {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  .name-field {
    grid-column: 1 / -1;
  }
  .color-field {
    grid-column: 1;
    grid-row: 2;
  }
  .hours-field {
    grid-column: 1;
    grid-row: 3;
  }
  .remove-button {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    height: 43px;
    min-height: 43px;
  }
  .hour-picker {
    gap: 4px;
  }
  .hour-picker button {
    padding: 0 3px;
    font-size: 12px;
  }
}


/* 10.1 – A törlés gomb az órakeret-választó sor negyedik, azonos méretű eleme. */
.employee-settings {
  grid-template-columns: minmax(170px, 1.25fr) minmax(76px, .35fr) minmax(300px, 1.2fr);
  align-items: center;
}
.hour-picker {
  display: flex;
  align-items: stretch;
  gap: 7px;
}
.hour-picker button,
.hour-picker .remove-button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 43px;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}
.hour-picker .remove-button {
  color: #9b4545;
  background: #fff;
  border-color: #eddada;
  font-size: 20px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .employee-settings {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }
  .name-field,
  .color-field,
  .hours-field {
    grid-column: 1;
    grid-row: auto;
  }
  .hour-picker {
    gap: 5px;
  }
  .hour-picker button,
  .hour-picker .remove-button {
    font-size: 12px;
    padding: 0 3px;
  }
}


/* 11.0 – Heti összesítő: napok sorokban, 09:00–másnap 01:00 időtengelyen. */
.summary-timeline-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0 5px;
  table-layout: fixed;
}
.summary-timeline-table th,
.summary-timeline-table td {
  padding: 5px 8px;
  border: 1px solid #e1e6ec;
  font-size: 12px;
  vertical-align: middle;
}
.summary-timeline-table .summary-day-col,
.summary-timeline-table .summary-day-name {
  width: 112px;
  min-width: 112px;
  text-align: left;
  background: #f5f7fa;
}
.summary-timeline-table .summary-day-name strong,
.summary-timeline-table .summary-day-name small {
  display: block;
}
.summary-timeline-table .summary-day-name small {
  margin-top: 3px;
  color: #748091;
  font-size: 10px;
  font-weight: 500;
}
.summary-timeline-table .summary-hours-head { padding: 8px 6px; background: #f5f7fa; }
.summary-time-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #536171;
  font-size: 10px;
  font-weight: 650;
}
.summary-time-scale span { text-align: left; white-space: nowrap; transform: translateX(-1px); }
.summary-time-scale span:last-child { text-align: right; }
.summary-timeline-cell { padding: 5px 6px !important; background: #fff; }
.summary-day-lanes { display: flex; flex-direction: column; gap: 4px; min-height: 34px; }
.summary-shift-lane {
  position: relative;
  height: 34px;
  min-width: 0;
  border-radius: 6px;
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(6.25% - 1px), #edf0f4 calc(6.25% - 1px), #edf0f4 6.25%);
}
.summary-shift-lane.over { outline: 2px dashed #7b9fc4; outline-offset: 1px; }
.summary-work-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  min-width: 34px;
  overflow: hidden;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--employee-color) 72%, #fff);
  border-radius: 6px;
  background: color-mix(in srgb, var(--employee-color) 22%, #fff);
  color: color-mix(in srgb, var(--employee-color) 82%, #17212b);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.summary-work-bar:hover { filter: brightness(.97); box-shadow: 0 1px 4px #18243320; }
.summary-work-bar:focus-visible { outline: 2px solid #477db2; outline-offset: 2px; }
.summary-work-bar.dragging { opacity: .4; }
.summary-no-shift { display: flex; align-items: center; min-height: 34px; padding-left: 5px; color: #98a2ae; font-size: 11px; }
.shift-edit-dialog {
  width: min(390px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #d7dee7;
  border-radius: 14px;
  box-shadow: 0 18px 60px #14203335;
}
.shift-edit-dialog::backdrop { background: #17212b66; }
.shift-edit-form { display: grid; gap: 14px; padding: 22px; }
.shift-edit-form h3 { margin: 0; font-size: 18px; }
.shift-edit-person { margin: -8px 0 0; color: #687586; font-size: 13px; }
.shift-edit-form label { display: grid; gap: 6px; color: #3d4a59; font-size: 12px; font-weight: 700; }
.shift-edit-form input[type="time"] { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #cfd7e0; border-radius: 8px; background: #fff; color: #17212b; font: inherit; font-size: 15px; }
.shift-edit-error { min-height: 16px; margin: -5px 0; color: #bf3f3f; font-size: 12px; }
.shift-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.shift-edit-actions button { min-height: 40px; padding: 8px 15px; border: 1px solid #cfd7e0; border-radius: 8px; background: #f7f9fb; color: #344253; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.shift-edit-actions .shift-save { border-color: #286b9f; background: #286b9f; color: #fff; }
@media (max-width: 760px) {
  .summary-timeline-table { min-width: 980px; }
  .summary-timeline-table .summary-day-col,
  .summary-timeline-table .summary-day-name { width: 96px; min-width: 96px; }
  .summary-work-bar { font-size: 10px; padding: 0 5px; }
}

/* 11.2 – A heti összesítő munkaidősávjai egérrel vízszintesen mozgathatók. */
.summary-work-bar { cursor: grab; touch-action: none; user-select: none; }
.summary-work-bar:active, .summary-work-bar.is-moving { cursor: grabbing; z-index: 3; box-shadow: 0 2px 8px #18243330; }
.summary-work-bar.is-moving { transition: none; }

/* 12.0 – Egyszerűsített műszakpaletta és az alapértelmezett munkanap szerkesztése. */
.employee-palette .palette-item { min-width: 155px; }
.employee-palette .palette-item[data-value="WORK"] .swatch { background: #e9f2ff; color: #245f9c; }
.day[data-kind="D"] .letter { font-size: 12px; }
.day[data-value="WORK"] .letter { font-size: 11px; line-height: 1.15; }
.day { cursor: pointer; }

/* Több műszak egy napon: egymás mellett, azonos magasságú idősávokban jelenjenek meg. */
.slot {
  height: 52px;
  min-height: 52px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  overflow: hidden;
}
.slot .day {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  height: 100%;
  min-height: 0;
  padding: 3px 2px;
  border-radius: 6px;
}
.slot .day .letter {
  font-size: 9px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.slot .empty-plus { min-height: 48px; display: grid; place-items: center; width: 100%; }


/* 12.5 – Munkatársi kártyák sorrendezése és alapértelmezett összecsukott állapot. */
.employee-settings {
  grid-template-columns: 42px minmax(170px, 1.25fr) minmax(76px, .35fr)
                       minmax(240px, 3fr);
}
.employee-order-handle {
  width: 42px;
  height: 43px;
  min-height: 43px;
  padding: 0;
  border: 1px solid #d7dee6;
  border-radius: 10px;
  background: #f7f9fb;
  color: #687586;
  font-size: 18px;
  letter-spacing: -3px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.employee-order-handle:active { cursor: grabbing; }
.employee-card-drop-target { outline: 2px dashed #6d9bc5; outline-offset: 3px; }
.employee-card-is-dragging { opacity: .45; }
@media (max-width: 760px) {
  .employee-settings {
    grid-template-columns: 42px 74px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  .employee-order-handle { grid-column: 1; grid-row: 2; }
  .name-field { grid-column: 1 / -1; grid-row: 1; }
  .color-field { grid-column: 2; grid-row: 2; }
  .hours-field { grid-column: 1 / -1; grid-row: 3; }
  .remove-button { grid-column: auto; grid-row: auto; }
}

/* 12.6 – A sorrendező fogantyú az input mezővel igazodik, kompakt óraválasztó. */
.employee-order-handle {
  align-self: end;
  margin-bottom: 0;
}
.hour-picker {
  justify-content: flex-start;
  max-width: 264px;
}
.hour-picker button,
.hour-picker .remove-button {
  flex: 0 0 58px;
  width: 58px;
  max-width: 58px;
}
.color-field label {
  font-size: 13px;
  font-weight: 650;
}
@media (max-width: 760px) {
  .employee-order-handle {
    align-self: end;
  }
  .hour-picker {
    max-width: 264px;
  }
  .hour-picker button,
  .hour-picker .remove-button {
    flex: 0 0 58px;
    width: 58px;
    max-width: 58px;
  }
}

/* 12.7 – Munkatárs törlése külön, jobb szélső vezérlő; egységes szélességek. */
.employee-settings {
  grid-template-columns: 42px minmax(170px, 1fr) 76px max-content 42px;
  align-items: end;
  column-gap: 12px;
}
.employee-order-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  justify-self: center;
  text-align: center;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
}
.color-field {
  width: 76px;
  min-width: 76px;
}
.color-field input[type="color"] {
  width: 76px;
}
.hours-field {
  min-width: 0;
}
.hour-picker {
  width: max-content;
  max-width: none;
  gap: 7px;
}
.hour-picker button {
  box-sizing: border-box;
  flex: 0 0 76px;
  width: 76px;
  min-width: 76px;
  max-width: 76px;
}
.employee-settings > .remove-button {
  grid-column: 5;
  grid-row: 1;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  justify-self: end;
  align-self: end;
}
@media (max-width: 760px) {
  .employee-settings {
    grid-template-columns: 42px 76px minmax(0, 1fr) 42px;
    align-items: end;
    gap: 8px;
  }
  .name-field {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .employee-order-handle {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }
  .color-field {
    grid-column: 2;
    grid-row: 2;
    width: 76px;
  }
  .hours-field {
    grid-column: 1 / 4;
    grid-row: 3;
  }
  .employee-settings > .remove-button {
    grid-column: 4;
    grid-row: 3;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    align-self: end;
  }
  .hour-picker {
    width: max-content;
    max-width: none;
    gap: 7px;
  }
  .hour-picker button {
    flex: 0 0 76px;
    width: 76px;
    min-width: 76px;
    max-width: 76px;
  }
}

/* 12.8 – A munkatársi beállítások arányainak újraelosztása a képernyőkép alapján. */
@media (min-width: 761px) {
  .employee-settings {
    display: grid;
    grid-template-columns: 42px 24% 10% 30% 42px;
    justify-content: space-between;
    align-items: end;
    column-gap: 10px;
  }
  .name-field,
  .color-field,
  .hours-field {
    min-width: 0;
    width: 100%;
  }
  .name-field input {
    width: 100%;
    box-sizing: border-box;
  }
  .color-field {
    width: 100%;
    min-width: 0;
  }
  .color-field input[type="color"] {
    width: 100%;
    box-sizing: border-box;
  }
  .hours-field {
    width: 100%;
  }
  .hour-picker {
    display: flex;
    width: 100%;
    max-width: none;
    gap: 7px;
  }
  .hour-picker button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }
  .employee-settings > .remove-button {
    grid-column: 5;
    justify-self: end;
  }
}
@media (max-width: 760px) {
  .employee-settings {
    grid-template-columns: 42px 76px minmax(0, 1fr) 42px;
  }
  .name-field,
  .color-field,
  .hours-field {
    width: 100%;
    min-width: 0;
  }
  .color-field input[type="color"] { width: 76px; }
  .hour-picker { width: 100%; }
  .hour-picker button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}


/* 12.9 – Munkatársak heti összesítőből történő napra húzása és heti óraszámuk. */
.summary-timeline-table .summary-day-name { width: 210px; min-width: 210px; vertical-align: top; }
.summary-employee-chips { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 12px; padding: 2px 0; }
.summary-employee-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 5px;
  flex: 0 1 auto; width: auto; min-width: 120px; max-width: 220px; padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--employee-color) 45%, #fff);
  border-left: 4px solid var(--employee-color); border-radius: 6px;
  background: color-mix(in srgb, var(--employee-color) 12%, #fff);
  color: #263342; font: inherit; font-size: 10px; line-height: 1.2; text-align: left;
  cursor: grab; user-select: none;
}
.summary-employee-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.summary-employee-chip small { flex: 0 0 auto; color: #536171; font-size: 9px; font-weight: 700; white-space: nowrap; }
.summary-employee-chip.dragging { opacity: .45; }
.summary-employee-chip-dimmed { opacity: .42; filter: saturate(.55); }
.summary-employee-chip-selected { outline: 2px solid color-mix(in srgb, var(--employee-color) 75%, #17212b); outline-offset: 1px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--employee-color) 14%, transparent); }
.summary-timeline-cell.summary-employee-drop-over { outline: 2px dashed #6d99c3; outline-offset: -3px; background: #f2f7fc; }
@media (max-width: 760px) {
  .summary-timeline-table .summary-day-col, .summary-timeline-table .summary-day-name { width: 190px; min-width: 190px; }
  .summary-employee-chips { gap: 5px; }
  .summary-employee-chip { min-width: 105px; max-width: 48%; font-size: 9px; }
}

/* 12.11 – A heti összesítőből a műszaksáv a munkatársi chip-sorra húzva eltávolítható az adott napról. */
.summary-employee-chips.summary-remove-drop-over {
  outline: 2px dashed #c45b5b;
  outline-offset: 4px;
  border-radius: 7px;
  background: #fff5f5;
}

/* 12.12 – A műszaksáv a saját napi táblázatsorából kihúzva törlődik. */
.summary-table tr.summary-remove-drop-over > td {
  background: #fff3f3 !important;
  box-shadow: inset 0 2px 0 #c45b5b, inset 0 -2px 0 #c45b5b;
}

/* 12.13 – Delete the selected day's shift directly from the time editor. */
.shift-edit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shift-edit-actions-spacer { flex: 1 1 auto; }
.shift-delete { background: #fff1f1; color: #b42318; border: 1px solid #e7b5b2; border-radius: 8px; padding: 9px 12px; font: inherit; cursor: pointer; }
.shift-delete:hover { background: #ffe2e0; }

/* 12.14 – Beosztások szerinti csoportosítás a heti összesítőben. */
.employee-settings {
  grid-template-columns: 42px minmax(170px, 1.1fr) minmax(145px, .85fr) 76px minmax(220px, 1.35fr) 42px;
  align-items: end;
}
.position-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  align-self: center;
}
.position-field label {
  display: flex;
  align-items: center;
  min-height: 20px;
  font-size: 13px;
  font-weight: 650;
}
.position-field select {
  width: 100%;
  min-width: 0;
  height: 43px;
  padding: 0 10px;
  border: 1px solid #cfd7e0;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
}
.summary-employee-chips { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.summary-employee-role-row { display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: center; gap: 9px; }
.summary-employee-role-label { color: #536171; font-size: 11px; font-weight: 750; }
.summary-employee-role-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.summary-employee-chip {
  box-sizing: border-box;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--employee-color) 72%, #fff);
  border-left: 4px solid var(--employee-color);
  border-radius: 6px;
  background: color-mix(in srgb, var(--employee-color) 22%, #fff);
  line-height: 1;
}
.summary-work-bar { border-left: 4px solid var(--employee-color); }
.summary-day-lanes { gap: 5px; }
.summary-role-group { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 9px; align-items: stretch; padding: 3px 0; border-bottom: 1px solid #edf0f4; }
.summary-role-group:last-child { border-bottom: 0; }
.summary-role-label { display: flex; align-items: center; color: #536171; font-size: 10px; font-weight: 800; }
.summary-role-lanes { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
@media (max-width: 760px) {
  .employee-settings {
    grid-template-columns: 42px minmax(0, 1fr) 76px 42px;
    align-items: end;
    gap: 8px;
  }
  .employee-settings > .name-field { grid-column: 1 / -1; grid-row: 1; }
  .employee-settings > .employee-order-handle { grid-column: 1; grid-row: 2; }
  .employee-settings > .position-field { grid-column: 2; grid-row: 2; width: 100%; }
  .employee-settings > .color-field { grid-column: 3; grid-row: 2; width: 76px; min-width: 76px; }
  .employee-settings > .hours-field { grid-column: 1 / 4; grid-row: 3; }
  .employee-settings > .remove-button { grid-column: 4; grid-row: 3; }
  .summary-employee-role-row, .summary-role-group { grid-template-columns: 78px minmax(0, 1fr); gap: 6px; }
  .summary-employee-role-label, .summary-role-label { font-size: 9px; }
  .summary-employee-chip { min-width: 0; max-width: 100%; font-size: 9px; }
}


/* 12.15 – Employee settings grid: prevent the remove control from overlapping weekly hours. */
@media (min-width: 761px) {
  .employee-settings {
    grid-template-columns: 36px minmax(160px, 1.15fr) minmax(135px, .9fr) 64px minmax(250px, 1.2fr) 38px;
    column-gap: 10px;
    align-items: end;
  }
  .employee-settings > .employee-order-handle { grid-column: 1; min-width: 0; width: 36px; }
  .employee-settings > .name-field { grid-column: 2; min-width: 0; width: 100%; }
  .employee-settings > .position-field { grid-column: 3; min-width: 0; width: 100%; }
  .employee-settings > .color-field { grid-column: 4; min-width: 0; width: 64px; }
  .employee-settings > .color-field input[type="color"] { width: 64px; }
  .employee-settings > .hours-field { grid-column: 5; min-width: 0; width: 100%; }
  .employee-settings > .remove-button { grid-column: 6; grid-row: 1; width: 38px; min-width: 38px; max-width: 38px; justify-self: end; }
}

/* 12.16 – A Beosztás legördülő menüje a korábbi szélesség fele, a névmezővel azonos kerekítéssel. */
.position-field select {
  width: 50%;
  border-radius: 10px;
}

/* 12.17 – A heti összesítő három külön oszlopa: nap, pozíció, időtengely. */
.summary-timeline-table .summary-day-col,
.summary-timeline-table .summary-day-name {
  width: 112px;
  min-width: 112px;
}
.summary-timeline-table .summary-position-col,
.summary-timeline-table .summary-position-cell {
  width: 128px;
  min-width: 128px;
  text-align: left;
  background: #f8fafc;
}
.summary-timeline-table .summary-position-col { padding: 8px 10px; }
.summary-timeline-table .summary-position-cell {
  padding: 5px 10px !important;
  vertical-align: top;
}
.summary-position-cell .summary-role-label {
  box-sizing: border-box;
  min-height: 40px;
  padding: 3px 0;
  border-bottom: 1px solid #edf0f4;
}
.summary-position-cell .summary-role-label:last-child { border-bottom: 0; }
.summary-day-lanes { gap: 5px; }
.summary-role-group {
  display: block;
  padding: 3px 0;
  border-bottom: 1px solid #edf0f4;
}
.summary-role-group:last-child { border-bottom: 0; }
.summary-role-lanes { gap: 3px; }
@media (max-width: 760px) {
  .summary-timeline-table .summary-day-col,
  .summary-timeline-table .summary-day-name { width: 100px; min-width: 100px; }
  .summary-timeline-table .summary-position-col,
  .summary-timeline-table .summary-position-cell { width: 112px; min-width: 112px; }
}

/* 12.19 – Employee card proportions: narrower name, double-width color field, equal edge controls. */
@media (min-width: 761px) {
  .employee-settings {
    grid-template-columns: 40px minmax(120px, .8fr) minmax(135px, .9fr) 128px minmax(250px, 1.2fr) 40px;
    column-gap: 10px;
  }
  .employee-settings > .employee-order-handle,
  .employee-settings > .remove-button {
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
  }
  .employee-settings > .color-field,
  .employee-settings > .color-field input[type="color"] {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
  }
}


/* 12.20 – Heti szerződéses órakeret és beosztott órák különbsége. */
.summary-hour-balance { font-variant-numeric: tabular-nums; }
.summary-hour-balance[data-balance="positive"], .summary-work-bar[data-balance="positive"] { color: #087443; }
.summary-hour-balance[data-balance="negative"], .summary-work-bar[data-balance="negative"] { color: #c12f2f; }
.summary-hour-balance[data-balance="zero"], .summary-work-bar[data-balance="zero"] { color: #536171; }
.summary-work-bar { font-variant-numeric: tabular-nums; }

/* 12.22 – Weekly balance colors: surplus red, remaining hours green. */
.summary-hour-balance[data-balance="positive"],
.summary-work-bar[data-balance="positive"] { color: #c12f2f; }
.summary-hour-balance[data-balance="negative"],
.summary-work-bar[data-balance="negative"] { color: #087443; }

/* 12.22 – Remove native select rendering so Safari applies the same 10px corners as name-field. */
.position-field select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23687586' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  overflow: hidden;
}
.position-field select:focus {
  outline: none;
  border-color: #79a6ce;
  box-shadow: 0 0 0 3px #e7f1fb;
}

/* 13.0 – language selector */
.topbar-actions { display:flex; align-items:center; gap:10px; }
.language-switch select, .login-card select { min-height:40px; border:1px solid #d5dce5; border-radius:10px; padding:0 34px 0 12px; background:#fff; color:#243247; font:inherit; }


/* 13.1 – Flag-based language navigation and independently colored shift-bar text. */
.language-flags { display:flex; align-items:center; gap:6px; }
.language-option { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid #d5dce5; border-radius:10px; background:#fff; text-decoration:none; font-size:21px; line-height:1; transition:border-color .15s, background .15s, transform .15s; }
.language-option:hover { background:#f3f7fb; border-color:#9aafc5; transform:translateY(-1px); }
.language-option.active { border:2px solid #477db2; background:#edf5fc; }
.summary-work-bar { color:inherit; }
.summary-work-bar-name, .summary-work-bar-times { color:color-mix(in srgb, var(--employee-color) 82%, #17212b); }
.summary-work-bar-name { font-weight:800; }
.summary-work-bar-times { font-weight:700; }
.summary-work-bar .summary-hour-balance { font-weight:800; }
.summary-work-bar .summary-hour-balance[data-balance="positive"] { color:#c12f2f; }
.summary-work-bar .summary-hour-balance[data-balance="negative"] { color:#087443; }
.summary-work-bar .summary-hour-balance[data-balance="zero"] { color:#536171; }
@media (max-width:760px) { .language-option { width:34px; height:34px; font-size:19px; } }


/* 13.2 – Login alignment and consistent summary typography/spacing. */
.login-card { text-align: center; }
.login-card form { text-align: left; }
.login-card form button { justify-self: stretch; }
.login-card .language-flags { justify-content: center; }
.summary-work-bar, .summary-employee-chip { font-size: 10px; font-weight: 750; }
.summary-work-bar-name { font-size: inherit; font-weight: 750; }
.summary-work-bar-times { font-size: inherit; font-weight: 750; }
.summary-work-bar .summary-hour-balance { font-size: 9px; font-weight: 750; }
.summary-work-bar-separator { display: inline-block; margin: 0 5px; }

/* 13.3 – Separators inherit the employee name color, never the balance color. */
.summary-work-bar-separator {
  color: color-mix(in srgb, var(--employee-color) 82%, #17212b);
}

/* 13.4 – Div-alapú heti összesítő, pozíció checkboxok, heti előzmények és 35 órás keret. */
.summary-timeline-table { display:block; width:100%; min-width:980px; }
.summary-timeline-head,.summary-timeline-body { display:block; }
.summary-timeline-row { display:grid; grid-template-columns:112px 128px minmax(720px,1fr); align-items:stretch; }
.summary-timeline-header-row { position:sticky; top:0; z-index:4; }
.summary-timeline-header-row > div { font-weight:700; }
.summary-timeline-row > .summary-day-name { display:flex; flex-direction:column; justify-content:flex-start; gap:3px; padding:9px 10px; border-bottom:1px solid var(--line); background:#fff; }
.summary-timeline-row > .summary-position-cell { padding:5px 10px; background:#f8fafc; border-bottom:1px solid var(--line); }
.summary-timeline-row > .summary-timeline-cell { position:relative; min-width:0; border-bottom:1px solid var(--line); }
.summary-timeline-header-row .summary-day-col,.summary-timeline-header-row .summary-position-col { padding:10px; background:#f5f7fa; }
.summary-timeline-header-row .summary-hours-head { min-width:0; padding:8px 6px; background:#f5f7fa; }
.position-options { display:flex; flex-direction:column; gap:4px; padding:6px 8px; border:1px solid #cfd7e0; border-radius:10px; background:#fff; }
.position-option { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; white-space:nowrap; }
.position-option input { margin:0; accent-color:#1f3448; }
.employee-nav-buttons { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.schedule-history-buttons { display:flex; gap:6px; }
.schedule-history-buttons button { padding:6px 10px; font-size:11px; }
.schedule-history-buttons button:disabled { opacity:.35; cursor:not-allowed; }
.hour-picker button { flex:1 1 0; }
@media(max-width:760px) {
 .summary-timeline-table { min-width:900px; }
 .summary-timeline-row { grid-template-columns:100px 112px minmax(688px,1fr); }
 .employee-nav-buttons { flex-wrap:wrap; }
 .schedule-history-buttons { width:100%; }
 .schedule-history-buttons button { flex:1; }
 .position-options { flex-direction:row; flex-wrap:wrap; }
}

/* 13.5 – palette types, summary history controls and role row alignment */
.day[data-kind="O"] { background:#fff1d8; color:#936018; border-color:#efd49f; }
.day[data-kind="V"] { background:#eee7fb; color:#6847a5; border-color:#d9c9f2; }
.swatch.other { background:#e4a83f; }
.swatch.vacation { background:#8d6bc4; }
.summary-history-buttons { justify-content:flex-end; margin:0 0 8px; }
.summary-position-cell { display:flex; flex-direction:column; }
.summary-position-cell .summary-role-label { flex:0 0 auto; min-height:40px; box-sizing:border-box; align-self:stretch; display:flex; align-items:center; }


/* 13.7 – A pozíciócímkék és a hozzájuk tartozó idővonal-csoportok azonos border-box magasságúak. */
.summary-position-cell .summary-role-label { box-sizing: border-box; min-height: 0; }
.summary-role-group { box-sizing: border-box; }
.summary-position-cell { row-gap: 5px; }

/* 13.8 – A műszakszerkesztő pozíció-selectje azonos külső magasságú a time inputokkal. */
.shift-edit-form select[name="position"] {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #cfd7e0;
  border-radius: 8px;
  background: #fff;
  color: #17212b;
  font: inherit;
  font-size: 15px;
}
.shift-edit-form input[type="time"] {
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
}

/* Summary timeline: lifted drag-and-drop feedback */
.summary-work-bar.summary-bar-lifted { opacity: .28; transform: scale(.985); }
.summary-drag-ghost { opacity: .94 !important; transform: scale(1.035) rotate(-1deg); box-shadow: 0 12px 28px #17212b45, 0 3px 8px #17212b30 !important; border-width: 2px !important; cursor: grabbing !important; transition: none !important; }
.summary-timeline-row.summary-drop-target > .summary-timeline-cell { background: #dceeff; outline: 2px dashed #4388c7; outline-offset: -3px; border-radius: 8px; }


/* 13.10 – A pozícióválasztó és a befejezési idő mező azonos lekerekítést kap. */
.shift-edit-form select[name="position"],
.shift-edit-form input[name="end"][type="time"] {
  border-radius: 8px !important;
}

/* 13.17 – Munkatársi aktív/inaktív állapot */
.employee-settings {
  grid-template-columns: 30px minmax(150px, 1.2fr) minmax(105px, .7fr) minmax(150px, .9fr) 48px minmax(220px, 1.3fr) 42px;
}
.employee-status-field { display:flex; flex-direction:column; gap:5px; min-width:0; align-self:center; }
.employee-status-field > label { display:flex; align-items:center; min-height:20px; font-size:12px; color:var(--muted); }
.employee-status-picker { display:flex; gap:4px; }
.employee-status-picker button { flex:1; min-width:0; min-height:38px; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:#f1f3f5; color:#586474; font-weight:650; cursor:pointer; }
.employee-status-picker .employee-status-active.selected { background:#dff3e5; border-color:#8ac99c; color:#176b35; }
.employee-status-picker .employee-status-inactive.selected { background:#eceff2; border-color:#aab2bb; color:#4e5965; }
.employee-card-inactive { opacity:.48; filter:saturate(.55); }
.employee-card-inactive:focus-within { opacity:.72; }
@media(max-width:900px) {
  .employee-settings { grid-template-columns:30px minmax(0,1fr) minmax(100px,.7fr) minmax(145px,.9fr) 48px 42px; }
  .employee-settings > .name-field { grid-column:2 / 4; }
  .employee-settings > .position-field { grid-column:4; }
  .employee-settings > .employee-status-field { grid-column:2 / 4; }
  .employee-settings > .color-field { grid-column:4; }
  .employee-settings > .hours-field { grid-column:2 / 5; }
  .employee-settings > .remove-button { grid-column:6; grid-row:1 / span 2; }
}
@media(max-width:600px) {
  .employee-settings { grid-template-columns:30px minmax(0,1fr) 42px; }
  .employee-settings > .name-field { grid-column:2 / 4; }
  .employee-settings > .position-field { grid-column:2; }
  .employee-settings > .employee-status-field { grid-column:2 / 4; }
  .employee-settings > .color-field { grid-column:3; }
  .employee-settings > .hours-field { grid-column:2 / 4; }
  .employee-settings > .remove-button { grid-column:3; grid-row:2; }
}


/* 13.18 – Employee settings: stabil, jól olvasható, törésbiztos elrendezés. */
.employee-settings {
  display: grid;
  grid-template-columns: 30px minmax(185px, 1.35fr) minmax(100px, .72fr)
                         minmax(155px, .95fr) 108px minmax(250px, 1.55fr) 42px;
  grid-template-areas: "handle name position status color hours remove";
  align-items: end;
  column-gap: 10px;
  row-gap: 12px;
}
.employee-settings > .employee-order-handle { grid-area: handle; }
.employee-settings > .name-field { grid-area: name; min-width:0; }
.employee-settings > .position-field { grid-area: position; min-width:0; }
.employee-settings > .employee-status-field { grid-area: status; min-width:0; }
.employee-settings > .color-field { grid-area: color; min-width:0; }
.employee-settings > .hours-field { grid-area: hours; min-width:0; }
.employee-settings > .remove-button { grid-area: remove; align-self:center; }

.employee-settings .name-field > label,
.employee-settings .position-field > label,
.employee-settings .employee-status-field > label,
.employee-settings .color-field > label,
.employee-settings .hours-field > label {
  display:flex;
  align-items:center;
  min-height:20px;
  margin:0;
  font-size:13px;
  line-height:1.25;
  font-weight:650;
  color:#273444;
}
.employee-status-field { gap:7px; }
.employee-status-picker {
  display:flex;
  align-items:stretch;
  gap:5px;
  min-width:0;
}
.employee-status-picker button {
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:43px;
  min-height:43px;
  padding:0 5px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  border-radius:9px;
}
.employee-settings .hour-picker { width:100%; min-width:0; gap:5px; }
.employee-settings .hour-picker button { min-width:0; padding:0 4px; font-size:12px; white-space:nowrap; }
.employee-settings .color-field input[type="color"] { width:100%; min-width:0; }

@media (max-width: 1050px) {
  .employee-settings {
    grid-template-columns:30px minmax(170px,1.4fr) minmax(100px,.8fr) minmax(150px,1fr) 42px;
    grid-template-areas:
      "handle name name name remove"
      ". position status color ."
      ". hours hours hours .";
    align-items:end;
  }
  .employee-settings > .remove-button { grid-area:remove; grid-row:1; }
}
@media (max-width: 600px) {
  .employee-settings {
    grid-template-columns:30px minmax(0,1fr) 42px;
    grid-template-areas:
      "name name name"
      "handle position remove"
      ". status ."
      ". color ."
      ". hours .";
    gap:10px 8px;
    align-items:end;
  }
  .employee-settings > .name-field { grid-area:name; }
  .employee-settings > .employee-order-handle { grid-area:handle; }
  .employee-settings > .position-field { grid-area:position; }
  .employee-settings > .employee-status-field { grid-area:status; }
  .employee-settings > .color-field { grid-area:color; }
  .employee-settings > .hours-field { grid-area:hours; }
  .employee-settings > .remove-button { grid-area:remove; grid-row:2; }
  .employee-status-picker { max-width:260px; }
}


/* 13.19 – Employee settings: finomhangolt szélességek és gombigazítás. */
.employee-settings {
  grid-template-columns: 34px minmax(150px, 1.05fr) minmax(126px, .78fr)
                         minmax(128px, .88fr) 76px minmax(250px, 1.45fr) 36px;
  column-gap: 9px;
  align-items: end;
}
.employee-settings > .name-field { min-width:0; }
.employee-settings > .name-field input { width:100%; min-width:0; }
.employee-settings > .position-field { min-width:126px; }
.employee-settings > .position-field select,
.employee-settings > .position-field .field-content {
  width:100%;
  min-width:126px;
  max-width:100%;
  box-sizing:border-box;
}
.employee-settings > .employee-status-field { min-width:0; }
.employee-settings .employee-status-picker { width:100%; gap:4px; }
.employee-settings .employee-status-picker button {
  flex:1 1 0;
  min-width:0;
  padding-left:3px;
  padding-right:3px;
}
.employee-settings > .color-field { width:76px; min-width:76px; }
.employee-settings > .color-field input[type="color"] {
  width:76px;
  min-width:76px;
  max-width:76px;
}
.employee-settings > .employee-order-handle,
.employee-settings > .remove-button {
  box-sizing:border-box;
  width:36px;
  min-width:36px;
  height:42px;
  min-height:42px;
  max-height:42px;
}
.employee-settings > .remove-button {
  align-self:end;
  margin:0;
}

/* Közepes nézetben is maradjon hely a teljes pozíciónévnek. */
@media (max-width: 1050px) {
  .employee-settings {
    grid-template-columns:34px minmax(145px,1fr) minmax(126px,.85fr)
                           minmax(125px,.9fr) 76px minmax(220px,1.3fr) 36px;
    column-gap:7px;
  }
}
@media (max-width: 900px) {
  .employee-settings {
    grid-template-columns:34px minmax(0,1.15fr) minmax(126px,.9fr) 76px 36px;
    grid-template-areas:
      "handle name name name remove"
      ". position status color ."
      ". hours hours hours .";
    column-gap:8px;
    row-gap:10px;
  }
  .employee-settings > .name-field { grid-area:name; }
  .employee-settings > .position-field { grid-area:position; }
  .employee-settings > .employee-status-field { grid-area:status; }
  .employee-settings > .color-field { grid-area:color; }
  .employee-settings > .hours-field { grid-area:hours; }
  .employee-settings > .remove-button { grid-area:remove; grid-row:1; }
}
@media (max-width: 600px) {
  .employee-settings {
    grid-template-columns:36px minmax(0,1fr) 76px 36px;
    grid-template-areas:
      "name name name name"
      "handle position position remove"
      ". status status ."
      ". color color ."
      ". hours hours .";
  }
  .employee-settings > .employee-order-handle { grid-area:handle; }
  .employee-settings > .remove-button { grid-area:remove; grid-row:2; }
  .employee-settings > .position-field { min-width:126px; }
}


/* 13.20 – Négyzetes vezérlőelemek az employee-settings sorban. */
.employee-settings > .employee-order-handle,
.employee-settings > .remove-button,
.employee-settings > .color-field input[type="color"] {
  box-sizing:border-box;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  aspect-ratio:1 / 1;
}
.employee-settings > .color-field {
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
}
.employee-settings > .color-field input[type="color"] {
  padding:0;
}
.employee-settings > .remove-button {
  align-self:end !important;
  justify-self:end;
  margin:0;
}
@media (max-width:1050px) {
  .employee-settings {
    grid-template-columns:42px minmax(145px,1.05fr) minmax(126px,.78fr)
                           minmax(128px,.88fr) 42px minmax(250px,1.45fr) 42px;
  }
}
@media (max-width:900px) {
  .employee-settings {
    grid-template-columns:42px minmax(0,1.15fr) minmax(126px,.9fr) 42px 42px;
  }
}
@media (max-width:600px) {
  .employee-settings {
    grid-template-columns:42px minmax(0,1fr) 42px 42px;
  }
}

/* A műszaktípusok palettáján egységes, jól felismerhető ikonok. */
.employee-palette .swatch{font-size:19px;line-height:1;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI Emoji',sans-serif}

/* A műszaksáv két szélén az időtartam egérrel módosítható. */
.summary-work-bar { touch-action: none; }
.summary-work-bar::before,
.summary-work-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  z-index: 2;
  cursor: ew-resize;
}
.summary-work-bar::before { left: 0; }
.summary-work-bar::after { right: 0; }


/* Két nézet egy oldalon: Heti összesítő és Tervezési időszak fülek. */
.planner-tabs {
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin: 0 0 12px;
  border-bottom:1px solid var(--border, #d9dee7);
}
.planner-tab {
  appearance:none;
  border:1px solid var(--border, #d9dee7);
  border-bottom:0;
  border-radius:9px 9px 0 0;
  background:var(--surface-2, #f2f4f7);
  color:var(--muted, #667085);
  padding:11px 18px;
  min-height:42px;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  margin-bottom:-1px;
}
.planner-tab.active {
  color:var(--text, #182230);
  background:var(--panel, #fff);
  border-color:var(--border, #d9dee7);
  box-shadow:0 -2px 0 var(--accent, #328f9b) inset;
}
.planner-tab-panel[hidden] { display:none !important; }
.planner-tab-panel { min-width:0; }
@media (max-width:600px) {
  .planner-tabs { gap:4px; }
  .planner-tab { flex:1; padding:10px 8px; font-size:13px; }
}


/* 14.3.1 – A füles panelek bal felső sarka szögletes, bal alsó sarka lekerekített. */
.planner-tab-panel.weekly-summary-panel,
.weekly-summary-panel.planner-tab-panel.active,
.planner-tab-panel.active {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 18px !important;
}
.planner-tabs {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}


/* 14.3 – automatikus tervezés és előnézet */
.auto-planner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;margin:14px 0;background:var(--surface-2,#f4f6f8);border:1px solid var(--border,#d9dee7);border-radius:10px}
.auto-planner-toolbar>div{display:flex;flex-direction:column;gap:3px}.auto-planner-toolbar .muted{font-size:12px}
.auto-plan-button{min-height:42px;padding:9px 16px;border:0;border-radius:8px;background:var(--accent,#328f9b);color:#fff;font:inherit;font-weight:650;cursor:pointer;white-space:nowrap}
.auto-plan-dialog{width:min(680px,calc(100% - 28px));max-height:85vh;overflow:auto;border:1px solid var(--border,#d9dee7);border-radius:14px;padding:22px;background:var(--panel,#fff);color:var(--text,#182230)}
.auto-plan-dialog::backdrop{background:rgba(15,23,42,.48)}.auto-plan-dialog h2{margin:0 0 10px}.auto-plan-table{width:100%;border-collapse:collapse;margin:12px 0}.auto-plan-table th,.auto-plan-table td{text-align:left;padding:8px;border-bottom:1px solid var(--border,#d9dee7)}
.auto-plan-issues{padding:12px;background:var(--surface-2,#f4f6f8);border-radius:8px;margin:12px 0}.auto-plan-issues ul{margin:6px 0 12px;padding-left:20px}.auto-plan-issues li{margin:5px 0}.auto-plan-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.auto-plan-actions button{min-height:40px;padding:8px 14px;border:1px solid var(--border,#d9dee7);border-radius:8px;background:var(--surface-2,#f4f6f8);color:inherit;font:inherit;cursor:pointer}.auto-plan-actions button:last-child{background:var(--accent,#328f9b);color:white;border-color:transparent}.auto-plan-actions button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){.auto-planner-toolbar{align-items:stretch;flex-direction:column}.auto-plan-button{width:100%}.auto-plan-dialog{padding:16px}}

/* 14.4.3 – heti beosztás-tervezés és törlés gombcsoport */
.auto-plan-button-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.auto-plan-delete-button{border:1px solid var(--danger,#b54747);color:var(--danger,#b54747);background:transparent;border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer}
.auto-plan-delete-button:hover{background:rgba(181,71,71,.08)}
.auto-plan-delete-button[hidden]{display:none!important}
@media(max-width:640px){.auto-plan-button-group{width:100%}.auto-plan-button-group button{flex:1}}

/* 14.4.6: Munkatársak fejléc és egysoros, azonos magasságú gombok */
.employees-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-direction:row}
.auto-planner-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap}
.auto-plan-button-group{display:flex;align-items:stretch;justify-content:flex-end;gap:10px;flex-wrap:nowrap;white-space:nowrap}
.auto-plan-button-group button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:42px;min-height:42px;padding:0 16px;line-height:1.2;white-space:nowrap}
.auto-plan-delete-button[hidden]{display:none!important}
@media(max-width:640px){
 .auto-planner-toolbar{align-items:flex-start;flex-direction:column}
 .auto-plan-button-group{width:100%;display:flex;flex-wrap:nowrap;gap:8px}
 .auto-plan-button-group button{flex:1 1 0;min-width:0;padding:0 9px;font-size:12px}
 .employees-calendar-heading{align-items:flex-start;flex-direction:column}
}

/* 14.4.7 – a toolbar általános div-szabálya ne rendezze oszlopba a gombcsoportot */
.auto-planner-toolbar>.auto-plan-button-group{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-end;
  width:auto!important;
  min-width:max-content;
  gap:10px;
}
.auto-planner-toolbar>.auto-plan-button-group>button{
  display:inline-flex!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:42px!important;
  min-height:42px!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:640px){
  .auto-planner-toolbar>.auto-plan-button-group{
    width:100%!important;
    min-width:0;
    justify-content:stretch;
  }
  .auto-planner-toolbar>.auto-plan-button-group>button{
    flex:1 1 0!important;
    min-width:0;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

/* 14.4.9 – munkatársak aktív/inaktív csoportosítása */
.inactive-employees-section{margin-top:18px;padding:12px 14px;border:1px solid var(--border,#d9dee7);border-radius:10px;background:var(--surface-2,#f7f8fa)}
.inactive-employees-section>summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;gap:8px}
.inactive-employees-section>summary::-webkit-details-marker{display:none}
.inactive-employees-section>summary:before{content:'▸';font-size:14px;transition:transform .15s ease}
.inactive-employees-section[open]>summary:before{transform:rotate(90deg)}
.inactive-employees-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.employee-card-inactive{opacity:.48;filter:grayscale(.45)}
.employee-card-inactive:focus-within{opacity:.8}

/* 14.4.11 – automatikus, hét napján végigvezető generálási folyamat */
.auto-plan-progress-dialog{width:min(440px,calc(100vw - 32px));text-align:center;padding:26px 24px}
.auto-plan-progress-dialog h2{margin:0 0 18px;font-size:20px}
.auto-plan-progress-day{font-size:18px;font-weight:750;margin:8px 0 18px}
.auto-plan-progress-track{height:14px;width:100%;overflow:hidden;border-radius:999px;background:var(--surface-2,#e8edf1);border:1px solid var(--border,#d9dee7)}
.auto-plan-progress-bar{height:100%;width:0;border-radius:inherit;background:var(--accent,#328f9b);transition:width .08s linear}
.auto-plan-progress-percent{display:block;font-size:24px;margin-top:12px;font-variant-numeric:tabular-nums}
.auto-plan-progress-hint{margin:14px 0 0;color:var(--muted,#687586);font-size:12px;line-height:1.5}

/* 14.4.12 – egységes, középre rendezett tervezési és törlési párbeszédablak */
.auto-plan-dialog,.auto-plan-progress-dialog{width:min(460px,calc(100vw - 32px));max-width:460px;box-sizing:border-box;margin:auto;text-align:center}
.auto-plan-dialog h2,.auto-plan-progress-dialog h2{text-align:center}
.auto-plan-dialog>p,.auto-plan-progress-dialog>p{text-align:center}
.auto-plan-dialog .auto-plan-actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:22px}
.auto-plan-dialog .auto-plan-delete-option{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto;padding:10px 14px;border:1px solid var(--border,#d9dee7);border-radius:10px;max-width:260px;cursor:pointer}
.auto-plan-dialog .auto-plan-delete-option input[type=checkbox]{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:0 0 19px;border:1.7px solid #87939f;border-radius:5px;background:#fff;display:grid;place-content:center;cursor:pointer;margin:0}
.auto-plan-dialog .auto-plan-delete-option input[type=checkbox]:checked{background:var(--accent,#328f9b);border-color:var(--accent,#328f9b)}
.auto-plan-dialog .auto-plan-delete-option input[type=checkbox]:checked:after{content:'✓';color:white;font-size:14px;font-weight:800;line-height:1}
.auto-plan-dialog .auto-plan-delete-option input[type=checkbox]:focus-visible{outline:3px solid rgba(50,143,155,.25);outline-offset:2px}
.auto-plan-progress-dialog{min-height:220px;display:block}
.auto-plan-progress-dialog[open]{display:block}

/* 14.4.12 – footer tartalmának középre rendezése */
.footer-row{display:flex;align-items:center;justify-content:center;text-align:center;gap:22px;flex-wrap:wrap}
.footer-row>.footer-save,.footer-row>.footer-meta{display:flex;align-items:center;justify-content:center;text-align:center;gap:6px;flex-wrap:wrap}
.footer-row .footer-save #updatedAt{width:100%;text-align:center}

/* 14.4.13 – beosztás-törlési opciók tartalomhoz igazított szélessége */
.auto-plan-dialog .auto-plan-delete-option{
  width:max-content;
  max-width:calc(100% - 24px);
  justify-content:flex-start;
  text-align:left;
  margin:12px auto;
  box-sizing:border-box;
}
.auto-plan-dialog .auto-plan-delete-option > *{text-align:left;}
/* A hidden attribútumot a toolbar flex szabálya sem írhatja felül. */
.auto-planner-toolbar[hidden]{display:none!important;}
/* A heti összesítő napjai különálló, de vizuálisan összeérő táblák. */
.summary-table-wrap > .summary-timeline-table + .summary-timeline-table{margin-top:-1px;}
.summary-timeline-table{border-spacing:0;}
.summary-timeline-table .summary-hours-head{
  display:flex;
  align-items:center;
  min-height:38px;
  box-sizing:border-box;
}
.summary-timeline-table .summary-time-scale{width:100%;align-self:center;}

/* 14.4.14 – heti beosztás műveleti gombok és egységes párbeszédablak */
.auto-plan-button,
.auto-plan-delete-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.auto-plan-button-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:1.08em;
}
.auto-plan-delete-options{
  display:grid;
  grid-auto-rows:auto;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  justify-items:stretch;
}
.auto-plan-dialog .auto-plan-delete-option{
  width:100%;
  max-width:none;
  min-width:0;
  box-sizing:border-box;
  justify-content:flex-start;
  margin:6px 0;
}
.auto-plan-progress-dialog{
  border:1px solid var(--border,#d9dee7)!important;
  outline:none!important;
  box-shadow:none!important;
  appearance:none;
  -webkit-appearance:none;
  background:var(--panel,#fff)!important;
  color:var(--text,#182230)!important;
}
.auto-plan-progress-dialog:focus,
.auto-plan-progress-dialog:focus-visible{
  outline:none!important;
}

/* 14.4.22 – simított, színátmenetes napi létszámgörbe a műszaksávok alatt */
.summary-hourly-load{
  display:block;
  width:100%;
  height:42px;
  min-width:0;
  padding:0;
  margin:3px 0 0;
  overflow:hidden;
}
.summary-hourly-load svg{
  display:block;
  width:100%;
  height:42px;
  overflow:visible;
}
.summary-role-group .summary-role-lanes{gap:3px;}

/* 14.4.23 – a taller, fully rounded continuous hourly staffing profile */
.summary-hourly-load{
  height:40px;
  overflow:hidden;
  border-radius:0;
  clip-path:none;
}
.summary-hourly-load svg{
  display:block;
  width:100%;
  height:100%;
}

/* 14.4.35 – prevent flex/grid constraints from shrinking the hourly curve */
.summary-role-lanes > .summary-hourly-load{
  display:block !important;
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  width:100%;
  overflow:hidden;
}
.summary-role-lanes > .summary-hourly-load > svg{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  flex:0 0 auto !important;
}

/* 14.4.37 – compact hourly curve strip; scale the curve inside 42px */
.summary-role-lanes > .summary-hourly-load{
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  flex:0 0 42px !important;
  flex-shrink:0 !important;
  margin-top:3px;
}
.summary-role-lanes > .summary-hourly-load > svg{
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
}

/* 14.4.39 – weekly staffing curve visibility toggle, matching planner-dialog checkbox */
.summary-curve-toggle{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:max-content;
  max-width:calc(100% - 24px);
  box-sizing:border-box;
  margin:0;
  padding:10px 14px;
  border:1px solid var(--border,#d9dee7);
  border-radius:10px;
  cursor:pointer;
  white-space:nowrap;
  font-size:13px;
  font-weight:600;
  color:var(--text,#182230);
}
.summary-curve-toggle input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  width:19px;
  height:19px;
  flex:0 0 19px;
  border:1.7px solid #87939f;
  border-radius:5px;
  background:#fff;
  display:grid;
  place-content:center;
  cursor:pointer;
  margin:0;
}
.summary-curve-toggle input[type=checkbox]:checked{
  background:var(--accent,#328f9b);
  border-color:var(--accent,#328f9b);
}
.summary-curve-toggle input[type=checkbox]:checked:after{
  content:'✓';
  color:white;
  font-size:14px;
  font-weight:800;
  line-height:1;
}
.summary-curve-toggle input[type=checkbox]:focus-visible{
  outline:3px solid rgba(50,143,155,.25);
  outline-offset:2px;
}
@media(max-width:760px){
  .calendar-heading .summary-curve-toggle{margin:0 0 8px;max-width:100%}
  .calendar-heading{align-items:flex-start}
}

/* 14.4.40 – clickable role filters styled consistently with employee chips */
.summary-employee-role-button{
  appearance:none;
  -webkit-appearance:none;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:30px;
  padding:6px 8px;
  border:1px solid var(--border,#d9dee7);
  border-left:4px solid var(--accent,#328f9b);
  border-radius:7px;
  background:#f4f7fa;
  color:var(--text,#182230);
  font:inherit;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease;
}
.summary-employee-role-button.summary-employee-role-selected{
  background:#e4f2f3;
  border-color:var(--accent,#328f9b);
  border-left-width:4px;
  opacity:1;
}
.summary-employee-role-button.summary-employee-role-dimmed{
  opacity:.42;
}
.summary-employee-role-button:focus-visible{
  outline:2px solid rgba(50,143,155,.35);
  outline-offset:2px;
}

/* 14.4.41 – aggregate staffing curve row */
.summary-role-label-aggregate{
  font-weight:800;
  background:rgba(76,175,112,.08);
}
.calendar-heading .summary-curve-toggle{
  flex:0 0 auto;
}


/* 14.4.42 – weekly summary header controls aligned with week navigation */
.summary-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-left:auto;
}
.summary-curve-toggles{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.summary-header-actions .summary-curve-toggle,
.summary-header-actions .nav-buttons button{
  height:36px;
  min-height:36px;
  box-sizing:border-box;
}
.summary-header-actions .summary-curve-toggle{
  padding:0 10px;
  gap:8px;
  font-size:12px;
  max-width:none;
}
.summary-header-actions .summary-curve-toggle input[type=checkbox]{
  width:16px;
  height:16px;
  flex-basis:16px;
}
.summary-header-actions .nav-buttons{
  flex-wrap:nowrap;
}
.summary-header-actions .nav-buttons button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  white-space:nowrap;
}
@media(max-width:1100px){
  .summary-header-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
}
@media(max-width:760px){
  .summary-header-actions{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
    gap:8px;
    flex-direction:column;
    align-items:stretch;
  }
  .summary-curve-toggles{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .summary-header-actions .summary-curve-toggle{
    margin:0;
    max-width:100%;
  }
  .summary-header-actions .nav-buttons{
    width:100%;
  }
  .summary-header-actions .nav-buttons button{
    flex:1;
    padding:0 5px;
  }
}