:root {
  color-scheme: light;
  --ink: #193c35;
  --muted: #667570;
  --green: #1d6555;
  --green-soft: #e7f1ea;
  --lime: #e1efb6;
  --paper: #fff;
  --bg: #f5f6f2;
  --line: #dfe5dd;
  --red: #a53d3d;
  --red-soft: #fceceb;
  --amber: #815b18;
  --amber-soft: #fff3d9;
  --blue: #385f9b;
  --blue-soft: #ecf2fc;
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  transition:
    background 0.16s,
    border-color 0.16s;
}
button:hover {
  background: #f0f5ed;
  border-color: #9fb5a6;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.primary {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
button.primary:hover {
  background: #174f44;
}
button.secondary {
  background: var(--lime);
  border-color: var(--lime);
}
button.ghost {
  border-color: transparent;
  background: transparent;
}
button.danger {
  color: var(--red);
}
button.small {
  padding: 5px 10px;
  font-size: 13px;
}
a {
  color: var(--green);
  text-underline-offset: 3px;
}
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
:focus-visible {
  outline: 3px solid #499bb2;
  outline-offset: 3px;
}
input,
select,
textarea {
  border: 1px solid #c9d3c9;
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 12px;
  min-height: 44px;
  max-width: 100%;
  width: 100%;
  font-size: 16px;
}
input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  accent-color: var(--green);
}
input[type="number"] {
  min-width: 70px;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  direction: ltr;
}
label {
  display: grid;
  gap: 6px;
  font-size: 14px;
}
label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
legend {
  margin-bottom: 8px;
  font-weight: bold;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 30px;
  letter-spacing: -0.7px;
  font-weight: 600;
  line-height: 1.3;
}
h2 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
}
h3 {
  font-size: 16px;
  font-weight: 600;
}
small,
.muted {
  color: var(--muted);
}
small {
  font-size: 12px;
}
.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  letter-spacing: -0.5px;
  font-weight: 600;
}
.logo-mark {
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--green);
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.logo-mark .icon {
  width: 25px;
  height: 25px;
}
.shell {
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: #153f38;
  color: #eaf3e6;
  padding: 32px 18px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.sidebar small {
  color: #b5c9bf;
}
.sidebar nav {
  display: grid;
  gap: 8px;
}
.sidebar nav button {
  color: #c9dcd3;
  justify-content: flex-start;
  background: transparent;
  border-color: transparent;
  padding: 13px 15px;
  text-align: right;
}
.sidebar nav button.active {
  color: #153f38;
  background: #e1efb6;
}
.sidebar nav button:hover:not(.active) {
  background: #26564b;
}
.sidebar-foot {
  margin-top: auto;
  display: grid;
  gap: 14px;
  padding: 12px;
  font-size: 13px;
}
.sidebar-foot button {
  color: #d7e8df;
}
.main {
  min-width: 0;
}
.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 18px 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.topbar-title {
  font-size: 13px;
  color: var(--muted);
}
.topbar-title strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}
.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #e5ede4;
  border-radius: 50%;
  font-size: 13px;
  font-weight: bold;
}
.user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.content {
  max-width: 1560px;
  margin: auto;
  padding: 32px 34px 50px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 25px;
}
.page-heading p {
  color: var(--muted);
  margin-top: 6px;
}
.eyebrow {
  text-transform: uppercase;
  color: var(--green);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.9px;
  margin-bottom: 8px;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.period-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.period-controls select {
  width: auto;
  min-width: 220px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 7px;
  background: #f0f2ee;
  color: var(--muted);
  white-space: nowrap;
}
.badge.green {
  background: var(--green-soft);
  color: var(--green);
}
.badge.amber {
  background: var(--amber-soft);
  color: var(--amber);
}
.badge.red {
  background: var(--red-soft);
  color: var(--red);
}
.badge.blue {
  background: var(--blue-soft);
  color: var(--blue);
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.metric {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
.metric small {
  display: block;
  font-size: 13px;
}
.metric strong {
  display: block;
  font-size: 33px;
  font-weight: 500;
  margin: 6px 0;
  line-height: 1.1;
}
.metric p {
  font-size: 12px;
  color: var(--muted);
}
.metric.featured {
  background: #eaf1d8;
  border-color: #e0e9ca;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 22px;
}
.card.pad {
  padding: 24px;
}
.card-head {
  padding: 19px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.card-head p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}
.table-wrap {
  overflow: auto;
  width: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: right;
}
th {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: #fafbf8;
  padding: 12px 18px;
  white-space: nowrap;
}
td {
  padding: 15px 18px;
  border-top: 1px solid #edf0e9;
  font-size: 14px;
  vertical-align: middle;
}
td strong {
  font-weight: 600;
}
td .sub {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
tr:hover td {
  background: #fcfdfa;
}
.person-cell {
  display: flex;
  gap: 11px;
  align-items: center;
}
.person-cell .avatar {
  background: #edf0e5;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.person-cell .name {
  white-space: nowrap;
}
.progress {
  height: 6px;
  border-radius: 20px;
  background: #e9eee6;
  margin-top: 13px;
  overflow: hidden;
}
.progress span {
  display: block;
  background: #57826c;
  height: 100%;
}
.banner {
  padding: 14px 18px;
  background: var(--green-soft);
  border: 1px solid #d3e3d7;
  border-radius: 11px;
  font-size: 14px;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.banner.warn {
  background: var(--amber-soft);
  border-color: #eadab5;
  color: var(--amber);
}
.banner.error {
  background: var(--red-soft);
  color: var(--red);
  border-color: #edc6c1;
}
.banner .icon {
  flex-shrink: 0;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 22px;
}
.stack {
  display: grid;
  gap: 16px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full {
  grid-column: 1/-1;
}
.fieldset-title {
  font-size: 15px;
  margin: 10px 0;
}
.form-footer {
  margin-top: 25px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.empty {
  text-align: center;
  padding: 60px 25px;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.empty .icon {
  width: 36px;
  height: 36px;
  color: #86a28e;
}
.empty p {
  color: var(--muted);
  max-width: 460px;
}
.divider {
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #ecf0e7;
  flex-wrap: wrap;
}
.segmented button {
  border-color: transparent;
  background: transparent;
  border-radius: 7px;
  min-height: 38px;
  font-size: 13px;
  padding: 7px 14px;
}
.segmented button[aria-pressed="true"] {
  background: white;
  box-shadow: 0 1px 3px #193c3515;
}
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child {
  border-bottom: 0;
}
.list-row small {
  display: block;
}
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
}
.week-table {
  table-layout: fixed;
  direction: ltr;
  min-width: 880px;
}
.week-table th,
.week-table td {
  direction: rtl;
  text-align: right;
  padding: 12px;
  border-inline-end: 1px solid var(--line);
  vertical-align: top;
}
.week-table th {
  width: calc((100% - 85px) / 6);
  text-align: center;
  font-size: 14px;
}
.week-table th:first-child {
  width: 85px;
}
.week-table th small {
  display: block;
  font-size: 12px;
}
.week-table td {
  height: 190px;
}
.week-table td.time {
  width: 85px;
  background: #fafbf8;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.shift-person {
  background: #edf4ed;
  border-right: 3px solid #54846a;
  border-radius: 6px;
  padding: 7px 9px;
  margin: 7px 0;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
.shift-person small {
  display: block;
  font-size: 11px;
}
.shift-person button {
  padding: 2px;
  min-height: 28px;
  width: 28px;
  border: 0;
  background: transparent;
}
.shift-person.locked {
  border-color: #4766a1;
  background: #eef2f9;
}
.shift-person.invalid {
  border-color: var(--red);
  background: var(--red-soft);
}
.slot-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.slot-heading .badge {
  font-size: 10px;
  padding: 2px 5px;
}
.slot-add {
  width: 100%;
  margin-top: 8px;
  border-style: dashed;
  font-size: 12px;
  min-height: 36px;
  padding: 5px;
}
.gap {
  font-size: 12px;
  color: var(--red);
  padding: 7px 4px;
  background: #fdf1ee;
  border-radius: 5px;
  margin: 6px 0;
}
.closed-slot {
  text-align: center;
  color: #9ca89f;
  font-size: 13px;
  padding-top: 30px;
}
.week-title {
  font-size: 15px;
  margin: 20px 0 10px;
}
.fairness td {
  font-variant-numeric: tabular-nums;
}
.notice-inline {
  padding: 13px 20px;
  font-size: 12px;
  color: var(--muted);
  background: #fafbf7;
  border-top: 1px solid var(--line);
}
.requirement-table {
  min-width: 660px;
}
.requirement-table input {
  width: 72px;
  font-size: 14px;
  padding: 7px;
}
.requirement-table th,
.requirement-table td {
  padding: 10px 14px;
}
.message-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: #f6f8f2;
  padding: 15px;
  border-radius: 9px;
  font-size: 14px;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at top, #e7eecf, transparent 60%);
}
.login-card {
  width: 100%;
  max-width: 440px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 38px;
}
.login-card h1 {
  font-size: 27px;
  margin-top: 28px;
}
.login-card p {
  color: var(--muted);
  margin: 10px 0 24px;
}
.login-card button {
  width: 100%;
  margin-top: 18px;
}
.loading {
  display: grid;
  place-items: center;
  min-height: 70vh;
  color: var(--muted);
}
dialog {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 25px 80px #173e3830;
  padding: 0;
  width: min(650px, calc(100% - 30px));
  max-height: 90vh;
  color: var(--ink);
  background: var(--paper);
}
dialog::backdrop {
  background: #112d2855;
  backdrop-filter: blur(3px);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
  padding: 18px 24px;
}
.dialog-content {
  padding: 24px;
}
.dialog-head button {
  padding: 6px;
  width: 40px;
  min-height: 40px;
}
.error-text {
  color: var(--red);
  font-size: 14px;
  margin: 12px 0;
}
.help {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.busy {
  pointer-events: none;
  opacity: 0.65;
}
#toast:not(:empty) {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #173f35;
  color: white;
  box-shadow: 0 4px 25px #153f3830;
  padding: 13px 23px;
  border-radius: 12px;
  max-width: calc(100% - 30px);
  text-align: center;
  font-size: 14px;
}
.employee {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 45px;
}
.employee-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  gap: 18px;
}
.employee-head .logo {
  font-size: 21px;
}
.employee-head small {
  display: block;
}
.employee-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin: 25px 0;
}
.employee-top p {
  color: var(--muted);
  margin-top: 10px;
}
.employee-top h1 {
  font-size: 32px;
}
.employee .period-controls {
  margin: 16px 0;
}
.employee .period-controls select {
  max-width: 100%;
}
.employee-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 16px;
}
.preference-table {
  direction: ltr;
  table-layout: fixed;
  min-width: 700px;
}
.preference-table th,
.preference-table td {
  direction: rtl;
  text-align: center;
  padding: 10px 7px;
  border-left: 1px solid #edf0e9;
}
.preference-table th:first-child {
  width: 90px;
}
.preference-table th button {
  border: 0;
  background: transparent;
  padding: 6px;
  display: block;
  width: 100%;
  font-weight: bold;
}
.preference-table th small {
  display: block;
  margin-top: 2px;
}
.preference-table .time {
  font-size: 13px;
  font-weight: bold;
  color: var(--ink);
}
.preference-table .time small {
  font-weight: normal;
  display: block;
  direction: ltr;
  margin-top: 5px;
}
.pref {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 85px;
  border-color: #dce5d8;
  background: #f8faf5;
  font-size: 14px;
  padding: 10px 4px;
  border-radius: 9px;
}
.pref small {
  font-size: 11px;
  font-weight: normal;
  line-height: 1.3;
}
.pref[data-state="prefer"] {
  background: #e8f1d6;
  border-color: #bdd391;
  color: #3c592c;
}
.pref[data-state="blocked"] {
  background: #fbece9;
  border-color: #e5bfba;
  color: #98453e;
}
.pref[data-state="avoid"] {
  background: #fff6df;
  border-color: #e6d29d;
  color: #7c6127;
}
.pref[data-state="leave"] {
  background: #eaf0fd;
  border-color: #c3cfe9;
  color: #49638e;
}
.pref.selected {
  outline: 3px solid #397b64;
  outline-offset: 1px;
}
.employee-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 25px;
  flex-wrap: wrap;
}
.employee-footer p {
  font-size: 13px;
  color: var(--muted);
}
.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0;
  font-size: 12px;
  color: var(--muted);
}
.legend span {
  display: flex;
  gap: 7px;
  align-items: center;
}
.legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.legend .prefer {
  background: #a8c77e;
}
.legend .blocked {
  background: #d49083;
}
.legend .avoid {
  background: #d5b458;
}
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.choice {
  display: flex;
  justify-content: flex-start;
  text-align: right;
  padding: 18px;
  border-radius: 12px;
  gap: 14px;
}
.choice strong,
.choice small {
  display: block;
}
.choice .icon {
  width: 23px;
  height: 23px;
}
.choice[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green-soft);
}
.choice-list {
  display: grid;
  gap: 12px;
}
.date-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.date-choices label {
  border: 1px solid var(--line);
  padding: 14px 10px;
  border-radius: 10px;
}
.date-choices label:has(:checked) {
  background: var(--green-soft);
  border-color: var(--green);
}
.wizard-step {
  font-size: 12px;
  color: var(--green);
  margin-bottom: 10px;
}
.wizard p {
  margin-top: 8px;
  margin-bottom: 22px;
  color: var(--muted);
}
.wizard .form-footer {
  margin-top: 25px;
}
.review-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.review-line small {
  display: block;
}
.employee.vertical {
  max-width: 720px;
}
.vertical-board .v-head,
.vertical-board .v-row {
  display: grid;
  grid-template-columns: 85px 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
}
.vertical-board .v-head {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.vertical-board .v-row {
  border-top: 1px solid var(--line);
}
.vertical-board .v-row > button:first-child {
  border: 0;
  background: transparent;
  display: block;
}
.vertical-board .v-row .pref {
  min-height: 62px;
}
.mobile-hint {
  display: none;
}
.published-label {
  font-size: 13px;
  color: var(--green);
  margin: 10px 0;
}
.review-summary {
  padding: 17px;
  background: #edf3e6;
  border-radius: 12px;
  margin-bottom: 20px;
}
.link-field {
  direction: ltr;
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf6;
  margin: 15px 0;
}
.changes-list {
  max-height: 350px;
  overflow: auto;
}
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.toggle-direction {
  font-size: 12px;
}
.scroll-hint {
  display: none;
}
.print-only {
  display: none;
}
.table-wrap:has(.preference-table),
.table-wrap:has(.week-table[dir="ltr"]) {
  direction: ltr;
}
.table-wrap:has(.week-table[dir="rtl"]) {
  direction: rtl;
}
.metric.featured strong {
  direction: ltr;
  text-align: right;
}
@media (min-width: 1600px) {
  .content {
    padding-top: 44px;
  }
}
@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 185px minmax(0, 1fr);
  }
  .sidebar {
    padding: 24px 12px;
  }
  .content {
    padding: 25px 22px;
  }
  .topbar {
    padding: 17px 22px;
  }
  .metrics {
    gap: 10px;
  }
  .metric {
    padding: 16px;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .scroll-hint {
    display: block;
    font-size: 12px;
    color: var(--muted);
    padding: 8px 20px;
  }
  .actions button {
    padding: 9px 12px;
  }
}
@media (max-width: 760px) {
  h1 {
    font-size: 25px;
  }
  .shell {
    display: block;
  }
  .sidebar {
    padding: 15px 15px 8px;
    gap: 14px;
  }
  .sidebar .logo {
    font-size: 20px;
  }
  .sidebar .logo-mark {
    width: 32px;
    height: 32px;
  }
  .sidebar > small,
  .sidebar-foot {
    display: none;
  }
  .sidebar nav {
    display: flex;
    overflow: auto;
    gap: 3px;
  }
  .sidebar nav button {
    white-space: nowrap;
    font-size: 12px;
    padding: 9px 12px;
    min-height: 42px;
  }
  .sidebar nav button .icon {
    width: 17px;
    height: 17px;
  }
  .topbar {
    padding: 12px 16px;
  }
  .content {
    padding: 24px 16px;
  }
  .page-heading {
    flex-direction: column;
    gap: 16px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metric strong {
    font-size: 27px;
  }
  .metric {
    padding: 15px;
  }
  .card-head {
    padding: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .card.pad {
    padding: 18px;
  }
  .period-controls select {
    flex: 1;
    min-width: 0;
  }
  .period-controls {
    gap: 8px;
  }
  .banner {
    align-items: flex-start;
    font-size: 13px;
    flex-wrap: wrap;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .full {
    grid-column: auto;
  }
  .employee {
    padding: 0 14px 35px;
  }
  .employee-head {
    padding: 19px 0;
    margin-bottom: 16px;
  }
  .employee-head .logo {
    font-size: 18px;
  }
  .employee-head .logo-mark {
    width: 33px;
    height: 33px;
  }
  .employee-head .user {
    font-size: 12px;
  }
  .employee-top {
    flex-direction: column;
    gap: 14px;
  }
  .employee-top h1 {
    font-size: 27px;
  }
  .employee-tools {
    gap: 14px;
  }
  .employee-tools .segmented {
    width: 100%;
  }
  .employee-tools .segmented button {
    flex: 1;
    font-size: 12px;
    padding: 7px;
  }
  .employee-footer {
    gap: 16px;
  }
  .employee-footer .actions {
    width: 100%;
  }
  .employee-footer .actions button {
    flex: 1;
  }
  .mobile-hint {
    display: block;
    font-size: 12px;
    color: var(--muted);
    padding: 8px 14px;
  }
  .choices {
    grid-template-columns: 1fr;
  }
  .date-choices {
    grid-template-columns: 1fr 1fr;
  }
  .dialog-head,
  .dialog-content {
    padding: 18px;
  }
  .table-wrap table:not(.preference-table):not(.week-table) {
    min-width: 620px;
  }
  .user .hide-mobile {
    display: none;
  }
  .login-card {
    padding: 27px;
  }
  .vertical-board .v-head,
  .vertical-board .v-row {
    grid-template-columns: 64px 1fr 1fr;
    gap: 7px;
  }
  .vertical-board .pref {
    font-size: 13px;
  }
  .vertical-board .pref small {
    font-size: 11px;
  }
  .week-table {
    min-width: 920px;
  }
  .employee .page-heading {
    margin-top: 25px;
  }
  .status-bar {
    align-items: flex-start;
  }
  .status-bar .actions {
    justify-content: flex-end;
  }
  .legend {
    gap: 11px;
  }
}
@media print {
  body {
    background: white;
    color: black;
  }
  .sidebar,
  .topbar,
  .no-print,
  button,
  .employee-tools,
  .employee-footer,
  #toast {
    display: none !important;
  }
  .shell {
    display: block;
  }
  .content,
  .employee {
    padding: 0;
    max-width: none;
  }
  .card {
    break-inside: avoid;
    border: 1px solid #aaa;
  }
  .table-wrap {
    overflow: visible;
  }
  .week-table {
    min-width: 0;
    font-size: 10px;
  }
  .week-table th,
  .week-table td {
    padding: 5px;
  }
  .week-table td {
    height: auto;
  }
  .shift-person {
    font-size: 10px;
    padding: 4px;
  }
  .print-only {
    display: block;
  }
  .metrics {
    display: none;
  }
  .banner {
    display: none;
  }
  .employee-head {
    padding-top: 0;
  }
  .slot-add {
    display: none;
  }
  .page-heading h1 {
    font-size: 22px;
  }
  @page {
    size: A4 landscape;
    margin: 10mm;
  }
}

/* Staffing ranges: text accompanies color, and only managers see coverage. */
.requirement-help {
  padding: 0 18px;
}
.requirement-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.requirement-range label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.requirement-range input {
  width: 66px;
  min-height: 40px;
  text-align: center;
}
.staffing-coverage {
  display: grid;
  gap: 4px;
  margin: 8px 0;
}
.staffing-role {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  font-size: 11px;
  padding: 5px 7px;
  border-radius: 6px;
  background: #edf4ed;
}
.staffing-role small {
  grid-column: 1 / -1;
  font-size: 10px;
}
.staffing-role.shortage {
  color: #9b2933;
  background: #fff0f0;
}
.staffing-role.excess,
.staffing-warning {
  color: #854600;
  background: #fff3d6;
}
.shift-person.overstaffed {
  border-color: #c77909;
  background: #fff6e3;
}
.shift-person.invalid {
  border-color: var(--red);
  background: var(--red-soft);
}
.excess-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #854600;
  font-size: 10px;
  font-weight: 600;
}

.sidebar-foot > a {
  justify-content: flex-start;
}
.preview-banner {
  display: grid;
  gap: 10px;
  border: 1px solid #c9ad57;
  background: #fff8e5;
  color: #5c4917;
  margin: 20px 0;
}
.employee-head {
  flex-wrap: wrap;
  gap: 12px;
}

/* Hebrew weekly calendars start on the right, including horizontal scroll. */
.week-table[dir="rtl"], .preference-table[dir="rtl"],
.table-wrap:has(.preference-table[dir="rtl"]) { direction: rtl; }
.week-table th, .week-table td.time, .preference-table th,
.preference-table td, .preference-table button, .pref { text-align: right; }
.employee-head { flex-wrap: wrap; }
.recurring-table .pref { min-height: 76px; }

.preference-table .pref { align-items: flex-start; padding-inline: 12px; }

.manager-recurring-request { min-width: 0; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 12px; }
.manager-recurring-request h3 { margin: 0 0 4px; }
.manager-recurring-table .pref { border: 1px solid; border-color: #dce5d8; min-height: 86px; }
.manager-recurring-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 16px 0 6px; }
.manager-recurring-footer > small { color: var(--muted); }

/* Daily context and personal duty times stay readable in the RTL week calendar. */
.day-notes { display:grid; gap:5px; margin-top:8px; text-align:right; }
.day-note { display:block; padding:6px 8px; border-radius:8px; font-size:12px; font-weight:500; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.day-note.specialist { background:#e8f0ff; color:#244d88; }
.day-note.general { background:#edf2f1; color:#304e48; }
.day-note.birthday { background:#fff0f5; color:#852c58; }
.day-note-add { margin-top:7px; font-size:11px; }
.duty-badge { display:block; margin-top:5px; padding:3px 6px; border-radius:6px; font-size:12px; font-weight:700; }
.duty-badge.opening { background:#fff1c7; color:#725000; }
.duty-badge.closing { background:#ece8ff; color:#443875; }
.candidate-detail { background:#eef6f3; border:1px solid #b8d5c9; border-radius:10px; padding:12px; line-height:1.8; }
.shift-person.overstaffed { background:#fff0d9; border:2px solid #d28a25; }
.duty-fields { margin-top:8px; }
@media print { .day-note-add { display:none; } .day-note,.duty-badge { print-color-adjust:exact; } }

.birthday-picker summary { cursor:pointer; padding:12px; border:1px solid var(--line); border-radius:9px; font-weight:600; min-height:44px; }
.birthday-picker[open] summary { margin-bottom:12px; }

.practice-banner { align-items:flex-start; background:#fff5df; border-color:#d8b56c; margin-bottom:20px; flex-wrap:wrap; }
.practice-banner p { margin:6px 0 0; font-size:13px; max-width:760px; }

/* Independent, anonymous workforce planning workspace. */
.capacity-summaries{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:20px 0}
.capacity-summary{padding:20px}.capacity-summary h2{font-size:18px;margin:0 0 16px}.capacity-summary p{font-size:13px;color:var(--muted,#627079)}
.capacity-numbers{display:flex;gap:24px}.capacity-numbers div{display:flex;flex-direction:column;gap:3px}.capacity-numbers strong{font-size:32px;line-height:1.1;color:#17635c}.capacity-numbers span{font-size:12px}
.capacity-config{display:grid;grid-template-columns:1fr 1fr;gap:10px}.capacity-config label{font-size:12px}.capacity-config button{grid-column:1/-1;justify-self:start}.capacity-feedback{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:12px}
.capacity-missing{color:#a02e37;font-size:12px}.capacity-extra{color:#985817;font-size:12px}
.capacity-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}.capacity-calendar{min-width:0;overflow:hidden}.capacity-board-title{padding:18px 20px}.capacity-board-title h2{margin:0 0 6px;font-size:19px}.capacity-board-title p{margin:0;font-size:13px;color:#627079}
.capacity-scroll{overflow:auto;max-height:80vh}.capacity-table{width:100%;min-width:920px;table-layout:fixed;border-collapse:collapse;text-align:right}.capacity-table th,.capacity-table td{border:1px solid #e0e7e4;padding:7px;vertical-align:top}.capacity-table thead th{background:#eef5f3;text-align:center;padding:14px 6px;position:sticky;top:0;z-index:1}.capacity-table th:first-child{width:84px}.capacity-table tbody th small{display:block;margin-top:8px;font-weight:400;font-size:11px}.capacity-closed{background:#f4f6f5;color:#6e7775;text-align:center}
.capacity-slot{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:9px 6px;margin-bottom:8px;border-radius:9px;border:1px solid #dde6e2;min-height:110px}.capacity-slot>strong{font-size:12px}.capacity-slot>small{font-size:11px;color:#5d7069}.capacity-slot.has-gap{border-style:dashed;border-color:#dcb2b4}.capacity-slot.has-extra{background:#fffbf3;border-color:#dca155}
.capacity-tag{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--worker-color);border-inline-start-width:4px;background:white;border-radius:7px;padding:5px 7px;font-size:12px;line-height:1.4;color:#253d36;min-width:0;overflow-wrap:anywhere}.capacity-dot{width:8px;height:8px;border-radius:50%;background:var(--worker-color);flex-shrink:0}.capacity-tag.is-extra{outline:2px solid #d99332;background:#fff3dc}.capacity-remove{border:0!important;background:transparent!important;padding:0!important;min-width:25px!important;min-height:28px!important;margin-inline-start:auto;color:#435850!important}.capacity-add{justify-content:center;width:100%;font-size:12px!important;margin-top:auto}.capacity-legend{padding:16px}.capacity-legend h2{font-size:17px;margin:0 0 10px}.capacity-legend h3{font-size:14px}.capacity-legend p{font-size:12px;color:#627079}.capacity-legend-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}.capacity-legend-row small{white-space:nowrap;font-size:12px}
@media(max-width:1100px){.capacity-layout{grid-template-columns:minmax(0,1fr)}.capacity-legend{display:flex;flex-wrap:wrap;gap:12px 24px}.capacity-legend>h2,.capacity-legend>p{width:100%;margin:0}.capacity-legend section{min-width:170px}.capacity-layout .capacity-scroll{max-height:none}}
@media(max-width:600px){.capacity-summaries{grid-template-columns:minmax(0,1fr)}.capacity-summary{padding:16px}.capacity-remove{min-height:40px!important;min-width:30px!important}.capacity-calendar .capacity-scroll{padding-bottom:8px}}

.roster-workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start;margin-bottom:20px}.roster-calendar{min-width:0}.roster-staff-list{padding:16px;position:sticky;top:16px}.roster-staff-list h2{font-size:17px;margin:0 0 8px}.roster-staff-list>p{font-size:12px;color:#61756f}.staff-count-row{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:right;margin:6px 0;padding:10px 8px!important;font-size:12px!important}.staff-count-row span{flex:1}.staff-count-row strong{white-space:nowrap;color:#17635c}.assignment-name{border:0!important;background:transparent!important;padding:2px 0!important;min-height:32px!important;font-size:13px!important;text-align:right;justify-content:flex-start!important;text-decoration:underline;text-decoration-color:#b4ccc5;text-underline-offset:4px;color:inherit!important}.capacity-worker-name{border:0!important;background:transparent!important;padding:2px 0!important;min-height:30px!important;min-width:0;font-size:12px!important;text-align:right;justify-content:flex-start!important;color:inherit!important;overflow-wrap:anywhere}.capacity-layout{grid-template-columns:230px minmax(0,1fr)}.capacity-calendar{grid-column:2;grid-row:1}.capacity-legend{grid-column:1;grid-row:1}.capacity-summary h2{display:flex;justify-content:space-between;gap:8px;align-items:center}.reception-presets{margin:16px 0}.reception-table td{min-width:180px;vertical-align:top}.reception-table select{margin-bottom:8px}.reception-table .requirement-range input{width:80px}.reception-table [disabled]{opacity:.45}
@media(max-width:1100px){.roster-workspace,.capacity-layout{grid-template-columns:minmax(0,1fr)}.roster-staff-list{position:static;display:flex;flex-wrap:wrap;gap:6px}.roster-staff-list h2,.roster-staff-list>p{width:100%;margin:0}.staff-count-row{width:calc(50% - 6px)}.capacity-calendar{grid-column:1;grid-row:2}.capacity-legend{grid-column:1;grid-row:1}.capacity-legend section{min-width:160px}.roster-calendar{grid-row:2}.reception-presets button{flex:1}}
@media(max-width:600px){.staff-count-row{width:100%}.capacity-worker-name{min-height:40px!important}.assignment-name{min-height:40px!important}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.shift-person:has(.assignment-name){flex-direction:column;align-items:stretch}.shift-person:has(.assignment-name)>div:last-child{display:flex;justify-content:flex-start;gap:3px}.shift-person .assignment-name{width:100%;font-weight:650}
/* Keep accessible labels inside the horizontally scrolling reception table. */
[data-reception-slot]{position:relative}
.roster-role-group{display:flex;flex-direction:column;gap:6px;margin:12px 0;padding-top:8px;border-top:1px solid #e3e9e2}.roster-role-group .shift-person{margin:0}.roster-role-group .staffing-role{margin-bottom:2px;flex-wrap:wrap}.vacant-shift{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:72px;padding:12px 8px!important;border:1px dashed #b28b16!important;border-radius:9px;background:#fff5cb!important;color:#725800!important;text-align:center;white-space:normal}.vacant-shift small{font-size:11px;color:#80692b}.vacant-shift:hover{background:#ffec9e!important}.vacant-shift strong{font-size:12px}.vacant-shift:focus-visible{outline:3px solid #675b28;outline-offset:2px}

.roster-role-heading{font-size:11px;font-weight:600;color:var(--muted);margin:0 0 2px;padding:0;background:none}

.scheduling-logic h2{margin-top:28px;font-size:19px}.scheduling-logic p,.scheduling-logic li{line-height:1.85}.scheduling-logic ul{padding-inline-start:22px}.scheduling-logic details{margin:16px 0}.scheduling-logic .table-wrap{max-height:340px}
dialog:has(.scheduling-logic){width:min(900px,calc(100vw - 24px))}

.manager-mobile-footer{display:none}
@media(max-width:760px){.manager-mobile-footer{display:flex;justify-content:center;padding:16px 16px 28px;border-top:1px solid var(--line)}.manager-mobile-footer button{width:100%;max-width:420px}}

/* Scheduling explanation: semantic flow with a main path and labeled branches. */
.logic-flow{padding:20px;border:1px solid #cdded6;border-radius:16px;background:#f5f9f6;margin-bottom:28px}
.scheduling-logic .logic-flow h2{margin:0 0 8px}.logic-flow-intro{color:#4d6359;font-size:13px}.logic-flow a{color:#205f4b;text-decoration:underline;text-underline-offset:3px}.logic-flow a:focus-visible{outline:3px solid #517b64;outline-offset:3px}
.logic-flow-steps{list-style:none;padding:0;margin:24px 0 0}.logic-flow-step{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;padding-bottom:30px}.logic-flow-step:not(:last-child)::after{content:'↓';position:absolute;bottom:0;inset-inline-start:26px;font-size:23px;color:#527e69;line-height:30px}.logic-flow-step:last-child{padding-bottom:0}
.logic-flow-node{display:flex;align-items:flex-start;gap:12px;border:1px solid #c6d9cf;background:white;border-radius:12px;padding:14px;box-shadow:0 2px 5px #173c2408}.logic-flow-number{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#e1eee7;color:#28553f;font-weight:700}.logic-flow-node h3{font-size:15px;margin:2px 0 5px}.scheduling-logic .logic-flow-node p,.scheduling-logic .logic-flow-branch,.scheduling-logic .logic-flow-manual p{font-size:13px;line-height:1.7;margin:0}.logic-flow-branch{align-self:center;border-inline-start:3px solid #bd922c;padding:9px 12px;background:#fff6df;border-radius:8px;color:#725319}.logic-flow-branch strong,.logic-flow-branch span{display:block}.logic-flow-branch span{margin-top:4px}.logic-flow-step:not(:has(.logic-flow-branch)) .logic-flow-node{grid-column:1/-1}.logic-flow-step.decision .logic-flow-node{border-color:#7fa899;border-inline-start-width:4px}.logic-flow-scores{display:block;margin:6px 0;background:#f1f5f2;border-radius:6px;padding:7px;color:#294d3d}.logic-flow-step.finish .logic-flow-node{background:#e2f0e7;border-color:#9fbea9}.logic-flow-manual{margin-top:20px;padding:14px;border:1px dashed #789887;border-radius:10px}.logic-flow-manual strong{display:block;margin-bottom:5px}.scheduling-logic h2[id]{scroll-margin-top:14px}
@media(max-width:600px){.logic-flow{padding:12px}.logic-flow-step{grid-template-columns:minmax(0,1fr);gap:8px}.logic-flow-branch{margin-inline-start:22px}.logic-flow-node{padding:12px;gap:9px}.logic-flow-node h3{font-size:14px}}

dialog:has(.candidate-pool){width:min(1500px,calc(100vw - 24px))}.candidate-pool p{line-height:1.7}.pool-toolbar{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:16px 0}.pool-toolbar label{min-width:180px;flex:1}.pool-table-scroll{overflow:auto;max-height:60vh;border:1px solid #dbe5df;border-radius:12px}.pool-table{width:100%;border-collapse:collapse}.pool-table th,.pool-table td{vertical-align:top;padding:12px;border:1px solid #e3e9e5}.pool-table td{min-width:230px}.pool-table thead th{position:sticky;top:0;background:#eef5f0;z-index:1}.pool-table tbody th{min-width:85px;background:#f6f9f6}.pool-range{font-size:12px;margin:0 0 8px}.pool-assigned{display:grid;gap:4px;font-size:13px;background:#e7f1e9;border-radius:8px;padding:9px;margin-bottom:10px}.pool-options summary{padding:10px;background:#edf3f8;border:1px solid #cbdce9;border-radius:8px;color:#234c69;cursor:pointer;font-weight:650}.pool-options li{padding:10px 0;border-bottom:1px solid #e1e6e2}.pool-options li>span,.pool-options li>small{display:block;font-size:12px;margin-top:3px}.pool-options ol{padding-inline-start:22px}.pool-excluded{margin-top:12px;font-size:12px;color:#665a3c}.pool-excluded summary{cursor:pointer}.pool-excluded ul{padding-inline-start:18px}.pool-excluded li{margin:8px 0}@media(max-width:760px){.manager-mobile-footer{flex-direction:column;align-items:center;gap:10px}.pool-toolbar label{min-width:120px}.pool-table-scroll{max-height:65vh}}

.shift-person .assignment-lock{width:auto!important;gap:4px;font-size:11px;padding:4px 6px}.assignment-lock[aria-pressed="true"]{background:#e1eee7;color:#23523e;border-color:#9ab7a5}

dialog:has(#assignment-form){width:min(960px,calc(100vw - 24px))}.assignment-role-buttons{display:flex;gap:10px;flex-wrap:wrap}.assignment-role-buttons button{flex:1;min-height:48px;font-weight:700}.assignment-role-buttons button[aria-pressed="true"]{background:#235643;color:white;border-color:#235643}.assignment-candidate-buttons{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;direction:rtl}.assignment-candidate{display:flex;flex-direction:column;align-items:stretch;text-align:right;white-space:normal;padding:12px;gap:6px;border:2px solid #dbe4dd;border-radius:12px;background:#fff;min-width:0}.assignment-candidate strong{font-size:15px}.assignment-candidate>span,.assignment-candidate>small{font-size:12px}.assignment-candidate .candidate-rank{font-size:11px;color:#53685b}.assignment-candidate[aria-pressed="true"]{border-color:#286548;background:#e8f4eb;box-shadow:0 0 0 1px #286548}.candidate-selected{visibility:hidden;color:#245039;font-weight:700}.assignment-candidate[aria-pressed="true"] .candidate-selected{visibility:visible}.assignment-candidate:focus-visible,.assignment-role-buttons button:focus-visible{outline:3px solid #638ab2;outline-offset:3px}.assignment-ranking-help{font-size:13px}.assignment-ranking-help summary{cursor:pointer}.assignment-candidate-buttons>p{grid-column:1/-1}@media(max-width:600px){.assignment-candidate-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.assignment-candidate{padding:10px;gap:5px}.assignment-candidate strong{font-size:14px}.assignment-role-buttons{gap:6px}}

/* Role colors apply to both manager and employee rosters; warnings retain priority. */
.shift-person[data-staff-role="וטרינר/ית"] { --role-background:#e7f0fc; --role-border:#4d79b4; }
.shift-person[data-staff-role="אסיסטנט/ית"] { --role-background:#f1e9f8; --role-border:#9266b0; }
.shift-person[data-staff-role]:not(.overstaffed):not(.invalid) { background:var(--role-background,#edf4ed); border-color:var(--role-border,#54846a); }
@media print { .shift-person[data-staff-role] { print-color-adjust:exact; } }

.saturday-hidden [data-weekday="6"] { display:none; }
.saturday-options { display:flex;gap:10px;margin:12px 0;flex-wrap:wrap; }
.saturday-options button { flex:1;min-height:44px; }
.saturday-options button[aria-pressed="true"] { background:#235643;color:white;border-color:#235643; }

.roster-role-group .shift-person { flex-direction:column;align-items:stretch; }
.roster-role-group .shift-person>div:last-child { display:flex;justify-content:flex-start;gap:3px;flex-wrap:wrap; }
.roster-role-group .shift-person>div:first-child { display:block; }
.slot-heading { flex-wrap:wrap; }

/* Capacity sandbox: free placement and button-based people choices. */
.capacity-mode[aria-pressed="true"]{background:#17635c;color:#fff;border-color:#17635c}
.capacity-free-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0}.capacity-free-tools span{font-size:13px;color:#627079}
.capacity-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 18px;direction:rtl}
.capacity-choice{display:flex;flex-direction:column;align-items:stretch;text-align:right;min-width:0;white-space:normal;overflow-wrap:anywhere;padding:12px!important;min-height:46px}
.capacity-choice small{font-weight:400;margin-top:6px;font-size:12px}.capacity-choice[aria-pressed="true"]{border:2px solid #17635c;background:#e7f5ed;color:#164b40;box-shadow:inset 0 0 0 1px #17635c}.capacity-choice:disabled{opacity:.5}
@media(max-width:600px){.capacity-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.capacity-free-tools button{flex:1 1 130px}}

/* Personal constraint borders always take precedence over role, lock and excess borders. */
.constraint-hard[data-constraint-severity="hard"]{border:3px solid #b82634!important;outline:none!important}
.constraint-soft[data-constraint-severity="soft"]{border:3px solid #be8d00!important;outline:none!important}
.shift-person[data-constraint-severity]{background:var(--role-background,#edf4ed)}
.constraint-note{display:block;font-size:11px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;color:#513e37;margin-top:5px}
.constraint-note strong{font-weight:700}.constraint-hard .constraint-note strong{color:#a31e2d}.constraint-soft .constraint-note strong{color:#795b00}
.capacity-tag{flex-direction:column;align-items:stretch}.capacity-tag-name{display:flex;align-items:center;gap:5px;min-width:0}.capacity-tag-name .capacity-worker-name{min-width:0;white-space:normal;overflow-wrap:anywhere}
.capacity-tag .constraint-note{margin:0}.capacity-legend .capacity-tag{flex:1}.list-row[data-constraint-severity]{padding:10px;border-radius:8px;margin:8px 0}
.constraint-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:16px 0;font-size:13px}.constraint-legend span{display:inline-flex;align-items:center;gap:6px}.constraint-legend small{color:#627079}
.constraint-key{display:inline-block;width:20px;height:16px;border-radius:4px;border:3px solid #be8d00}.constraint-key.hard{border-color:#b82634}
@media print{[data-constraint-severity]{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

.staff-count-row[data-constraint-severity]{flex-wrap:wrap}.staff-count-row .constraint-note{flex-basis:100%;text-align:right}.constraint-summary{padding:12px;border-radius:9px;margin:12px 0}

/* Independent workforce-planning pages. */
.planning-capacity { --planning-accent:#416f58; --planning-surface:#f0f7f1; }
.planning-free { --planning-accent:#326ca5; --planning-surface:#eff5fc; }
.planning-quota { --planning-accent:#82591b; --planning-surface:#fff8e9; }
.planning-constraints { --planning-accent:#8054b0; --planning-surface:#f5effb; }
.planning-page { background:var(--planning-surface); }
.planning-tabs { display:flex; flex-wrap:wrap; gap:8px; border-bottom:2px solid var(--planning-accent); padding:0 0 12px; margin-bottom:24px; }
.planning-tab { border:2px solid var(--planning-accent); color:var(--planning-accent); background:var(--planning-surface); font-weight:bold; }
.planning-tab.selected { background:var(--planning-accent); color:white; box-shadow:0 3px 0 var(--planning-accent); }
.planning-page .page-heading h1 { color:var(--planning-accent); }

.planning-draft-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:16px; background:white; border:1px solid var(--line); border-radius:12px; margin-bottom:20px; }
.planning-draft-bar p { margin:4px 0; }

.planning-oncall{display:block;background:#eee9ff;color:#59408b;border:1px solid #aa95d2;border-radius:8px;padding:6px;margin-bottom:6px}

.staff-highlight{background:#dff5ff!important;outline:3px solid #1594bd;outline-offset:2px;box-shadow:0 0 0 5px #dff5ff!important}
.staff-highlight-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#dff5ff;color:#15536a;padding:10px;border-radius:10px;margin:10px;flex-wrap:wrap}
@media print{.staff-highlight-banner{display:none}.staff-highlight{outline:none;box-shadow:none!important}}