:root {
  --bg: #f4f4f1;
  --panel: #ffffff;
  --text: #151515;
  --muted: #6c6c67;
  --border: #deded8;
  --soft: #f8f8f5;
  --brand: #151515;
  --brand-hover: #30302d;
  --active: #ecece7;
  --good: #176a50;
  --good-bg: #e9f5ef;
  --warning: #8b6400;
  --warning-bg: #fff4d6;
  --error: #a53030;
  --error-bg: #fff0ef;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #f4f4f1;
  background: var(--bg, #f4f4f1);
  color: #151515;
  color: var(--text, #151515);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
}

a {
  color: inherit;
}

.ui-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
}

.ui-sidebar {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 16px;
  background: #ffffff;
  color: #151515;
  border-right: 1px solid #deded8;
  border-right-color: var(--border, #deded8);
}

.ui-brand {
  display: block;
  padding: 2px 10px 28px;
  text-decoration: none;
}

.ui-brand-logo {
  display: block;
  width: 142px;
  max-width: 100%;
  height: auto;
}

.ui-nav {
  display: grid;
  gap: 5px;
}

.ui-nav-item {
  display: block;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #252522;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.ui-nav-item:hover {
  background: #f4f4f1;
  color: #151515;
}

.ui-nav-item.active {
  background: #ecece7;
  background: var(--active, #ecece7);
  color: #151515;
  font-weight: 800;
}

.ui-sidebar-foot {
  margin-top: auto;
  padding: 16px 8px 0;
  border-top: 1px solid #deded8;
  border-top-color: var(--border, #deded8);
}

.ui-user-name {
  color: #151515;
  font-size: 13px;
  font-weight: 800;
}

.ui-user-role {
  margin-top: 3px;
  color: #6c6c67;
  font-size: 11px;
}

.ui-profile-link {
  display: inline-block;
  margin-top: 13px;
  color: #3f3f3a;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ui-version {
  margin: 14px 0 8px;
  color: #8a8a84;
  font-size: 11px;
}

.ui-logout {
  width: 100%;
  min-height: 36px;
  border: 1px solid #cfcfc8;
  background: #ffffff;
  color: #151515;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ui-logout:hover {
  background: #f4f4f1;
}

.ui-main {
  min-width: 0;
}

.ui-topbar {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 32px 20px;
  background: #ffffff;
  border-bottom: 1px solid #deded8;
  border-bottom-color: var(--border, #deded8);
}

.ui-eyebrow {
  margin-bottom: 5px;
  color: #6c6c67;
  color: var(--muted, #6c6c67);
  font-size: 12px;
}

h1,
h2 {
  margin: 0;
  color: #151515;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

h1 {
  font-size: clamp(30px, 3vw, 44px);
}

h2 {
  font-size: 30px;
}

.ui-content {
  max-width: 1440px;
  padding: 26px 32px 44px;
}

.ui-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ui-kpi,
.ui-panel,
.employee-card {
  background: #ffffff;
  border: 1px solid #deded8;
  border-color: var(--border, #deded8);
  border-radius: 12px;
}

.ui-kpi {
  padding: 16px;
}

.ui-kpi-label {
  color: #6c6c67;
  font-size: 12px;
}

.ui-kpi-value {
  margin: 4px 0 2px;
  color: #151515;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
}

.ui-kpi-note,
.ui-muted {
  color: #6c6c67;
  font-size: 12px;
}

.ui-muted.small {
  font-size: 11px;
}

.ui-panel {
  margin-bottom: 18px;
  padding: 18px;
}

.ui-panel-title {
  color: #151515;
  font-size: 17px;
  font-weight: 800;
}

.ui-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.ui-empty {
  padding: 22px;
  background: #f8f8f5;
  border: 1px dashed #deded8;
  border-radius: 10px;
  color: #6c6c67;
}

.ui-locations {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ui-location-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: #f8f8f5;
  border: 1px solid #deded8;
  border-radius: 10px;
}

.ui-location-dot {
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.ui-location-name {
  color: #151515;
  font-weight: 800;
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #151515;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ui-button.primary {
  background: #151515;
  color: #ffffff;
}

.ui-button.primary:hover {
  background: #30302d;
}

.ui-button.secondary {
  background: #ffffff;
  border-color: #deded8;
  color: #151515;
}

.ui-button.ghost {
  background: transparent;
  border-color: #deded8;
  color: #5e5e59;
}

.ui-button.compact {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

.ui-button.full {
  width: 100%;
}

.ui-alert {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.4;
}

.ui-alert.error {
  background: #fff0ef;
  border: 1px solid #f2cccc;
  color: #a53030;
}

.ui-alert.warning {
  background: #fff4d6;
  border: 1px solid #f0dea6;
  color: #8b6400;
}

.ui-table-wrap {
  overflow-x: auto;
}

.ui-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  color: #151515;
  font-size: 13px;
}

.ui-table th {
  padding: 10px;
  border-bottom: 1px solid #deded8;
  color: #6c6c67;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ui-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #eeeae4;
  color: #151515;
  vertical-align: middle;
}

.ui-table tr:last-child td {
  border-bottom: 0;
}

.ui-table .actions {
  width: 1%;
  white-space: nowrap;
}

.ui-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ui-actions form {
  margin: 0;
}

.ui-person {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ui-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #ecece7;
  border-radius: 50%;
  color: #151515;
  font-weight: 800;
}

.ui-pill {
  display: inline-block;
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 999px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
}

.ui-pill.good {
  background: #e9f5ef;
  color: #176a50;
}

.ui-pill.warning {
  background: #fff4d6;
  color: #8b6400;
}

.ui-pill.muted {
  background: #f0efed;
  color: #77736e;
}

.ui-pill.neutral {
  background: #f0f0ec;
  color: #42423e;
}

.ui-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(220px, 320px);
  align-items: start;
  gap: 18px;
}

.ui-form-card {
  margin: 0;
}

.ui-form {
  display: grid;
  gap: 14px;
}

.ui-field {
  display: grid;
  gap: 6px;
  color: #151515;
  font-size: 13px;
  font-weight: 700;
}

.ui-field input,
.ui-field select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  background: #ffffff;
  border: 1px solid #d0d0ca;
  border-radius: 8px;
  color: #151515;
  font: inherit;
  font-weight: 500;
}

.ui-field input:focus,
.ui-field select:focus {
  outline: 2px solid rgba(21, 21, 21, .10);
  border-color: #151515;
}

.ui-field small {
  color: #6c6c67;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}

.ui-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ui-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.ui-form-actions.left {
  justify-content: flex-start;
}

.ui-help-card {
  padding: 17px;
  background: #f8f8f5;
  border: 1px solid #deded8;
  border-radius: 12px;
  color: #4f4f4a;
  font-size: 13px;
  line-height: 1.5;
}

.ui-help-title {
  margin-bottom: 8px;
  color: #151515;
  font-weight: 800;
}

.ui-back {
  display: inline-block;
  margin-bottom: 16px;
  color: #5f5f5a;
  font-size: 12px;
}

.ui-narrow {
  max-width: 620px;
}

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f4f4f1;
}

.auth-wrap {
  width: min(100%, 430px);
}

.auth-wrap.wide {
  width: min(100%, 540px);
}

.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.auth-brand-logo {
  display: block;
  width: 174px;
  max-width: 60vw;
  height: auto;
}

.auth-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #deded8;
  border-radius: 14px;
  box-shadow: 0 16px 45px rgba(20, 20, 20, .06);
}

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

.auth-note {
  margin: 8px 0 18px;
  color: #6c6c67;
  font-size: 13px;
  line-height: 1.5;
}

.auth-version {
  margin-top: 12px;
  color: #858580;
  text-align: center;
  font-size: 11px;
}

.employee-home {
  max-width: 920px;
}

.employee-hero {
  margin-bottom: 14px;
  padding: 22px;
  background: #151515;
  border-radius: 14px;
  color: #ffffff;
}

.employee-hero h2 {
  color: #ffffff;
}

.employee-hero .ui-eyebrow {
  color: rgba(255, 255, 255, .65);
}

.employee-role {
  margin-top: 7px;
  color: #e7e7df;
  font-size: 13px;
}

.employee-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.employee-card {
  padding: 17px;
}

.employee-card-title {
  margin: 5px 0;
  color: #151515;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 15px 0;
}

.profile-grid > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #deded8;
  border-radius: 9px;
}

@media (max-width: 1100px) {
  .ui-kpi-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .ui-form-layout {
    grid-template-columns: 1fr;
  }

  .ui-help-card {
    max-width: 680px;
  }
}

@media (max-width: 820px) {
  .ui-shell {
    grid-template-columns: 1fr;
  }

  .ui-sidebar {
    min-height: auto;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid #deded8;
  }

  .ui-brand {
    padding: 2px 4px 12px;
  }

  .ui-brand-logo {
    width: 104px;
  }

  .ui-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .ui-nav-item {
    min-height: 36px;
    padding: 8px 6px;
    text-align: center;
    font-size: 11px;
  }

  .ui-sidebar-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 4px 0;
  }

  .ui-user {
    min-width: 0;
    flex: 1;
  }

  .ui-user-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ui-user-role,
  .ui-profile-link,
  .ui-version {
    display: none;
  }

  .ui-sidebar-foot form {
    margin: 0;
  }

  .ui-logout {
    width: auto;
    padding: 7px 10px;
  }

  .ui-topbar {
    min-height: auto;
    padding: 18px 18px 14px;
  }

  .ui-topbar h1 {
    font-size: 30px;
  }

  .ui-content {
    padding: 16px 18px 30px;
  }

  .ui-locations {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ui-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ui-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ui-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ui-form-grid {
    grid-template-columns: 1fr;
  }

  .employee-cards,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: 19px;
  }

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

/* ===== Schedule / staffing need ===== */

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.schedule-month-nav,
.schedule-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-month-title {
  min-width: 170px;
  color: #151515;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}

.schedule-today-link {
  margin-left: 4px;
  color: #5e5e59;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.schedule-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5e5e59;
  font-size: 12px;
}

.schedule-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.schedule-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.schedule-kpi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #deded8;
  border-radius: 10px;
}

.schedule-kpi span {
  color: #6c6c67;
  font-size: 12px;
}

.schedule-kpi strong {
  color: #151515;
  font-size: 22px;
}

.schedule-kpi.danger {
  background: #fff4f1;
  border-color: #edc5bc;
}

.schedule-kpi.danger strong {
  color: #a53a29;
}

.schedule-info {
  margin-bottom: 14px;
  padding: 11px 13px;
  background: #f0f0ec;
  border-radius: 9px;
  color: #565651;
  font-size: 12px;
  line-height: 1.45;
}

.schedule-calendar-wrap {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #deded8;
  border-radius: 12px;
}

.schedule-calendar {
  min-width: 1050px;
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
}

.schedule-weekday {
  padding: 9px 10px;
  background: #f4f4f1;
  border-right: 1px solid #e4e4de;
  border-bottom: 1px solid #deded8;
  color: #6c6c67;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.schedule-weekday:nth-child(7) {
  border-right: 0;
}

.schedule-day {
  min-height: 154px;
  padding: 8px;
  background: #ffffff;
  border-right: 1px solid #e8e8e3;
  border-bottom: 1px solid #e8e8e3;
}

.schedule-day:nth-child(7n) {
  border-right: 0;
}

.schedule-day.outside {
  background: #fafaf8;
  color: #a1a19c;
}

.schedule-day.today {
  box-shadow: inset 0 0 0 2px #151515;
}

.schedule-day-head {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.schedule-day-number {
  color: #5b5b56;
  font-size: 12px;
  font-weight: 800;
}

.schedule-day.outside .schedule-day-number {
  color: #b0b0ab;
}

.schedule-day-add {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #d7d7d1;
  border-radius: 6px;
  color: #44443f;
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
}

.schedule-day-add:hover {
  background: #f0f0ec;
}

.schedule-day-shifts {
  display: grid;
  gap: 6px;
}

.schedule-no-shifts {
  color: #c2c2bc;
  font-size: 12px;
}

.schedule-shift {
  --location-color: #777;
  position: relative;
  padding: 8px 8px 8px 10px;
  overflow: hidden;
  background: #fafaf8;
  border: 1px solid #dfdfda;
  border-left: 4px solid var(--location-color);
  border-radius: 8px;
  color: #151515;
}

.schedule-shift.needs-people {
  background: #fff6f3;
  border-color: #edc9c0;
  border-left-color: var(--location-color);
}

.schedule-shift.staffed {
  background: #f4faf6;
  border-color: #cce3d5;
  border-left-color: var(--location-color);
}

.schedule-shift.cancelled {
  opacity: .58;
  background: #f2f2ef;
  text-decoration: none;
}

.schedule-shift-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.schedule-shift-location {
  min-width: 0;
  overflow: hidden;
  color: #151515;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.schedule-shift-status {
  display: inline-block;
  max-width: 88px;
  padding: 2px 5px;
  overflow: hidden;
  border-radius: 999px;
  color: #666660;
  background: #ededE8;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.schedule-shift-status.status-published {
  background: #e9f5ef;
  color: #176a50;
}

.schedule-shift-status.status-draft {
  background: #fff4d6;
  color: #8b6400;
}

.schedule-shift-status.status-cancelled {
  background: #eeeeeb;
  color: #77736e;
}

.schedule-shift-time {
  margin: 4px 0;
  color: #242421;
  font-size: 13px;
  font-weight: 800;
}

.schedule-staff-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  color: #6c6c67;
  font-size: 10px;
}

.schedule-staff-line strong {
  color: #aa3d2c;
  font-size: 10px;
}

.schedule-staff-line strong.ok {
  color: #176a50;
}

.schedule-edit-link {
  display: inline-block;
  margin-top: 6px;
  color: #555550;
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.schedule-mobile-list {
  display: none;
}

.schedule-mobile-day {
  margin-bottom: 14px;
}

.schedule-mobile-date {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.schedule-mobile-date strong {
  font-size: 14px;
}

.schedule-mobile-date span {
  color: #176a50;
  font-size: 11px;
}

.schedule-mobile-date a {
  margin-left: auto;
  color: #555550;
  font-size: 11px;
}

.schedule-shift.mobile {
  margin-bottom: 7px;
  padding: 11px 12px;
}

.schedule-shift.mobile .schedule-shift-top {
  font-size: 13px;
}

.schedule-shift.mobile .schedule-shift-location {
  font-size: 13px;
}

.schedule-shift.mobile .schedule-staff-line {
  margin-top: 7px;
  font-size: 12px;
}

.schedule-shift.mobile .schedule-staff-line strong {
  font-size: 12px;
}

.schedule-mobile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}

@media (max-width: 1100px) {
  .schedule-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-kpis {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 700px) {
  .schedule-calendar-wrap {
    display: none;
  }

  .schedule-mobile-list {
    display: block;
  }

  .schedule-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-kpi {
    padding: 10px 11px;
  }

  .schedule-kpi strong {
    font-size: 20px;
  }

  .schedule-month-title {
    min-width: 138px;
    font-size: 19px;
  }

  .schedule-legend {
    gap: 10px 14px;
  }
}


/* ===== Patch 000.001.006: fullscreen schedule / compact month UX ===== */

.schedule-board {
  --schedule-weeks: 6;
}

.schedule-toolbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.schedule-fullscreen-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #d7d7d1;
  border-radius: 8px;
  background: #ffffff;
  color: #363632;
  cursor: pointer;
}

.schedule-fullscreen-button:hover {
  background: #f0f0ec;
  border-color: #c6c6bf;
}

.schedule-fullscreen-button:focus-visible {
  outline: 2px solid #151515;
  outline-offset: 2px;
}

.schedule-fullscreen-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.schedule-fullscreen-button .icon-collapse {
  display: none;
}

.schedule-fullscreen-button.is-active .icon-expand {
  display: none;
}

.schedule-fullscreen-button.is-active .icon-collapse {
  display: block;
}

.schedule-fullscreen-hint {
  display: none;
}

.schedule-day.weekend:not(.outside) {
  background: #fcfcfa;
}

.schedule-day-shifts:empty {
  min-height: 1px;
}

.schedule-shift-clickable {
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.schedule-shift-clickable:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}

.schedule-shift-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.schedule-shift-clickable .schedule-shift-top,
.schedule-shift-clickable .schedule-shift-time,
.schedule-shift-clickable .schedule-staff-line,
.schedule-shift-clickable .schedule-edit-link {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.schedule-edit-link {
  color: #696963;
}

.schedule-board:fullscreen,
.schedule-board.is-fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 12px 12px;
  background: #f4f4f1;
  color: #151515;
}

.schedule-board:fullscreen::backdrop {
  background: #f4f4f1;
}

.schedule-board:fullscreen .schedule-toolbar,
.schedule-board.is-fullscreen .schedule-toolbar {
  min-height: 38px;
  margin-bottom: 8px;
  flex: 0 0 auto;
}

.schedule-board:fullscreen .schedule-month-title,
.schedule-board.is-fullscreen .schedule-month-title {
  min-width: 150px;
  font-size: 20px;
}

.schedule-board:fullscreen .schedule-kpis,
.schedule-board.is-fullscreen .schedule-kpis,
.schedule-board:fullscreen .schedule-info,
.schedule-board.is-fullscreen .schedule-info {
  display: none;
}

.schedule-board:fullscreen .schedule-calendar-wrap,
.schedule-board.is-fullscreen .schedule-calendar-wrap {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 10px;
}

.schedule-board:fullscreen .schedule-calendar,
.schedule-board.is-fullscreen .schedule-calendar {
  width: 100%;
  min-width: 0;
  height: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 28px repeat(var(--schedule-weeks), minmax(0, 1fr));
}

.schedule-board:fullscreen .schedule-weekday,
.schedule-board.is-fullscreen .schedule-weekday {
  min-width: 0;
  padding: 6px 5px;
  font-size: 10px;
}

.schedule-board:fullscreen .schedule-day,
.schedule-board.is-fullscreen .schedule-day {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 5px;
  scrollbar-width: thin;
}

.schedule-board:fullscreen .schedule-day-head,
.schedule-board.is-fullscreen .schedule-day-head {
  min-height: 19px;
  margin-bottom: 3px;
}

.schedule-board:fullscreen .schedule-day-number,
.schedule-board.is-fullscreen .schedule-day-number {
  font-size: 10px;
}

.schedule-board:fullscreen .schedule-day-add,
.schedule-board.is-fullscreen .schedule-day-add {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 13px;
}

.schedule-board:fullscreen .schedule-day-shifts,
.schedule-board.is-fullscreen .schedule-day-shifts {
  gap: 3px;
}

.schedule-board:fullscreen .schedule-shift,
.schedule-board.is-fullscreen .schedule-shift {
  padding: 4px 5px 4px 7px;
  border-left-width: 3px;
  border-radius: 6px;
}

.schedule-board:fullscreen .schedule-shift-top,
.schedule-board.is-fullscreen .schedule-shift-top {
  gap: 3px;
}

.schedule-board:fullscreen .schedule-shift-location,
.schedule-board.is-fullscreen .schedule-shift-location {
  font-size: 9px;
}

.schedule-board:fullscreen .schedule-shift-status,
.schedule-board.is-fullscreen .schedule-shift-status {
  max-width: 62px;
  padding: 1px 4px;
  font-size: 7px;
}

.schedule-board:fullscreen .schedule-shift-time,
.schedule-board.is-fullscreen .schedule-shift-time {
  margin: 2px 0;
  font-size: 10px;
}

.schedule-board:fullscreen .schedule-staff-line,
.schedule-board.is-fullscreen .schedule-staff-line,
.schedule-board:fullscreen .schedule-staff-line strong,
.schedule-board.is-fullscreen .schedule-staff-line strong {
  gap: 3px;
  font-size: 8px;
}

.schedule-board:fullscreen .schedule-edit-link,
.schedule-board.is-fullscreen .schedule-edit-link {
  display: none;
}

.schedule-board:fullscreen .schedule-fullscreen-hint,
.schedule-board.is-fullscreen .schedule-fullscreen-hint {
  display: block;
  flex: 0 0 auto;
  padding-top: 5px;
  color: #777771;
  text-align: right;
  font-size: 9px;
}

@media (max-width: 1100px) {
  .schedule-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 700px) {
  .schedule-fullscreen-button {
    display: none;
  }
}
/* ===== Patch 000.001.007: readable calendar typography ===== */

/*
 * The month must remain visible as a whole in fullscreen, but text must not
 * become microscopic. Dense days scroll inside their own cells instead.
 */

/* Normal desktop month view */
.schedule-weekday {
  font-size: 13px;
}

.schedule-day-number {
  font-size: 14px;
}

.schedule-day-add {
  width: 26px;
  height: 26px;
  font-size: 17px;
  font-weight: 700;
}

.schedule-day-shifts {
  gap: 7px;
}

.schedule-shift {
  padding: 8px 9px 8px 11px;
}

.schedule-shift-top {
  gap: 7px;
}

.schedule-shift-location {
  font-size: 14px;
  line-height: 1.2;
}

.schedule-shift-status {
  max-width: 104px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.15;
}

.schedule-shift-time {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.2;
}

.schedule-staff-line {
  gap: 7px;
  font-size: 12px;
  line-height: 1.25;
}

.schedule-staff-line strong {
  font-size: 12px;
}

.schedule-edit-link {
  margin-top: 6px;
  font-size: 11px;
}

/* Fullscreen: readable first, compact second */
.schedule-board:fullscreen .schedule-weekday,
.schedule-board.is-fullscreen .schedule-weekday {
  padding: 6px 5px;
  font-size: 12px;
}

.schedule-board:fullscreen .schedule-day,
.schedule-board.is-fullscreen .schedule-day {
  padding: 6px;
}

.schedule-board:fullscreen .schedule-day-head,
.schedule-board.is-fullscreen .schedule-day-head {
  min-height: 24px;
  margin-bottom: 4px;
}

.schedule-board:fullscreen .schedule-day-number,
.schedule-board.is-fullscreen .schedule-day-number {
  font-size: 13px;
}

.schedule-board:fullscreen .schedule-day-add,
.schedule-board.is-fullscreen .schedule-day-add {
  width: 22px;
  height: 22px;
  font-size: 16px;
  font-weight: 700;
}

.schedule-board:fullscreen .schedule-day-shifts,
.schedule-board.is-fullscreen .schedule-day-shifts {
  gap: 5px;
}

.schedule-board:fullscreen .schedule-shift,
.schedule-board.is-fullscreen .schedule-shift {
  padding: 6px 7px 6px 9px;
  border-left-width: 4px;
  border-radius: 7px;
}

.schedule-board:fullscreen .schedule-shift-top,
.schedule-board.is-fullscreen .schedule-shift-top {
  gap: 5px;
}

.schedule-board:fullscreen .schedule-shift-location,
.schedule-board.is-fullscreen .schedule-shift-location {
  font-size: 13px;
  line-height: 1.15;
}

.schedule-board:fullscreen .schedule-shift-status,
.schedule-board.is-fullscreen .schedule-shift-status {
  max-width: 92px;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1.15;
}

.schedule-board:fullscreen .schedule-shift-time,
.schedule-board.is-fullscreen .schedule-shift-time {
  margin: 3px 0;
  font-size: 13px;
  line-height: 1.15;
}

.schedule-board:fullscreen .schedule-staff-line,
.schedule-board.is-fullscreen .schedule-staff-line,
.schedule-board:fullscreen .schedule-staff-line strong,
.schedule-board.is-fullscreen .schedule-staff-line strong {
  gap: 5px;
  font-size: 11px;
  line-height: 1.2;
}

.schedule-board:fullscreen .schedule-fullscreen-hint,
.schedule-board.is-fullscreen .schedule-fullscreen-hint {
  font-size: 10px;
}

/* Keep narrow screens usable without shrinking mobile cards. */
@media (max-width: 900px) and (min-width: 701px) {
  .schedule-shift-location {
    font-size: 13px;
  }

  .schedule-shift-status {
    max-width: 92px;
    font-size: 10px;
  }

  .schedule-staff-line,
  .schedule-staff-line strong {
    font-size: 11px;
  }
}
/* ===== Patch 000.001.009: fixed-height desktop sidebar ===== */

/*
 * Desktop:
 * - sidebar always remains within the viewport;
 * - the page/work area scrolls normally on the right;
 * - logo and user/footer blocks remain visible;
 * - if navigation grows, only the nav section scrolls.
 *
 * Mobile layout remains unchanged.
 */
@media (min-width: 821px) {
  .ui-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .ui-brand {
    flex: 0 0 auto;
  }

  .ui-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .ui-sidebar-foot {
    flex: 0 0 auto;
    margin-top: 12px;
    background: #ffffff;
  }

  .ui-main {
    min-height: 100vh;
  }
}


/* ===== Patch 000.001.010: compact sidebar rows + shift staffing ===== */

@media (min-width: 821px) {
  .ui-nav {
    align-content: start;
    grid-auto-rows: max-content;
  }

  .ui-nav-item {
    min-height: 40px;
    height: auto;
  }
}

.ui-alert.success {
  background: #e9f5ef;
  border: 1px solid #c7e7d8;
  color: #176a50;
}

.ui-empty.compact {
  padding: 14px;
}

.shift-staffing-panel {
  max-width: 1030px;
  margin-top: 18px;
}

.shift-staffing-head {
  margin-bottom: 18px;
}

.shift-staffing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 24px;
}

.shift-staffing-title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
}

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

.shift-assigned-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border, #deded8);
  border-radius: 9px;
  background: #fff;
}

.shift-assigned-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shift-assigned-person strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shift-staff-note {
  margin-top: 3px;
  color: #a53030;
  font-size: 11px;
}

.shift-assign-form {
  padding: 14px;
  border: 1px solid var(--border, #deded8);
  border-radius: 10px;
  background: var(--soft, #f8f8f5);
}

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

.my-shift-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border, #deded8);
  border-left: 4px solid var(--location-color, #777);
  border-radius: 9px;
  background: #fff;
}

.my-shift-date,
.my-shift-main {
  display: grid;
  gap: 2px;
}

.my-shift-date strong {
  font-size: 18px;
}

.my-shift-date span,
.my-shift-main span {
  color: var(--muted, #6c6c67);
  font-size: 12px;
}

@media (max-width: 820px) {
  .shift-staffing-grid {
    grid-template-columns: 1fr;
  }

  .shift-assigned-row {
    align-items: flex-start;
  }

  .my-shift-row {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .my-shift-row .ui-pill {
    grid-column: 2;
    justify-self: start;
  }
}
/* ===== Patch 000.001.011: shift form polish + preferences ===== */

/* Removed eyebrow makes the page header calmer and shorter. */
.ui-topbar {
  min-height: 92px;
  padding-top: 20px;
  padding-bottom: 18px;
}

/* Edit form: keep paired controls aligned even when only one has helper text. */
.ui-form-grid {
  align-items: start;
}

.ui-back {
  font-size: 14px;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* Staffing block now matches the width of the main shift form. */
.shift-staffing-panel {
  max-width: 680px;
}

.shift-staffing-grid {
  grid-template-columns: minmax(0, 1fr) minmax(250px, .82fr);
  gap: 14px;
}

.shift-staffing-notice {
  margin-top: -2px;
  margin-bottom: 14px;
}

.shift-assigned-row {
  padding: 9px 10px;
}

.shift-remove-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  background: #fff4f2;
  border: 1px solid #e8b7af;
  border-radius: 8px;
  color: #b43728;
  cursor: pointer;
}

.shift-remove-button:hover {
  background: #ffe7e2;
  border-color: #d89185;
}

.shift-remove-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shift-preference-summary {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.preference-summary-item,
.preference-note {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.preference-summary-item {
  padding: 4px 7px;
}

.preference-note {
  margin-top: 4px;
  padding: 2px 6px;
}

.preference-summary-item.want,
.preference-note.want {
  background: #e9f5ef;
  color: #176a50;
}

.preference-summary-item.cannot,
.preference-note.cannot {
  background: #fff0ef;
  color: #a53030;
}

.shift-assign-form {
  padding: 12px;
}

/* Draft visibility control next to fullscreen. */
.schedule-drafts-toggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: #ffffff;
  border: 1px solid #d7d7d1;
  border-radius: 8px;
  color: #565651;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.schedule-drafts-toggle:hover,
.schedule-drafts-toggle.active {
  background: #f1f1ed;
  color: #151515;
}

.schedule-drafts-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.schedule-drafts-toggle strong {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  background: #ebeae5;
  border-radius: 999px;
  color: #4c4c47;
  font-size: 10px;
}

/* Published status badge is intentionally not rendered in the calendar.
   Draft badge remains visible only when manager explicitly enables drafts. */
.schedule-shift-status.status-draft {
  background: #fff4d6;
  color: #8b6400;
}

/* Employee preference controls. */
.schedule-preference-form {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.schedule-preference-button {
  min-height: 25px;
  padding: 4px 6px;
  background: #ffffff;
  border: 1px solid #d8d8d2;
  border-radius: 6px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}

.schedule-preference-button.want {
  color: #282824; /* Unselected choice: neutral, not an active green state. */
}

.schedule-preference-button.cannot {
  color: #9b3030;
}

/* 059: selected preference is replaced by a single red cancellation action. */
.schedule-preference-button.cancel,
.schedule-preference-button.cancel:hover,
.schedule-preference-button.cancel:active {
  background: #b4232b;
  border-color: #951c24;
  color: #fff;
  box-shadow: none;
}

.schedule-preference-button.cancel:focus-visible {
  outline: 2px solid #951c24;
  outline-offset: 2px;
}

.schedule-assigned-me {
  position: relative;
  z-index: 3;
  width: fit-content;
  margin-top: 7px;
  padding: 4px 7px;
  background: #e9f5ef;
  border-radius: 999px;
  color: #176a50;
  font-size: 10px;
  font-weight: 800;
}

.schedule-board:fullscreen .schedule-preference-form,
.schedule-board.is-fullscreen .schedule-preference-form {
  gap: 3px;
  margin-top: 4px;
}

.schedule-board:fullscreen .schedule-preference-button,
.schedule-board.is-fullscreen .schedule-preference-button,
.schedule-board:fullscreen .schedule-assigned-me,
.schedule-board.is-fullscreen .schedule-assigned-me {
  min-height: 21px;
  padding: 3px 4px;
  font-size: 9px;
}

@media (max-width: 820px) {
  .shift-staffing-panel {
    max-width: none;
  }

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

  .schedule-preference-form.mobile {
    margin-top: 9px;
  }

  .schedule-preference-form.mobile .schedule-preference-button {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .schedule-drafts-toggle span {
    display: none;
  }
}

@media (max-width: 560px) {
  .ui-topbar {
    min-height: auto;
  }
}
/* ===== Patch 000.001.012: employee profile + replacement requests ===== */

.employee-profile-page {
  max-width: 760px;
}

/* Employee schedule is intentionally leaner than manager schedule. */
.schedule-assigned-me.replacement {
  background: #fff4d6;
  color: #8b6400;
}

/* My shifts: status badge removed; the right column is now an action. */
.my-shift-row {
  grid-template-columns: 82px minmax(0, 1fr) auto;
}

.my-shift-row.replacement-requested {
  background: #fffdf6;
}

.my-shift-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.my-shift-actions form {
  margin: 0;
}

.replacement-request-button,
.replacement-cancel-button {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.replacement-request-button {
  background: #fff4d6;
  border: 1px solid #e6cf8e;
  color: #765500;
}

.replacement-request-button:hover {
  background: #ffedb9;
}

.replacement-cancel-button {
  background: #ffffff;
  border: 1px solid #deded8;
  color: #5e5e59;
}

.replacement-cancel-button:hover {
  background: #f4f4f0;
}

.replacement-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  background: #fff4d6;
  border-radius: 999px;
  color: #8b6400;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.employee-notice {
  max-width: 920px;
  margin-bottom: 14px;
}

.replacement-manager-note {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;
  background: #fff4d6;
  border-radius: 999px;
  color: #8b6400;
  font-size: 11px;
  font-weight: 800;
}

.preference-summary-item.replacement {
  background: #fff4d6;
  color: #8b6400;
}

@media (max-width: 820px) {
  .my-shift-row {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .my-shift-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .replacement-request-button,
  .replacement-cancel-button {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }
}
/* ===== Patch 000.001.013: complete replacement handoff ===== */

/* Employee home starts directly with useful shift information. */
.employee-home {
  padding-top: 0;
}

/* Assigned employee row can expand only when a replacement is requested. */
.shift-assigned-row.has-replacement-request {
  display: grid;
  align-items: stretch;
  gap: 10px;
  background: #fffdf6;
}

.shift-assigned-row-main {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.replacement-accept-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid #eee3bd;
}

.replacement-accept-form .ui-field {
  margin: 0;
}

.replacement-accept-button {
  min-height: 38px;
  padding: 8px 11px;
  background: #161616;
  border: 1px solid #161616;
  border-radius: 8px;
  color: #ffffff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.replacement-accept-button:hover {
  background: #303030;
  border-color: #303030;
}

@media (max-width: 820px) {
  .replacement-accept-form {
    grid-template-columns: 1fr;
  }

  .replacement-accept-button {
    width: 100%;
  }
}
/* ===== Patch 000.001.014: replacement inbox + schedule alerts ===== */

/* Dashboard replacement KPI is an action, not just a number. */
.ui-kpi-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ui-kpi-link:hover {
  border-color: #b9b9b2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}

.ui-kpi-link.attention {
  background: #fff8f0;
  border-color: #efc09e;
}

.ui-kpi-link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ui-kpi-link-head > span {
  color: #8f5a25;
  font-size: 18px;
  line-height: 1;
}

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

.dashboard-replacement-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: #fffdf8;
  border: 1px solid #eadbc5;
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
}

.dashboard-replacement-row:hover {
  background: #fff8ee;
  border-color: #ddc49d;
}

.dashboard-replacement-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.dashboard-replacement-row strong,
.dashboard-replacement-row span {
  display: block;
}

.dashboard-replacement-row > div > span {
  margin-top: 2px;
  color: #6c6c67;
  font-size: 12px;
}

.dashboard-replacement-action {
  color: #7b5a23;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* Dedicated replacement inbox. */
.replacements-panel {
  max-width: 980px;
}

.replacement-request-list {
  display: grid;
  gap: 10px;
}

.replacement-request-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #fffdf8;
  border: 1px solid #eadbc5;
  border-left: 4px solid #d29b31;
  border-radius: 10px;
}

.replacement-request-card.past {
  background: #fff4f2;
  border-color: #e8b7af;
  border-left-color: #b43728;
}

.replacement-request-date {
  display: grid;
  gap: 2px;
}

.replacement-request-date strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}

.replacement-request-date span {
  color: #6c6c67;
  font-size: 11px;
}

.replacement-request-main {
  min-width: 0;
}

.replacement-request-person {
  font-size: 15px;
  font-weight: 800;
}

.replacement-request-shift {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0;
  font-size: 13px;
  font-weight: 700;
}

.replacement-request-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.replacement-overdue {
  color: #a53030;
}

/* Replacement indicator on the monthly calendar. */
.schedule-shift-flags {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
}

.schedule-replacement-badge {
  position: relative;
  z-index: 5;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  background: #fff0c9;
  border: 1px solid #dfbd68;
  border-radius: 999px;
  color: #7c5700;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .72);
}

.schedule-replacement-badge:hover {
  background: #ffe6a1;
  border-color: #cb9d2c;
}

.schedule-replacement-badge.mobile {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 11px;
}

.schedule-board:fullscreen .schedule-replacement-badge,
.schedule-board.is-fullscreen .schedule-replacement-badge {
  min-width: 20px;
  min-height: 20px;
  padding: 2px 5px;
  font-size: 9px;
}

.shift-staffing-panel {
  scroll-margin-top: 18px;
}

@media (max-width: 820px) {
  .dashboard-replacement-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .dashboard-replacement-action {
    grid-column: 2;
  }

  .replacement-request-card {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .replacement-request-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .replacement-request-actions .ui-button {
    width: 100%;
  }
}
/* ===== Patch 000.001.015: stronger replacement attention ===== */

/* Sidebar: manager sees the live open-request count as a red circle
   with a white number INSIDE the circle. */
.ui-nav-item-with-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ui-nav-alert-count {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  padding: 0;
  background: #c92f2f;
  border-radius: 50%;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px #ffffff;
}

/* Dashboard: compact one-line action rows. */
.dashboard-replacement-list {
  gap: 5px;
}

.dashboard-replacement-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
}

.dashboard-replacement-line {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: #151515;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-replacement-line strong,
.dashboard-replacement-line span {
  display: inline !important;
  margin: 0 !important;
  font-size: inherit !important;
}

.dashboard-replacement-line > span:not(.dashboard-replacement-separator) {
  color: #5f5f5a;
}

.dashboard-replacement-separator {
  color: #aaa9a2 !important;
}

.dashboard-replacement-action {
  font-size: 11px;
}

/* Calendar: replacement requires immediate manager attention.
   Red circle + white number, with a visible hover/focus hint above it. */
.schedule-shift {
  overflow: visible;
}

.schedule-replacement-badge {
  position: relative;
  z-index: 12;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  padding: 0;
  background: #c92f2f;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(120, 0, 0, .35);
}

.schedule-replacement-badge:hover,
.schedule-replacement-badge:focus-visible {
  background: #a91f1f;
  outline: none;
  transform: scale(1.08);
}

.schedule-replacement-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: 290px;
  padding: 7px 9px;
  transform: translateX(-50%) translateY(3px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #1d1d1b;
  border-radius: 7px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.schedule-replacement-badge::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #1d1d1b;
  transition: opacity .12s ease, visibility .12s ease;
}

.schedule-replacement-badge:hover::after,
.schedule-replacement-badge:focus-visible::after,
.schedule-replacement-badge:hover::before,
.schedule-replacement-badge:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.schedule-replacement-badge:hover::after,
.schedule-replacement-badge:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* Mobile keeps a text action; the circular desktop signal is too small for touch. */
.schedule-replacement-badge.mobile {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  font-size: 11px;
  box-shadow: none;
}

.schedule-replacement-badge.mobile::before,
.schedule-replacement-badge.mobile::after {
  display: none;
}

.schedule-board:fullscreen .schedule-replacement-badge:not(.mobile),
.schedule-board.is-fullscreen .schedule-replacement-badge:not(.mobile) {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  font-size: 10px;
}

@media (max-width: 820px) {
  .ui-nav-alert-count {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-basis: 20px;
    font-size: 10px;
  }

  .dashboard-replacement-row {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .dashboard-replacement-line {
    flex-wrap: wrap;
    white-space: normal;
  }
}
/* ===== Patch 000.001.016: timesheet + readable manager actions ===== */

/* 015 made the dashboard compact, but the action text must remain readable. */
.dashboard-replacement-line {
  font-size: 14px;
  gap: 7px;
}

.dashboard-replacement-action {
  font-size: 13px;
  font-weight: 800;
}

.dashboard-replacement-row {
  min-height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Timesheet */
.timesheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.timesheet-day-nav,
.timesheet-date-form {
  display: flex;
  align-items: center;
  gap: 9px;
}

.timesheet-day-nav > strong {
  min-width: 104px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
}

.timesheet-today-link {
  font-size: 12px;
}

.timesheet-date-form input[type="date"] {
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid #d7d7d1;
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
}

.timesheet-notice {
  margin-bottom: 14px;
}

.timesheet-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.timesheet-shifts {
  display: grid;
  gap: 14px;
}

.timesheet-shift-card {
  padding: 14px;
}

.timesheet-shift-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.timesheet-location-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  font-size: 16px;
}

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

.timesheet-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(100px, .65fr) minmax(100px, .65fr) minmax(120px, .8fr) minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e1db;
  border-radius: 9px;
  background: #ffffff;
}

.timesheet-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.timesheet-person > div:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.timesheet-person strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.timesheet-person span {
  color: #73736d;
  font-size: 11px;
}

.timesheet-cell {
  display: grid;
  gap: 2px;
}

.timesheet-label {
  color: #777771;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.timesheet-cell strong {
  font-size: 14px;
}

.timesheet-cell small,
.timesheet-action-hint {
  color: #777771;
  font-size: 10px;
  line-height: 1.3;
}

.timesheet-late {
  color: #b43728 !important;
  font-weight: 700;
}

.timesheet-state {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
}

.timesheet-state.state-open {
  background: #e9f5ef;
  color: #176a50;
}

.timesheet-state.state-closed {
  background: #efefeb;
  color: #5c5c57;
}

.timesheet-state.state-not_opened {
  background: #fff4d6;
  color: #8b6400;
}

.timesheet-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.timesheet-actions form,
.timesheet-actions .ui-button {
  width: 100%;
}

.timesheet-action-hint {
  display: block;
  text-align: right;
}

.timesheet-adjust {
  grid-column: 1 / -1;
  margin: 0 -2px -2px;
  padding-top: 8px;
  border-top: 1px dashed #deddd7;
}

.timesheet-adjust summary {
  width: fit-content;
  color: #5f5f59;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.timesheet-adjust-form {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(170px, .8fr) minmax(260px, 1.4fr) auto;
  align-items: end;
  gap: 9px;
  margin-top: 9px;
  padding: 10px;
  background: #f8f8f5;
  border-radius: 8px;
}

.timesheet-adjust-form .ui-field {
  margin: 0;
}

.timesheet-note-field input {
  width: 100%;
}

@media (max-width: 1050px) {
  .timesheet-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timesheet-row {
    grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(100px, .7fr));
  }

  .timesheet-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .timesheet-actions form,
  .timesheet-actions .ui-button {
    width: auto;
  }

  .timesheet-action-hint {
    text-align: left;
  }

  .timesheet-adjust-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timesheet-note-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .timesheet-toolbar,
  .timesheet-shift-head {
    align-items: stretch;
    flex-direction: column;
  }

  .timesheet-date-form {
    width: 100%;
  }

  .timesheet-date-form input[type="date"] {
    flex: 1;
  }

  .timesheet-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .timesheet-row {
    grid-template-columns: 1fr 1fr;
  }

  .timesheet-person,
  .timesheet-actions,
  .timesheet-adjust {
    grid-column: 1 / -1;
  }

  .timesheet-adjust-form {
    grid-template-columns: 1fr;
  }

  .timesheet-note-field {
    grid-column: auto;
  }
}
/* ===== Patch 000.001.017: readable timesheet =====
   Working screens must not force users to read 10–11px service text.
   Timesheet minimum working text is raised to 13–14px while preserving density. */

.timesheet-today-link {
  font-size: 14px;
  font-weight: 700;
}

.timesheet-date-form input[type="date"] {
  min-height: 40px;
  padding: 7px 10px;
  font-size: 14px;
}

.timesheet-date-form .ui-button {
  min-height: 40px;
  font-size: 14px;
}

/* KPI captions and values must be readable at normal desktop distance. */
.timesheet-kpis .schedule-kpi span {
  font-size: 13px;
}

.timesheet-kpis .schedule-kpi strong {
  font-size: 20px;
}

/* Shift header. */
.timesheet-location-line {
  font-size: 18px;
  gap: 8px;
}

.timesheet-shift-head .ui-muted {
  font-size: 14px;
  line-height: 1.45;
}

.timesheet-shift-head .ui-button {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}

/* Employee rows: slightly roomier, but still compact enough for a working register. */
.timesheet-list {
  gap: 9px;
}

.timesheet-row {
  gap: 12px;
  padding: 13px 12px;
}

.timesheet-person {
  gap: 10px;
}

.timesheet-person > div:last-child {
  gap: 3px;
}

.timesheet-person strong {
  font-size: 15px;
  line-height: 1.25;
}

.timesheet-person span {
  font-size: 13px;
  line-height: 1.3;
}

.timesheet-cell {
  gap: 4px;
}

.timesheet-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.timesheet-cell strong {
  font-size: 16px;
  line-height: 1.25;
}

.timesheet-cell small,
.timesheet-action-hint {
  font-size: 13px;
  line-height: 1.4;
}

.timesheet-state {
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1.2;
}

.timesheet-actions .ui-button {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
}

.timesheet-action-hint {
  max-width: 210px;
}

.timesheet-adjust {
  padding-top: 10px;
}

.timesheet-adjust summary {
  font-size: 14px;
  line-height: 1.35;
}

.timesheet-adjust-form {
  gap: 11px;
  margin-top: 11px;
  padding: 12px;
}

.timesheet-adjust-form .ui-field > span {
  font-size: 13px;
  font-weight: 700;
}

.timesheet-adjust-form input {
  min-height: 40px;
  font-size: 14px;
}

.timesheet-adjust-form .ui-button {
  min-height: 40px;
  font-size: 14px;
}

/* Do not let responsive states reintroduce tiny text. */
@media (max-width: 1050px) {
  .timesheet-action-hint {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .timesheet-day-nav > strong {
    font-size: 22px;
  }

  .timesheet-person strong {
    font-size: 16px;
  }

  .timesheet-person span,
  .timesheet-label,
  .timesheet-cell small,
  .timesheet-action-hint,
  .timesheet-adjust summary {
    font-size: 14px;
  }

  .timesheet-cell strong {
    font-size: 17px;
  }
}


/* ===== Patch 000.001.018: compact tabular timesheet =====
   The timesheet is a working register: one assignment = one compact table row.
   Existing open/close/adjust business logic is preserved. */

.timesheet-table-panel {
  padding: 0;
  overflow: hidden;
}

.timesheet-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.timesheet-table {
  width: 100%;
  min-width: 990px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #ffffff;
}

.timesheet-table th,
.timesheet-table td {
  border-bottom: 1px solid #e4e3dd;
  vertical-align: middle;
  text-align: left;
}

.timesheet-table th {
  padding: 9px 10px;
  background: #f5f5f1;
  color: #5f5f59;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.timesheet-table td {
  height: 46px;
  padding: 7px 10px;
  color: #1f1f1d;
  font-size: 14px;
  line-height: 1.25;
}

.timesheet-table tbody tr:last-child td {
  border-bottom: 0;
}

.timesheet-table tbody tr.timesheet-data-row:hover td {
  background: #fafaf7;
}

.timesheet-col-person { width: 19%; }
.timesheet-col-location { width: 13%; }
.timesheet-col-plan { width: 10%; }
.timesheet-col-arrival { width: 8%; }
.timesheet-col-departure { width: 8%; }
.timesheet-col-worked { width: 10%; }
.timesheet-col-late { width: 9%; }
.timesheet-col-status { width: 11%; }
.timesheet-col-actions { width: 12%; }

.timesheet-person-cell { min-width: 0; }

.timesheet-person-name {
  display: block;
  overflow: hidden;
  color: #171715;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timesheet-person-role {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #75756f;
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timesheet-location-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.timesheet-location-cell strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timesheet-shift-link {
  margin-left: 4px;
  color: #666660;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.timesheet-shift-link:hover { color: #11110f; }

.timesheet-time-value,
.timesheet-plan-value,
.timesheet-worked-value {
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.timesheet-late-value {
  color: #b43728;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.timesheet-neutral-value {
  color: #8a8a84;
  font-size: 14px;
}

.timesheet-table-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.timesheet-table-state.state-open {
  background: #e9f5ef;
  color: #176a50;
}

.timesheet-table-state.state-closed {
  background: #efefeb;
  color: #5c5c57;
}

.timesheet-table-state.state-not_opened {
  background: #fff4d6;
  color: #8b6400;
}

.timesheet-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.timesheet-table-actions form { margin: 0; }

.timesheet-table-action-button,
.timesheet-edit-button {
  min-height: 34px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.timesheet-table-action-button {
  min-width: 72px;
  padding: 6px 10px;
}

.timesheet-edit-button {
  width: 34px;
  min-width: 34px;
  padding: 5px;
  border: 1px solid #d7d7d1;
  background: #ffffff;
  color: #4c4c47;
  cursor: pointer;
}

.timesheet-edit-button:hover,
.timesheet-edit-button[aria-expanded="true"] {
  border-color: #a7a79f;
  background: #f4f4ef;
  color: #171715;
}

.timesheet-table-action-button[disabled] {
  border-color: #dfded8;
  background: #f4f4f1;
  color: #8a8a84;
  cursor: default;
  opacity: 1;
}

.timesheet-adjust-row td {
  height: auto;
  padding: 0;
  background: #f8f8f5;
}

.timesheet-adjust-row[hidden] { display: none; }

.timesheet-adjust-service {
  padding: 12px 14px 14px;
  border-top: 1px dashed #d8d7d0;
}

.timesheet-adjust-title {
  margin-bottom: 9px;
  color: #4f4f4a;
  font-size: 14px;
  font-weight: 800;
}

.timesheet-adjust-service .timesheet-adjust-form {
  margin: 0;
  padding: 0;
  background: transparent;
}

.timesheet-adjust-service .timesheet-adjust-form .ui-field > span {
  font-size: 13px;
}

.timesheet-adjust-service .timesheet-adjust-form input {
  min-height: 38px;
  font-size: 14px;
}

.timesheet-adjust-service .timesheet-adjust-form .ui-button {
  min-height: 38px;
  font-size: 14px;
}

.timesheet-empty-table-row td {
  height: auto;
  padding: 18px 14px;
  color: #6f6f69;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 1100px) {
  .timesheet-table { min-width: 960px; }
}

@media (max-width: 720px) {
  .timesheet-table-panel { border-radius: 10px; }
  .timesheet-table { min-width: 940px; }
  .timesheet-table th,
  .timesheet-table td { font-size: 14px; }
}

/* ===== Patch 000.001.019: historical hourly rates ===== */
.employee-list-rate {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.employee-rate-panel {
  margin-top: 16px;
}

.employee-rate-head {
  margin-bottom: 12px;
}

.employee-rate-notice {
  margin-bottom: 12px;
}

.employee-rate-grid {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(520px, 1.6fr);
  gap: 14px;
  align-items: stretch;
}

.employee-rate-current {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
  padding: 16px;
  border: 1px solid #deddd7;
  border-radius: 10px;
  background: #f8f8f5;
}

.employee-rate-current > span {
  color: #696963;
  font-size: 13px;
  font-weight: 700;
}

.employee-rate-current > strong {
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.1;
}

.employee-rate-current > small {
  margin-top: 7px;
  color: #696963;
  font-size: 13px;
}

.employee-rate-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
  border: 1px solid #deddd7;
  border-radius: 10px;
  background: #ffffff;
}

.employee-rate-form .ui-field {
  margin: 0;
}

.employee-rate-form .ui-field > span {
  font-size: 13px;
  font-weight: 700;
}

.employee-rate-form input {
  min-height: 42px;
  font-size: 14px;
}

.employee-rate-form .ui-button {
  min-height: 42px;
  white-space: nowrap;
}

.employee-rate-rule {
  margin-top: 10px;
  color: #666660;
  font-size: 13px;
  line-height: 1.45;
}

.employee-rate-history {
  margin-top: 16px;
}

.employee-rate-history-title {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
}

.employee-rate-table th,
.employee-rate-table td {
  font-size: 14px;
}

.employee-rate-table td strong {
  font-size: 14px;
}

@media (max-width: 980px) {
  .employee-rate-grid {
    grid-template-columns: 1fr;
  }

  .employee-rate-form {
    grid-template-columns: 1fr 1fr;
  }

  .employee-rate-form .ui-button {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .employee-rate-form {
    grid-template-columns: 1fr;
  }

  .employee-rate-form .ui-button {
    grid-column: auto;
    width: 100%;
  }

  .employee-rate-current > strong {
    font-size: 24px;
  }
}

/* ===== Patch 000.001.020: employee card tabs + monthly statistics ===== */

.employee-card-page {
  max-width: 1320px;
}

.employee-card-back {
  margin-bottom: 12px;
}

.employee-card-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid #d8d8d2;
}

.employee-card-tab {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 15px 10px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom-color: #d8d8d2;
  border-radius: 9px 9px 0 0;
  color: #62625d;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.employee-card-tab:hover {
  background: #f8f8f5;
  color: #151515;
}

.employee-card-tab.active {
  background: #ffffff;
  border-color: #d8d8d2;
  border-bottom-color: #ffffff;
  color: #151515;
  font-weight: 800;
}

.employee-card-notice {
  margin-bottom: 14px;
}

.employee-details-layout {
  margin-bottom: 0;
}

.employee-rate-tab-panel {
  margin-top: 0;
}

.employee-stats-panel {
  margin-bottom: 0;
}

.employee-stats-head {
  margin-bottom: 14px;
}

.employee-stats-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.employee-stats-kpi {
  min-width: 0;
  padding: 14px;
  background: #f8f8f5;
  border: 1px solid #deddd7;
  border-radius: 10px;
}

.employee-stats-kpi > span {
  display: block;
  color: #686862;
  font-size: 12px;
  font-weight: 700;
}

.employee-stats-kpi > strong {
  display: block;
  margin-top: 5px;
  color: #151515;
  font-size: 21px;
  line-height: 1.15;
}

.employee-stats-kpi > small {
  display: block;
  margin-top: 5px;
  color: #787872;
  font-size: 11px;
  line-height: 1.35;
}

.employee-stats-warning {
  margin-bottom: 16px;
}

.employee-stats-section-title {
  margin: 2px 0 8px;
  font-size: 15px;
  font-weight: 800;
}

.employee-stats-table {
  min-width: 760px;
}

.employee-stats-table th,
.employee-stats-table td {
  font-size: 13px;
}

.employee-stats-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.employee-stats-location .ui-location-dot {
  width: 10px;
  height: 10px;
  margin: 0;
}

@media (max-width: 1180px) {
  .employee-stats-kpis {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 720px) {
  .employee-card-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .employee-card-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px 9px;
    font-size: 13px;
  }

  .employee-stats-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .employee-stats-kpis {
    grid-template-columns: 1fr;
  }
}

/* ===== Patch 000.001.021: employee shifts tab + tab priority ===== */

.employee-shifts-panel {
  margin-bottom: 0;
}

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

.employee-shifts-month-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.employee-shifts-month-nav > strong {
  min-width: 138px;
  color: #151515;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
}

.employee-shifts-today-link {
  color: #5e5e59;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.employee-shifts-summary {
  margin-bottom: 9px;
  color: #6c6c67;
  font-size: 12px;
}

.employee-shifts-summary strong {
  color: #151515;
  font-size: 13px;
}

.employee-shifts-table {
  min-width: 760px;
}

.employee-shifts-table th,
.employee-shifts-table td {
  font-size: 13px;
}

.employee-shift-date {
  display: grid;
  gap: 2px;
  white-space: nowrap;
}

.employee-shift-date strong {
  font-size: 14px;
}

.employee-shift-date span {
  color: #777771;
  font-size: 11px;
}

.employee-shift-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.employee-shift-location .ui-location-dot {
  width: 10px;
  height: 10px;
  margin: 0;
}

.employee-shift-secondary {
  margin-top: 4px;
}

@media (max-width: 820px) {
  .employee-shifts-head {
    flex-direction: column;
  }

  .employee-shifts-month-nav {
    justify-content: flex-start;
  }
}

/* ===== Patch 000.001.022: employee personal timesheet tab ===== */

.employee-personal-timesheet-panel {
  margin-bottom: 0;
}

.employee-personal-timesheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.employee-personal-timesheet-month-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.employee-personal-timesheet-month-nav > strong {
  min-width: 138px;
  color: #151515;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
}

.employee-personal-timesheet-today-link {
  color: #5e5e59;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.employee-personal-timesheet-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 9px;
  color: #6c6c67;
  font-size: 12px;
}

.employee-personal-timesheet-summary strong {
  color: #151515;
  font-size: 13px;
}

.employee-personal-timesheet-table {
  min-width: 1120px;
}

.employee-personal-timesheet-table th,
.employee-personal-timesheet-table td {
  font-size: 13px;
}

.employee-personal-timesheet-date {
  display: grid;
  gap: 2px;
  white-space: nowrap;
}

.employee-personal-timesheet-date strong {
  font-size: 14px;
}

.employee-personal-timesheet-date span {
  color: #777771;
  font-size: 11px;
}

.employee-personal-timesheet-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.employee-personal-timesheet-location .ui-location-dot {
  width: 10px;
  height: 10px;
  margin: 0;
}

.employee-personal-timesheet-late {
  color: #a53030;
  font-weight: 800;
}

@media (max-width: 820px) {
  .employee-personal-timesheet-head {
    flex-direction: column;
  }

  .employee-personal-timesheet-month-nav {
    justify-content: flex-start;
  }
}

/* ===== Patch 000.001.025: manager payroll report ===== */

.payroll-page {
  max-width: 1320px;
}

.payroll-panel {
  margin-bottom: 0;
}

.payroll-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.payroll-month-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-month-nav > strong {
  min-width: 150px;
  color: #151515;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
}

.payroll-today-link {
  color: #5e5e59;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.payroll-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.payroll-kpi {
  min-width: 0;
  padding: 14px;
  background: #f8f8f5;
  border: 1px solid #deddd7;
  border-radius: 10px;
}

.payroll-kpi > span {
  display: block;
  color: #686862;
  font-size: 12px;
  font-weight: 700;
}

.payroll-kpi > strong {
  display: block;
  margin-top: 5px;
  color: #151515;
  font-size: 21px;
  line-height: 1.15;
}

.payroll-warning {
  margin-bottom: 14px;
}

.payroll-table {
  min-width: 1040px;
}

.payroll-table th,
.payroll-table td {
  font-size: 13px;
  vertical-align: top;
}

.payroll-person {
  display: grid;
  gap: 2px;
  min-width: 170px;
}

.payroll-person strong {
  font-size: 14px;
}

.payroll-person span,
.payroll-muted {
  color: #777771;
  font-size: 11px;
}

.payroll-rate-list {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.payroll-rate-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  width: fit-content;
  color: #686862;
}

.payroll-rate-item strong {
  font-size: 12px;
}

.payroll-rate-item small {
  color: #85857f;
  font-size: 10px;
  white-space: nowrap;
}

.payroll-rate-item.used strong {
  color: #151515;
}

.payroll-amount {
  white-space: nowrap;
  font-size: 14px;
}

.payroll-inactive-row {
  opacity: 0.72;
}

.payroll-footnote {
  margin-top: 12px;
  color: #74746e;
  font-size: 11px;
  line-height: 1.45;
}

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

  .payroll-month-nav {
    justify-content: flex-start;
  }

  .payroll-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .payroll-kpis {
    grid-template-columns: 1fr;
  }
}

/* Patch 000.001.026: shift time rules and automatic close */
.shift-time-rules {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border, #deddd8);
}

.shift-time-rules-title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 800;
}

/* Patch 000.001.027: rational shift workspace + employee self-service replacement */
.shift-edit-workspace {
  display: grid;
  grid-template-columns: minmax(420px, .82fr) minmax(520px, 1.18fr);
  align-items: start;
  gap: 16px;
  max-width: 1180px;
}

.shift-edit-workspace.is-new {
  grid-template-columns: minmax(0, 560px);
  max-width: 560px;
}

.shift-edit-workspace > .ui-form-card,
.shift-edit-workspace > .shift-staffing-panel {
  min-width: 0;
}

.shift-edit-workspace .shift-staffing-panel {
  max-width: none;
  margin-top: 0;
}

.shift-edit-workspace .shift-staffing-grid {
  grid-template-columns: 1fr;
  gap: 18px;
}

.shift-edit-workspace .shift-staffing-head {
  margin-bottom: 14px;
}

.shift-edit-workspace .shift-assign-form {
  padding: 12px;
}

.employee-replacements-panel {
  margin-bottom: 14px;
}

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

.employee-replacement-row {
  display: grid;
  grid-template-columns: 82px minmax(130px, .8fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border, #deded8);
  border-left: 4px solid var(--location-color, #777);
  border-radius: 9px;
  background: #fffdf6;
}

.employee-replacement-date,
.employee-replacement-main,
.employee-replacement-requester {
  display: grid;
  gap: 2px;
}

.employee-replacement-date strong {
  font-size: 18px;
}

.employee-replacement-date span,
.employee-replacement-main span,
.employee-replacement-requester span,
.employee-replacement-requester small {
  color: var(--muted, #6c6c67);
  font-size: 12px;
}

.employee-replacement-requester strong {
  font-size: 13px;
}

.employee-replacement-requester small {
  color: #176a50;
}

.employee-replacement-row form {
  margin: 0;
}

.employee-replacement-accept {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .shift-edit-workspace {
    grid-template-columns: minmax(390px, .9fr) minmax(460px, 1.1fr);
  }
}

@media (max-width: 1020px) {
  .shift-edit-workspace,
  .shift-edit-workspace.is-new {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .shift-edit-workspace .shift-staffing-panel {
    margin-top: 0;
  }
}

@media (max-width: 820px) {
  .employee-replacement-row {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .employee-replacement-requester {
    grid-column: 2;
  }

  .employee-replacement-row form {
    grid-column: 1 / -1;
  }

  .employee-replacement-accept {
    width: 100%;
    min-height: 38px;
  }
}

/* Patch 000.001.028: compact shift form + full-width staffing workspace */
.shift-edit-workspace {
  width: 100%;
  max-width: 1360px;
  grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
  gap: 18px;
}

.shift-edit-workspace.is-new {
  grid-template-columns: minmax(0, 500px);
  max-width: 500px;
}

.shift-edit-workspace .ui-form-card,
.shift-edit-workspace .shift-staffing-panel {
  width: 100%;
}

.shift-edit-workspace .shift-staffing-panel {
  min-width: 0;
}

.shift-edit-workspace .shift-staffing-grid {
  width: 100%;
  grid-template-columns: 1fr;
}

.shift-edit-workspace .shift-assigned-list,
.shift-edit-workspace .shift-assigned-row,
.shift-edit-workspace .shift-assigned-row-main,
.shift-edit-workspace .replacement-accept-form,
.shift-edit-workspace .shift-assign-form {
  width: 100%;
  box-sizing: border-box;
}

.shift-edit-workspace .shift-assigned-row-main > form {
  margin-left: auto;
  flex: 0 0 auto;
}

.shift-edit-workspace .shift-remove-button {
  margin-left: auto;
}

.shift-edit-workspace .replacement-accept-form {
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 10px;
}

.shift-edit-workspace .replacement-accept-form .ui-field,
.shift-edit-workspace .replacement-accept-form select {
  min-width: 0;
  width: 100%;
}

.shift-edit-workspace .shift-assign-form {
  padding: 12px 14px;
}

.shift-field-label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

.shift-help {
  position: relative;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  min-width: 17px;
  border: 1px solid #c9c8c1;
  border-radius: 50%;
  background: #f6f6f2;
  color: #686862;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  outline: none;
}

.shift-help:hover,
.shift-help:focus-visible {
  background: #ecece6;
  border-color: #a9a89f;
  color: #11110f;
}

.shift-help::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: max-content;
  max-width: 300px;
  padding: 8px 10px;
  transform: translateX(-50%) translateY(3px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #1d1d1b;
  border-radius: 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.shift-help::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  z-index: 41;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #1d1d1b;
  transition: opacity .12s ease, visibility .12s ease;
}

.shift-help:hover::after,
.shift-help:focus-visible::after,
.shift-help:hover::before,
.shift-help:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.shift-help:hover::after,
.shift-help:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1180px) {
  .shift-edit-workspace {
    grid-template-columns: minmax(360px, 410px) minmax(0, 1fr);
  }
}

@media (max-width: 1020px) {
  .shift-edit-workspace,
  .shift-edit-workspace.is-new {
    grid-template-columns: 1fr;
    max-width: 760px;
  }
}

@media (max-width: 620px) {
  .shift-edit-workspace .replacement-accept-form {
    grid-template-columns: 1fr;
  }

  .shift-edit-workspace .replacement-accept-button {
    width: 100%;
  }

  .shift-help::after {
    left: 0;
    transform: translateX(0) translateY(3px);
    max-width: min(280px, calc(100vw - 48px));
  }

  .shift-help:hover::after,
  .shift-help:focus-visible::after {
    transform: translateX(0) translateY(0);
  }
}

/* Patch 000.001.030: replacement row must use the full staffing-card width.
   The previous implicit grid track shrank to content, leaving unused space on the right. */
.shift-edit-workspace .shift-assigned-list {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.shift-edit-workspace .shift-assigned-row {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shift-edit-workspace .shift-assigned-row.has-replacement-request {
  grid-template-columns: minmax(0, 1fr);
}

.shift-edit-workspace .shift-assigned-row.has-replacement-request > .shift-assigned-row-main,
.shift-edit-workspace .shift-assigned-row.has-replacement-request > .replacement-accept-form {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shift-edit-workspace .shift-assigned-row.has-replacement-request .shift-assigned-row-main {
  justify-content: space-between;
}

.shift-edit-workspace .shift-assigned-row.has-replacement-request .shift-assigned-row-main > form {
  margin-left: auto;
}

.shift-edit-workspace .shift-assigned-row.has-replacement-request .replacement-accept-form {
  grid-template-columns: minmax(0, 1fr) auto;
}


/* Patch 000.001.031: one employee = one desktop row, including replacement controls. */
.shift-edit-workspace .shift-assigned-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.shift-edit-workspace .shift-assigned-row.has-replacement-request {
  grid-template-columns: minmax(190px, .70fr) minmax(0, 1.30fr) auto;
  align-items: center;
}

.shift-edit-workspace .shift-assigned-person {
  min-width: 0;
}

.shift-edit-workspace .shift-assigned-row.has-replacement-request .replacement-accept-form {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.shift-edit-workspace .replacement-accept-field {
  min-width: 0;
  margin: 0;
}

.shift-edit-workspace .replacement-accept-field select {
  width: 100%;
  min-width: 0;
}

.shift-edit-workspace .replacement-accept-button {
  min-height: 38px;
  align-self: end;
  white-space: nowrap;
}

.shift-edit-workspace .shift-remove-form {
  margin: 0;
  justify-self: end;
  align-self: center;
}

.shift-edit-workspace .shift-remove-form .shift-remove-button {
  margin-left: 0;
}

@media (max-width: 1180px) {
  .shift-edit-workspace .shift-assigned-row.has-replacement-request {
    grid-template-columns: minmax(165px, .65fr) minmax(0, 1.35fr) auto;
    gap: 9px;
  }
}

@media (max-width: 1020px) {
  .shift-edit-workspace .shift-assigned-row.has-replacement-request {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .shift-edit-workspace .shift-assigned-row.has-replacement-request .replacement-accept-form {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .shift-edit-workspace .shift-assigned-row.has-replacement-request .shift-remove-form {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 620px) {
  .shift-edit-workspace .shift-assigned-row.has-replacement-request .replacement-accept-form {
    grid-template-columns: 1fr;
  }
}

/* Patch 000.001.032: current-month worked time in employee home. */
.employee-month-panel {
  margin-bottom: 14px;
}

.employee-month-panel-head {
  margin-bottom: 12px;
}

.employee-month-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.employee-month-kpi {
  min-width: 0;
  padding: 13px 14px;
  background: #f8f8f5;
  border: 1px solid #deded8;
  border-radius: 10px;
}

.employee-month-kpi span,
.employee-month-kpi small {
  display: block;
  color: #6c6c67;
  font-size: 12px;
}

.employee-month-kpi strong {
  display: block;
  margin-top: 4px;
  color: #151515;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.1;
}

.employee-month-kpi small {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .employee-month-kpis {
    grid-template-columns: 1fr;
  }
}

/* ===== Patch 000.001.033: schedule location filter ===== */

.schedule-location-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.schedule-location-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #d9d9d3;
  border-radius: 999px;
  background: #ffffff;
  color: #555550;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.schedule-location-filter-item:hover {
  border-color: #bdbdb6;
  background: #f4f4f0;
  color: #151515;
}

.schedule-location-filter-item.active {
  border-color: #151515;
  background: #151515;
  color: #ffffff;
}

.schedule-location-filter-item.active .schedule-legend-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.78);
}

@media (max-width: 700px) {
  .schedule-location-filter {
    width: 100%;
  }

  .schedule-location-filter-item {
    min-height: 34px;
  }
}

/* ===== Patch 000.001.034: action-oriented manager dashboard ===== */
.dashboard-action-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.dashboard-action-kpi {
  min-width: 0;
  padding: 15px 16px;
  background: #ffffff;
  border: 1px solid #deded8;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dashboard-action-kpi:hover {
  border-color: #b9b9b2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  transform: translateY(-1px);
}

.dashboard-action-kpi.attention {
  background: #fffaf2;
  border-color: #ead4aa;
}

.dashboard-action-kpi.warning {
  background: #fffaf0;
  border-color: #ead6aa;
}

.dashboard-action-kpi.danger {
  background: #fff5f3;
  border-color: #edc4bc;
}

.dashboard-action-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #62625d;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-action-kpi > strong {
  display: block;
  margin: 5px 0 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  line-height: 1;
}

.dashboard-action-kpi > small {
  display: block;
  overflow: hidden;
  color: #77736e;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-actions-panel {
  max-width: none;
}

.dashboard-actions-head,
.dashboard-actions-links {
  display: flex;
  align-items: center;
}

.dashboard-actions-head {
  justify-content: space-between;
  gap: 16px;
}

.dashboard-actions-links {
  gap: 8px;
  flex: 0 0 auto;
}

.dashboard-action-list {
  display: grid;
  gap: 6px;
}

.dashboard-action-row {
  display: grid;
  grid-template-columns: 8px 118px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e5e2dc;
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
}

.dashboard-action-row:hover {
  background: #faf9f6;
  border-color: #cbc8c1;
}

.dashboard-action-row.kind-overdue {
  background: #fff8f6;
  border-color: #edc8c0;
}

.dashboard-action-row.kind-replacement,
.dashboard-action-row.kind-shortage {
  background: #fffdf8;
}

.dashboard-action-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.dashboard-action-type {
  color: #686862;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-action-main {
  min-width: 0;
}

.dashboard-action-main strong,
.dashboard-action-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-action-main strong {
  font-size: 13px;
}

.dashboard-action-main small {
  margin-top: 2px;
  color: #74746f;
  font-size: 11px;
}

.dashboard-action-open {
  color: #4f4f4a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-actions-more {
  padding: 10px 2px 0;
  color: #77736e;
  font-size: 11px;
}

.dashboard-all-clear {
  margin-top: 2px;
}

@media (max-width: 1040px) {
  .dashboard-action-kpis {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

@media (max-width: 820px) {
  .dashboard-action-kpis {
    grid-template-columns: 1fr;
  }

  .dashboard-actions-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-action-row {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }

  .dashboard-action-type {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-action-main {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .dashboard-action-open {
    grid-column: 3;
    grid-row: 1;
  }
}

/* ===== Patch 000.001.035: dashboard workplace filter + inline staff assignment ===== */
.dashboard-location-filter {
  flex: 0 1 auto;
  justify-content: flex-end;
}

.shift-edit-workspace .shift-assign-form.shift-assign-form-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.shift-edit-workspace .shift-assign-form.shift-assign-form-inline > .ui-field {
  min-width: 0;
  margin: 0;
}

.shift-edit-workspace .shift-assign-form.shift-assign-form-inline select {
  width: 100%;
  min-width: 0;
}

.shift-edit-workspace .shift-assign-form.shift-assign-form-inline > .ui-button {
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .dashboard-location-filter {
    justify-content: flex-start;
  }

  .shift-edit-workspace .shift-assign-form.shift-assign-form-inline {
    grid-template-columns: 1fr;
  }

  .shift-edit-workspace .shift-assign-form.shift-assign-form-inline > .ui-button {
    width: 100%;
  }
}

/* 000.001.040 — imported October schedule metadata */
.schedule-shift-event {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  color: #4f4b44;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-shift-event.mobile {
  margin: 5px 0 2px;
  white-space: normal;
}

.schedule-review-badge {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid #d49a27;
  border-radius: 999px;
  background: #fff8df;
  color: #8a5b00;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.schedule-review-badge.mobile {
  margin: 5px 0;
}

.assignment-review-note {
  margin-top: 4px;
  color: #8a5b00;
  font-size: 12px;
  font-weight: 800;
}

.assignment-review-confirm-form {
  flex: 0 0 auto;
}

.assignment-review-confirm {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d49a27;
  border-radius: 8px;
  background: #fff8df;
  color: #654200;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.assignment-review-confirm:hover {
  background: #fff1bd;
}

@media (max-width: 760px) {
  .assignment-review-confirm-form {
    width: 100%;
  }

  .assignment-review-confirm {
    width: 100%;
  }
}

/* ===== Patch 000.001.045: unified table row typography =====
   Table body data should stay calm and readable. Column headers, page titles,
   buttons and dedicated status badges keep their own emphasis. */
table tbody td {
  font-weight: 400;
}

table tbody td strong,
table tbody td b,
table tbody td a:not(.ui-button),
table tbody td div:not(.timesheet-table-actions),
table tbody td span:not(.ui-pill):not(.timesheet-table-state) {
  font-weight: 400 !important;
}

/* Dashboard action rows follow the same visual hierarchy as table data. */
.dashboard-action-type,
.dashboard-action-main strong,
.dashboard-action-open {
  font-weight: 400;
}

/* Known table-value classes that previously carried their own bold weight. */
.timesheet-person-name,
.timesheet-time-value,
.timesheet-plan-value,
.timesheet-worked-value,
.timesheet-late-value,
.timesheet-late,
.employee-personal-timesheet-late,
.employee-list-rate {
  font-weight: 400 !important;
}

/* ===== Patch 000.001.046: compact mobile header + hamburger drawer ===== */
.ui-mobile-header,
.ui-mobile-nav-backdrop,
.ui-mobile-sidebar-head {
  display: none;
}

@media (max-width: 820px) {
  body.ui-mobile-nav-open {
    overflow: hidden;
  }

  .ui-shell {
    display: block;
    min-height: 100vh;
  }

  .ui-mobile-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 8px 14px;
    background: #ffffff;
    border-bottom: 1px solid var(--border, #deded8);
  }

  .ui-mobile-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .ui-mobile-brand img {
    display: block;
    width: 86px;
    max-height: 48px;
    height: auto;
  }

  .ui-mobile-menu-button,
  .ui-mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border, #deded8);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text, #151515);
    cursor: pointer;
  }

  .ui-mobile-menu-button {
    flex-direction: column;
    gap: 5px;
  }

  .ui-mobile-menu-button span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .ui-mobile-menu-close {
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
  }

  .ui-mobile-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--border, #deded8);
    font-size: 15px;
    font-weight: 600;
  }

  .ui-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(86vw, 320px);
    height: 100dvh;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    border-right: 1px solid var(--border, #deded8);
    border-bottom: 0;
    box-shadow: 14px 0 34px rgba(0, 0, 0, 0.12);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  body.ui-mobile-nav-open .ui-sidebar {
    transform: translateX(0);
  }

  .ui-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.ui-mobile-nav-open .ui-mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .ui-sidebar .ui-brand {
    padding: 16px 4px 18px;
  }

  .ui-sidebar .ui-brand-logo {
    width: 112px;
  }

  .ui-sidebar .ui-nav {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 4px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ui-sidebar .ui-nav-item {
    min-height: 42px;
    padding: 11px 12px;
    text-align: left;
    font-size: 14px;
  }

  .ui-sidebar .ui-sidebar-foot {
    display: block;
    margin-top: auto;
    padding: 14px 4px 0;
  }

  .ui-sidebar .ui-user-role,
  .ui-sidebar .ui-profile-link,
  .ui-sidebar .ui-version {
    display: block;
  }

  .ui-sidebar .ui-profile-link {
    margin-top: 10px;
  }

  .ui-sidebar .ui-version {
    margin: 10px 0 8px;
  }

  .ui-sidebar .ui-sidebar-foot form {
    margin: 0;
  }

  .ui-sidebar .ui-logout {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-sidebar,
  .ui-mobile-nav-backdrop {
    transition: none;
  }
}

/* ===== Patch 000.001.047: mobile schedule day filter ===== */
.schedule-mobile-day-filter {
  display: none;
}

.schedule-mobile-filter-empty[hidden],
.schedule-mobile-day[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .schedule-mobile-day-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #dfdfda;
    border-radius: 12px;
    background: #ffffff;
  }

  .schedule-mobile-day-filter-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #555550;
    font-size: 12px;
  }

  .schedule-mobile-day-filter-field input {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #d0d0ca;
    border-radius: 8px;
    background: #ffffff;
    color: #151515;
    font: inherit;
    font-size: 14px;
  }

  .schedule-mobile-day-filter-field input:focus {
    outline: 2px solid rgba(21, 21, 21, .10);
    border-color: #151515;
  }

  .schedule-mobile-all-days {
    min-height: 42px;
    padding-inline: 13px;
    white-space: nowrap;
  }

  .schedule-mobile-all-days.active {
    border-color: #151515;
    background: #151515;
    color: #ffffff;
  }

  .schedule-mobile-filter-empty {
    margin-top: 8px;
  }
}

@media (max-width: 390px) {
  .schedule-mobile-day-filter {
    grid-template-columns: 1fr;
  }

  .schedule-mobile-all-days {
    width: 100%;
  }
}

/* ===== Patch 000.001.048: mobile schedule controls + employee/timesheet cards ===== */
.employees-mobile-list,
.timesheet-mobile-list {
  display: none;
}

@media (max-width: 700px) {
  /* Schedule: compact day navigator with previous/next day and month icon. */
  .schedule-mobile-day-filter {
    grid-template-columns: 40px 156px 40px 40px;
    align-items: center;
    justify-content: start;
    gap: 8px;
    padding: 10px;
  }

  .schedule-mobile-day-filter-field {
    display: block;
    min-width: 0;
  }

  .schedule-mobile-day-filter-field > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .schedule-mobile-day-filter-field input {
    width: 156px;
    min-width: 0;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 14px;
  }

  .schedule-mobile-day-step,
  .schedule-mobile-all-days {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid #d0d0ca;
    border-radius: 9px;
    background: #ffffff;
    color: #151515;
    cursor: pointer;
  }

  .schedule-mobile-day-step svg,
  .schedule-mobile-all-days svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .schedule-mobile-day-step:disabled {
    color: #adada7;
    background: #f5f5f2;
    cursor: default;
  }

  .schedule-mobile-all-days.active {
    border-color: #151515;
    background: #151515;
    color: #ffffff;
  }

  /* Employees: replace the wide desktop table with readable cards. */
  .employees-desktop-table-wrap {
    display: none;
  }

  .employees-mobile-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
  }

  .employees-mobile-card {
    padding: 14px;
    border: 1px solid #dfdfda;
    border-radius: 12px;
    background: #ffffff;
  }

  .employees-mobile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .employees-mobile-person {
    min-width: 0;
    align-items: flex-start;
  }

  .employees-mobile-person > div:last-child {
    min-width: 0;
  }

  .employees-mobile-name {
    color: #171715;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
  }

  .employees-mobile-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #ecece7;
  }

  .employees-mobile-detail {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .employees-mobile-detail > span {
    color: #777771;
    font-size: 12px;
  }

  .employees-mobile-detail > strong {
    overflow-wrap: anywhere;
    color: #1f1f1d;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
  }

  .employees-mobile-access {
    grid-column: 1 / -1;
  }

  .employees-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }

  .employees-mobile-actions form,
  .employees-mobile-actions .ui-button {
    width: 100%;
  }

  .employees-mobile-actions .ui-button {
    min-height: 40px;
  }

  /* Timesheet: keep desktop table for large screens, cards for phones. */
  .timesheet-table-panel {
    display: none;
  }

  .timesheet-mobile-list {
    display: grid;
    gap: 10px;
  }

  .timesheet-mobile-card {
    padding: 14px;
    border: 1px solid #dfdfda;
    border-radius: 12px;
    background: #ffffff;
  }

  .timesheet-mobile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .timesheet-mobile-head > div:first-child {
    min-width: 0;
  }

  .timesheet-mobile-name {
    color: #171715;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
  }

  .timesheet-mobile-shift-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #ecece7;
    color: #2d2d2a;
    font-size: 14px;
  }

  .timesheet-mobile-plan {
    margin-left: auto;
    white-space: nowrap;
  }

  .timesheet-mobile-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .timesheet-mobile-metrics > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 9px;
    background: #f7f7f4;
  }

  .timesheet-mobile-metrics span {
    color: #777771;
    font-size: 11px;
  }

  .timesheet-mobile-metrics strong {
    color: #1f1f1d;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
  }

  .timesheet-mobile-actions {
    margin-top: 12px;
  }

  .timesheet-mobile-actions form,
  .timesheet-mobile-actions .ui-button {
    width: 100%;
  }

  .timesheet-mobile-actions .ui-button {
    min-height: 42px;
  }

  .timesheet-mobile-adjust {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #deddd7;
  }

  .timesheet-mobile-adjust summary {
    color: #5f5f59;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .timesheet-mobile-adjust .timesheet-adjust-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
    padding: 0;
    background: transparent;
  }

  .timesheet-mobile-adjust .ui-field,
  .timesheet-mobile-adjust .timesheet-note-field {
    grid-column: auto;
  }

  .timesheet-mobile-empty {
    margin: 0;
  }
}

@media (max-width: 350px) {
  .schedule-mobile-day-filter {
    grid-template-columns: 38px minmax(0, 1fr) 38px 38px;
    gap: 6px;
  }

  .schedule-mobile-day-filter-field input {
    width: 100%;
  }

  .schedule-mobile-day-step,
  .schedule-mobile-all-days {
    width: 38px;
    min-width: 38px;
  }
}

/* ===== Patch 000.001.049: mobile compact actions + employee search + timesheet day icons ===== */
.ui-mobile-action-icon {
  display: none;
}

.employees-mobile-search {
  display: none;
}

.timesheet-day-step svg,
.timesheet-today-button svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.timesheet-today-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid #d0d0ca;
  border-radius: 8px;
  background: #ffffff;
  color: #151515;
  text-decoration: none;
}

@media (max-width: 700px) {
  /* Short create actions sit beside the page title as touch-friendly icon buttons. */
  .ui-topbar {
    position: relative;
  }

  .ui-topbar .ui-mobile-icon-action {
    position: absolute;
    top: 16px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 10px;
  }

  .ui-mobile-action-label {
    display: none;
  }

  .ui-mobile-action-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* Employee search is intentionally mobile-first; desktop table stays unchanged. */
  .employees-mobile-search {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
  }

  .employees-mobile-search > label {
    color: #65655f;
    font-size: 12px;
  }

  .employees-mobile-search-field {
    position: relative;
  }

  .employees-mobile-search-field svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #777771;
    stroke-width: 1.8;
    stroke-linecap: round;
    pointer-events: none;
  }

  .employees-mobile-search-field input {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px 9px 39px;
    border: 1px solid #d0d0ca;
    border-radius: 10px;
    background: #ffffff;
    color: #171715;
    font: inherit;
    font-size: 14px;
  }

  .employees-mobile-search-field input:focus {
    outline: 2px solid rgba(21, 21, 21, .10);
    border-color: #151515;
  }

  .employees-mobile-search-empty {
    margin-top: 0;
  }

  .employees-mobile-card[hidden] {
    display: none !important;
  }

  /* Timesheet day navigation: large icon targets instead of tiny text arrows/Today link. */
  .timesheet-day-nav {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .timesheet-day-nav > strong {
    min-width: 0;
    text-align: center;
    font-size: 21px;
    white-space: nowrap;
  }

  .timesheet-day-step,
  .timesheet-today-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid #d0d0ca;
    border-radius: 9px;
    background: #ffffff;
    color: #151515;
    text-decoration: none;
  }

  .timesheet-day-step svg,
  .timesheet-today-button svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (max-width: 360px) {
  .timesheet-day-nav {
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px;
    gap: 6px;
  }

  .timesheet-day-step,
  .timesheet-today-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .timesheet-day-nav > strong {
    font-size: 19px;
  }
}


/* ===== Patch 000.001.050: passport data and protected employee documents ===== */
.passport-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 16px;
  align-items: start;
}
.passport-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.passport-fields-grid .wide { grid-column: 1 / -1; }
.passport-upload-permission { margin-top: 4px; padding: 12px; border: 1px solid #deded8; border-radius: 10px; background: #fafaf7; }
.passport-upload-permission label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.passport-upload-permission input { margin-top: 3px; }
.passport-documents-list { display: grid; gap: 8px; margin-bottom: 12px; }
.passport-document-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #deded8; border-radius: 10px; background: #fff; }
.passport-document-name { font-weight: 500; overflow-wrap: anywhere; }
.passport-document-meta { margin-top: 2px; color: #777771; font-size: 12px; }
.passport-document-actions { display: flex; gap: 6px; align-items: center; }
.passport-upload-form { display: grid; gap: 10px; }
.passport-dropzone { border: 2px dashed #c9c9c2; border-radius: 12px; padding: 20px 16px; background: #fbfbf8; text-align: center; cursor: default; transition: border-color .15s ease, background .15s ease; }
.passport-dropzone:focus { outline: 2px solid rgba(21,21,21,.1); border-color: #151515; }
.passport-dropzone.is-dragover { border-color: #151515; background: #f3f3ee; }
.passport-dropzone-title { font-size: 15px; font-weight: 600; }
.passport-dropzone-note { margin-top: 5px; color: #777771; font-size: 13px; line-height: 1.35; }
.passport-upload-buttons { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.passport-selected-files { display: grid; gap: 6px; }
.passport-selected-file { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #f5f5f1; font-size: 13px; }
.passport-selected-file span:first-child { overflow-wrap: anywhere; }
.passport-upload-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.passport-upload-limit { color: #777771; font-size: 12px; }
.employee-documents-self-panel { margin-top: 16px; }
.employee-documents-self-panel .passport-dropzone { padding: 16px 12px; }

@media (max-width: 900px) {
  .passport-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .passport-fields-grid { grid-template-columns: 1fr; }
  .passport-fields-grid .wide { grid-column: auto; }
  .passport-document-row { grid-template-columns: 1fr; }
  .passport-document-actions { justify-content: flex-start; }
  .passport-upload-submit-row { align-items: stretch; flex-direction: column; }
  .passport-upload-submit-row .ui-button { width: 100%; }
}

/* ===== Patch 000.001.051: passport async upload and manager document gallery ===== */
.passport-async-message { margin-bottom: 12px; }
.passport-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.passport-gallery-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #deded8;
  border-radius: 12px;
  background: #fff;
}
.passport-gallery-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f3ef;
  text-decoration: none;
}
.passport-gallery-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
.passport-gallery-filetype {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #d7d7d1;
  color: #2b2b29;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
}
.passport-gallery-delete {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #a21c13;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
}
.passport-gallery-delete:hover { background: #fff4f2; }
.passport-gallery-delete:disabled { opacity: .55; cursor: wait; }
.passport-gallery-caption { padding: 9px 10px 10px; min-width: 0; }
.passport-gallery-card .passport-document-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passport-gallery-empty { margin-bottom: 12px; }

@media (max-width: 1100px) {
  .passport-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .passport-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .passport-gallery-delete { width: 36px; height: 36px; font-size: 25px; }
  .passport-gallery-caption { padding: 8px; }
}

/* 000.001.054 — training module */
.training-manager-tabs,
.training-lesson-tabs,
.training-reference-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.training-manager-tabs {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, #d8d8d2);
}
.training-manager-tabs a,
.training-reference-link {
  color: inherit;
  text-decoration: none;
  font-weight: 650;
}
.training-manager-tabs a {
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
}
.training-manager-tabs a.active { border-bottom-color: #171717; }
.training-lesson-tabs {
  overflow-x: auto;
  padding: 2px 0 8px;
  margin-bottom: 10px;
  scrollbar-width: thin;
}
.training-lesson-tab {
  flex: 0 0 auto;
  min-width: 112px;
  max-width: 180px;
  min-height: 54px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid #d9d8d2;
  border-radius: 11px;
  background: #fff;
  color: #171717;
  text-decoration: none;
}
.training-lesson-tab.active { border-color: #171717; box-shadow: inset 0 0 0 1px #171717; }
.training-lesson-tab.completed { background: #f2faf5; }
.training-tab-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f0efe9;
  font-weight: 750;
  font-size: 13px;
}
.training-tab-title { font-size: 12px; line-height: 1.2; font-weight: 650; }
.training-tab-check { color: #1b7a50; font-weight: 800; }
.training-reference-row { justify-content: space-between; margin-bottom: 14px; }
.training-reference-link {
  padding: 9px 12px;
  border: 1px solid #d9d8d2;
  border-radius: 9px;
  background: #fff;
}
.training-reference-link.active { border-color: #171717; }
.training-article { max-width: 1120px; margin: 0 auto; }
.training-article-head,
.training-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.training-article-head { margin-bottom: 18px; }
.training-article-head h2,
.training-people-section h2,
.training-map-card h2 { margin: 0; }
.training-kicker { font-size: 12px; color: #777; margin-bottom: 4px; }
.training-body { font-size: 16px; line-height: 1.62; }
.training-body h2 { margin: 30px 0 12px; }
.training-body h3 { margin: 24px 0 10px; }
.training-body p { margin: 0 0 14px; }
.training-body ul,
.training-body ol { margin: 0 0 16px; padding-left: 24px; }
.training-body li { margin-bottom: 7px; }
.training-body blockquote,
.training-important,
.training-note {
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 4px solid #9b1736;
  background: #fbf5f6;
  border-radius: 0 8px 8px 0;
}
.training-seat-table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; }
.training-seat-table th,
.training-seat-table td { border: 1px solid #d9d8d2; padding: 8px 10px; text-align: left; }
.training-seat-table th { background: #f4f3ef; }
.training-people-section { margin: 6px 0 28px; }
.training-people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.training-person-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid #deddd7;
  border-radius: 12px;
  background: #fff;
}
.training-person-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.training-person-card figcaption { padding: 10px 12px 12px; display: grid; gap: 2px; }
.training-person-card figcaption span { color: #6f6f69; font-size: 12px; }
.training-map-card { margin: 0 0 30px; padding: 18px; border: 1px solid #deddd7; border-radius: 14px; background: #fbfaf7; }
.training-map-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 14px 0 12px; }
.training-map-tab {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid #d6d5cf;
  border-radius: 9px;
  background: #fff;
  padding: 7px 11px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.training-map-tab.active { background: #171717; color: #fff; border-color: #171717; }
.training-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: stretch; }
.training-map-stage { min-width: 0; }
.training-map-svg { width: 100%; display: none; max-height: 520px; }
.training-map-svg.active { display: block; }
.training-map-shell { fill: #fff; stroke: #dddcd6; stroke-width: 2; }
.training-map-stage-shape { fill: #232323; }
.training-map-label { fill: #fff; font-size: 18px; font-weight: 800; }
.training-map-floor-title { fill: #202020; font-size: 24px; font-weight: 800; }
.training-map-zone { cursor: pointer; outline: none; }
.training-map-zone > path,
.training-map-zone > rect { fill: #f3eee3; stroke: #bfae8e; stroke-width: 2; transition: .15s ease; }
.training-map-zone text { pointer-events: none; fill: #252525; font-size: 18px; font-weight: 750; }
.training-map-zone.small text { font-size: 13px; }
.training-map-zone:hover > path,
.training-map-zone:hover > rect,
.training-map-zone:focus > path,
.training-map-zone:focus > rect,
.training-map-zone.selected > path,
.training-map-zone.selected > rect { fill: #f7dde4; stroke: #9b1736; stroke-width: 3; }
.training-map-info { border: 1px solid #d9d8d2; border-radius: 12px; background: #fff; padding: 16px; }
.training-map-info-label { font-weight: 800; margin-bottom: 8px; }
.training-map-info-text { color: #5f5f5a; line-height: 1.5; }
.training-complete-block { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e0dfda; }
.training-complete-done { padding: 14px; border-radius: 10px; background: #edf8f1; color: #17623f; font-weight: 700; }
.training-complete-button { min-height: 46px; }
.training-progress-panel { max-width: 1200px; }
.training-progress-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.training-progress-summary > div { border: 1px solid #deddd7; border-radius: 10px; padding: 12px; display: grid; gap: 4px; }
.training-progress-summary span { color: #777; font-size: 12px; }
.training-progress-summary strong { font-size: 20px; }
.training-progress-list { display: grid; gap: 8px; }
.training-progress-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(120px, 1fr) 90px 180px;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid #deddd7;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.training-progress-row:hover { border-color: #999; }
.training-progress-person { display: grid; gap: 2px; }
.training-progress-person span,
.training-progress-meta { font-size: 12px; color: #777; }
.training-progress-meter { height: 8px; border-radius: 999px; background: #ecebe6; overflow: hidden; }
.training-progress-meter span { display: block; height: 100%; background: #1f7650; }
.training-progress-count { display: flex; gap: 7px; align-items: baseline; }
.training-progress-count span { color: #777; font-size: 12px; }
.training-progress-meta { display: flex; gap: 12px; justify-content: flex-end; }
.employee-training-list { display: grid; gap: 8px; }
.employee-training-row {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) repeat(4, minmax(95px, .7fr)) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #deddd7;
  border-radius: 10px;
  padding: 10px 12px;
}
.employee-training-lesson { display: flex; align-items: center; gap: 10px; min-width: 0; }
.employee-training-stat { display: grid; gap: 2px; }
.employee-training-stat span { color: #777; font-size: 11px; }
.employee-training-stat strong { font-size: 13px; }
.training-editor-form { max-width: 1000px; display: grid; gap: 16px; }
.training-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: #f3f2ed; border: 1px solid #d9d8d2; border-bottom: 0; border-radius: 9px 9px 0 0; }
.training-editor-toolbar button { min-height: 34px; padding: 5px 9px; border: 1px solid #d2d1cb; border-radius: 6px; background: #fff; cursor: pointer; }
.training-editor { min-height: 440px; padding: 16px; border: 1px solid #d9d8d2; border-radius: 0 0 9px 9px; background: #fff; line-height: 1.55; overflow: auto; }

@media (max-width: 900px) {
  .training-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-map-layout { grid-template-columns: 1fr; }
  .training-map-info { min-height: 110px; }
  .training-progress-row { grid-template-columns: 1fr 120px 70px; }
  .training-progress-meta { grid-column: 1 / -1; justify-content: flex-start; }
  .employee-training-row { grid-template-columns: 1fr 1fr; }
  .employee-training-lesson { grid-column: 1 / -1; justify-content: space-between; }
}

@media (max-width: 640px) {
  .training-reference-row { align-items: stretch; }
  .training-reference-row .ui-button { white-space: nowrap; }
  .training-article { padding: 14px; }
  .training-body { font-size: 15px; }
  .training-people-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .training-person-card figcaption { padding: 8px; font-size: 13px; }
  .training-map-card { padding: 12px; }
  .training-map-floor-title { font-size: 22px; }
  .training-map-zone text { font-size: 15px; }
  .training-progress-summary { grid-template-columns: 1fr; }
  .training-progress-row { grid-template-columns: 1fr 80px; gap: 8px; }
  .training-progress-meter { grid-column: 1 / -1; order: 3; }
  .training-progress-meta { order: 4; grid-column: 1 / -1; }
  .training-progress-count { justify-self: end; }
  .employee-training-row { grid-template-columns: 1fr 1fr; }
  .training-seat-table { font-size: 12px; }
  .training-seat-table th,
  .training-seat-table td { padding: 6px; }
}

/* ===== Patch 000.001.056: training editor fidelity + sticky toolbar ===== */
/*
 * The editor sits inside .ui-field, which is bold by default for form labels.
 * Reset the editable document itself to normal body weight so its appearance
 * matches the rendered training material. Explicit strong/b headings remain bold.
 */
.training-editor {
  font-weight: 400;
}

/* Keep formatting actions reachable while a long lesson is being edited. */
.training-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 5px 12px rgba(20, 20, 20, .06);
}

/* ===== Patch 000.001.057: employee training status column ===== */
/* Status is a dedicated second column: completed = green, started = yellow, not started = red. */
.employee-training-row {
  grid-template-columns: minmax(240px, 2fr) minmax(105px, .72fr) repeat(4, minmax(95px, .7fr)) auto;
}

.employee-training-status {
  display: flex;
  align-items: center;
  min-width: 0;
}

.employee-training-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.employee-training-status-badge.is-completed {
  background: #e9f5ef;
  color: #176a50;
}

.employee-training-status-badge.is-started {
  background: #fff4d6;
  color: #8b6400;
}

.employee-training-status-badge.is-pending {
  background: #fff0ef;
  color: #a53030;
}

@media (max-width: 900px) {
  .employee-training-status {
    justify-self: start;
  }
}

/* Patch 000.001.058: manager volunteer queue and saved-choice messages. */
.schedule-preference-notice {
  margin-bottom: 10px;
}

.schedule-waiting-badge {
  position: relative;
  z-index: 4; /* Above the shift's manager click overlay. */
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 7px;
  border: 1px solid #d39b29;
  border-radius: 7px;
  background: #fff5d8;
  color: #76520c;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.schedule-waiting-badge.mobile {
  margin-top: 8px;
  font-size: 12px;
}

.shift-waiting-panel {
  margin: 8px 0 14px;
  padding: 11px;
  border: 1px solid #dfcc99;
  border-radius: 10px;
  background: #fffbef;
}

.shift-waiting-title {
  margin-bottom: 9px;
  color: #76520c;
  font-size: 13px;
  font-weight: 800;
}

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

.shift-waiting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e9dfc4;
  border-radius: 8px;
  background: #fff;
}

.shift-waiting-person {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.shift-waiting-person strong {
  overflow-wrap: anywhere;
}

.shift-waiting-ready,
.shift-waiting-conflict,
.shift-waiting-empty {
  font-size: 11px;
  color: #666660;
}

.shift-waiting-conflict {
  color: #a53030;
}

.shift-waiting-row form {
  flex: 0 0 auto;
}

.shift-waiting-row button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .schedule-preference-form.mobile .schedule-preference-button {
    flex: 1 1 42%;
    min-width: 0;
    white-space: normal;
  }
  .shift-waiting-row form,
  .shift-waiting-row form button {
    width: 100%;
  }
}

/* 060: non-action status label for applicants in the automatic waitlist. */
.schedule-queue-label {
  display: inline-flex; align-items: center; align-self: center;
  padding: 3px 7px; border-radius: 7px;
  color: #795b22; background: #fff2d5;
  font-size: 11px; font-weight: 700; line-height: 1.35;
}

/* 073: manager theatre settings are simple flags + parameters. */
.theatre-settings-simple {
  display: inline-grid;
  grid-template-columns: max-content;
  gap: 12px;
  width: max-content;
  max-width: 100%;
}

.theatre-settings-error {
  width: min(100%, 760px);
  margin-bottom: 12px;
}

.theatre-settings-card {
  position: relative;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.theatre-settings-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.theatre-settings-card-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.theatre-settings-card-head .ui-muted {
  font-size: 11px;
}

.theatre-settings-params {
  display: grid;
  grid-template-columns: max-content 58px;
  align-items: center;
  column-gap: 18px;
  row-gap: 6px;
  width: max-content;
  max-width: 100%;
}

.theatre-setting-form,
.theatre-setting-line {
  display: contents;
}

.theatre-setting-line > span {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

.theatre-setting-checkbox {
  justify-self: center;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #111111;
  cursor: pointer;
}

.theatre-setting-number {
  justify-self: center;
  width: 58px;
  min-height: 34px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #ffffff;
  color: #161616;
  font: inherit;
  font-weight: 700;
  text-align: center;
}

.theatre-setting-number:focus,
.theatre-setting-checkbox:focus-visible {
  outline: 2px solid #1b1b1b;
  outline-offset: 2px;
}

.theatre-settings-card.is-saving {
  opacity: .72;
}

.theatre-setting-save-state {
  position: absolute;
  right: 18px;
  bottom: -8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #edf6ef;
  color: #176a50;
  font-size: 10px;
  font-weight: 700;
}

.theatre-setting-save-state.error {
  background: #fff0ef;
  color: #a53030;
}

@media (max-width: 560px) {
  .theatre-settings-simple {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .theatre-settings-card {
    width: 100%;
    padding: 14px;
  }
  .theatre-settings-params {
    grid-template-columns: minmax(0, 1fr) 58px;
    column-gap: 12px;
    width: 100%;
  }
  .theatre-setting-line > span {
    min-height: 46px;
    font-size: 14px;
  }
  .theatre-setting-save-state {
    right: 14px;
  }
}

/* 064: senior-of-shift only; ordinary staffing count excludes senior. */
.shift-senior-panel { border: 1px solid #d9d8d2; background: #f9faf7; padding: 14px; border-radius: 10px; margin: 0 0 18px; }
.shift-senior-title { font-weight: 800; margin: 0 0 8px; font-size: 15px; }
.shift-senior-person { font-weight: 700; margin-bottom: 10px; }
.shift-senior-person small { display:block; font-weight:400; color:#63665f; margin-top:3px; }
.shift-senior-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.shift-senior-form .ui-field { flex:1 1 240px; }
.shift-senior-form > .ui-button { min-height: 42px; }
.shift-senior-empty { font-size:13px; color:#666; margin:8px 0; }
.shift-senior-mini { display:block; margin:5px 0; font-size:11px; color:#5d4633; font-weight:700; }
.shift-seniors-settings-list { display:grid; gap:8px; }
@media (max-width: 600px) { .shift-senior-form .ui-field, .shift-senior-form .ui-button { width:100%; } }

/* 067: read-only schedule analytics, scoped to its own page. */
.schedule-top-actions { display: flex; align-items: center; gap: 8px; }
.schedule-top-actions .schedule-analytics-entry { white-space: nowrap; }
.analytics-page { display: grid; gap: 16px; max-width: 1320px; }
.analytics-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 16px; }
.analytics-filters .ui-field { flex: 1 1 190px; min-width: 0; margin: 0; }
.analytics-filters .ui-field input, .analytics-filters .ui-field select { min-height: 42px; width: 100%; }
.analytics-filters > button { min-height: 42px; }
.analytics-period { margin: 2px 0 0; font-size: 22px; font-weight: 600; }
.analytics-table-panel { padding: 0; overflow: hidden; min-width: 0; }
.analytics-table-wrap { width: 100%; }
.analytics-table { min-width: 980px; table-layout: auto; }
.analytics-table th:not(:first-child), .analytics-table td:not(:first-child) { text-align: center; }
.analytics-table th { padding: 10px 8px; font-size: 11px; }
.analytics-table td { padding: 11px 8px; }
.analytics-table td a { color: #151515; text-decoration: none; font-weight: 700; display: inline-block; min-width: 24px; padding: 3px 5px; border-radius: 5px; }
.analytics-table td a:hover { background: #f1f0eb; text-decoration: underline; }
.analytics-table td a.alert, .analytics-alert-text { color: #a72d24; }
.analytics-theatre-cell { min-width: 150px; white-space: nowrap; text-align: left !important; }
.analytics-theatre-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; margin-right: 8px; }
.analytics-total-row td { background: #f6f5f1; border-top: 2px solid #d9d7d0; font-weight: 700; }
.analytics-na { color: #8a8b85; }
.analytics-unmarked-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 0 2px; font-size: 13px; color: #62645e; }
.analytics-unmarked-line a { color: #151515; font-weight: 700; }
.analytics-detail { min-width: 0; padding: 16px; scroll-margin-top: 16px; }
.analytics-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.analytics-detail-head h2, .analytics-days h2 { font-size: 18px; margin: 0; }
.analytics-detail-list { display: grid; gap: 6px; max-height: 560px; overflow-y: auto; }
.analytics-detail-person { border: 1px solid #e6e5df; border-radius: 8px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; }
.analytics-detail-person a { color: #191919; font-weight: 700; }
.analytics-detail-person small { flex-basis: 100%; color: #696a65; font-size: 12px; }
.analytics-phone { font-size: 13px; color: #62645e; }
.analytics-days { padding: 16px; min-width: 0; }
.analytics-days h2 { margin-bottom: 12px; }
.analytics-day-head, .analytics-day-row { display: grid; grid-template-columns: 1fr 1.5fr 1fr 1fr; gap: 8px; align-items: center; padding: 9px 10px; }
.analytics-day-head { font-size: 12px; font-weight: 700; color: #676862; }
.analytics-day-row { border-top: 1px solid #ecebe6; color: #171717; text-decoration: none; }
.analytics-day-row:hover { background: #f7f7f3; }
@media (max-width: 700px) {
  .analytics-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-filters > button { grid-column: 1 / -1; }
  .analytics-table { min-width: 900px; font-size: 12px; }
  .analytics-table th, .analytics-table td { padding-left: 7px; padding-right: 7px; }
  .analytics-day-head, .analytics-day-row { grid-template-columns: 0.8fr 1.7fr 0.9fr 0.9fr; font-size: 12px; padding: 9px 3px; }
  .schedule-top-actions { gap: 6px; }
  .schedule-top-actions .schedule-analytics-entry { font-size: 12px; padding: 9px; }
}

/* 069: bounded theatre queues + day-level "any theatre" availability. */
.schedule-queue-full {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 7px;
  border: 1px solid #ddd8cf;
  border-radius: 6px;
  background: #f4f2ed;
  color: #6d6257;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}

.schedule-any-theatre-form {
  margin-left: auto;
  position: relative;
  z-index: 3;
}

.schedule-any-theatre-button {
  min-height: 22px;
  padding: 3px 6px;
  border: 1px solid #d3d3cd;
  border-radius: 6px;
  background: #fff;
  color: #30302c;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

.schedule-any-theatre-button.cancel,
.schedule-any-theatre-button.cancel:hover,
.schedule-any-theatre-button.cancel:active {
  border-color: #951c24;
  background: #b4232b;
  color: #fff;
}

.schedule-any-theatre-form.mobile {
  margin-left: auto;
}

.schedule-any-theatre-form.mobile .schedule-any-theatre-button {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 11px;
}

.analytics-any-line {
  margin-bottom: 2px;
}


/* ===== Patch 000.001.078: schedule focus mode for manager and employee ===== */

body.schedule-focus-open {
  overflow: hidden;
}

.schedule-focus-analytics {
  display: none;
}

.schedule-fullscreen-label {
  display: none;
}

/*
 * Focus mode is an application overlay rather than the browser Fullscreen API.
 * This keeps the calendar full-window without the browser's own fullscreen banner
 * and gives both roles one predictable exit control.
 */
.schedule-board.is-focus-mode {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100dvh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
  background: #f3f3ef;
  color: #151515;
}

.schedule-board.is-focus-mode .schedule-toolbar {
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 7px 8px;
  background: #ffffff;
  border: 1px solid #deded8;
  border-radius: 11px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.schedule-board.is-focus-mode .schedule-month-nav {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
}

.schedule-board.is-focus-mode .schedule-month-nav .ui-button.compact {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 8px;
}

.schedule-board.is-focus-mode .schedule-month-title {
  min-width: 154px;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.schedule-board.is-focus-mode .schedule-today-link {
  margin-left: 2px;
  font-size: 11px;
  white-space: nowrap;
}

.schedule-board.is-focus-mode .schedule-toolbar-right {
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 7px;
}

.schedule-board.is-focus-mode .schedule-location-filter {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.schedule-board.is-focus-mode .schedule-location-filter::-webkit-scrollbar {
  display: none;
}

.schedule-board.is-focus-mode .schedule-location-filter-item {
  min-height: 31px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.schedule-board.is-focus-mode .schedule-focus-analytics {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid #d9d9d3;
  border-radius: 999px;
  background: #ffffff;
  color: #252522;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.schedule-board.is-focus-mode .schedule-focus-analytics:hover {
  background: #f1f1ed;
}

.schedule-board.is-focus-mode .schedule-drafts-toggle {
  min-height: 31px;
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
}

.schedule-board.is-focus-mode .schedule-drafts-toggle svg {
  width: 14px;
  height: 14px;
}

.schedule-board.is-focus-mode .schedule-drafts-toggle strong {
  min-width: 16px;
  height: 16px;
  font-size: 9px;
}

.schedule-board.is-focus-mode .schedule-fullscreen-button {
  width: auto;
  min-width: 70px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 10px;
  border-color: #1d1d1b;
  border-radius: 8px;
  background: #171715;
  color: #ffffff;
}

.schedule-board.is-focus-mode .schedule-fullscreen-button:hover {
  background: #2b2b28;
  border-color: #2b2b28;
}

.schedule-board.is-focus-mode .schedule-fullscreen-button .icon-expand {
  display: none;
}

.schedule-board.is-focus-mode .schedule-fullscreen-button .icon-collapse {
  display: block;
  width: 15px;
  height: 15px;
}

.schedule-board.is-focus-mode .schedule-fullscreen-label {
  display: inline;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.schedule-board.is-focus-mode .schedule-kpis,
.schedule-board.is-focus-mode .schedule-info,
.schedule-board.is-focus-mode .schedule-preference-notice,
.schedule-board.is-focus-mode .schedule-mobile-day-filter {
  display: none;
}

.schedule-board.is-focus-mode .schedule-calendar-wrap {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d9d9d3;
  border-radius: 11px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .045);
}

.schedule-board.is-focus-mode .schedule-calendar {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 29px repeat(var(--schedule-weeks), minmax(0, 1fr));
}

.schedule-board.is-focus-mode .schedule-weekday {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: #f1f1ed;
  color: #5f5f59;
  font-size: 11px;
  letter-spacing: .05em;
}

.schedule-board.is-focus-mode .schedule-day {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px;
  background: #ffffff;
  scrollbar-width: thin;
  scrollbar-color: #aaa9a3 transparent;
}

.schedule-board.is-focus-mode .schedule-day.weekend:not(.outside) {
  background: #fcfcfa;
}

.schedule-board.is-focus-mode .schedule-day.outside {
  background: #f8f8f5;
}

.schedule-board.is-focus-mode .schedule-day.today {
  box-shadow: inset 0 0 0 2px #2d2d2a;
}

.schedule-board.is-focus-mode .schedule-day-head {
  min-height: 22px;
  align-items: center;
  margin-bottom: 4px;
}

.schedule-board.is-focus-mode .schedule-day-number {
  font-size: 12px;
  line-height: 1;
}

.schedule-board.is-focus-mode .schedule-day-add {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #ffffff;
  font-size: 14px;
}

.schedule-board.is-focus-mode .schedule-any-theatre-button {
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 8px;
}

.schedule-board.is-focus-mode .schedule-day-shifts {
  gap: 4px;
}

.schedule-board.is-focus-mode .schedule-shift {
  min-width: 0;
  padding: 6px 7px 6px 9px;
  border-left-width: 4px;
  border-radius: 7px;
  box-shadow: none;
}

.schedule-board.is-focus-mode .schedule-shift-clickable:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}

.schedule-board.is-focus-mode .schedule-shift-top {
  gap: 5px;
}

.schedule-board.is-focus-mode .schedule-shift-location {
  font-size: 12px;
  line-height: 1.15;
}

.schedule-board.is-focus-mode .schedule-shift-event {
  margin-top: 2px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.18;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.schedule-board.is-focus-mode .schedule-shift-time {
  margin: 2px 0 3px;
  font-size: 12px;
  line-height: 1.1;
}

.schedule-board.is-focus-mode .schedule-staff-line {
  gap: 5px;
  font-size: 9px;
  line-height: 1.15;
}

.schedule-board.is-focus-mode .schedule-staff-line strong {
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
}

.schedule-board.is-focus-mode .schedule-review-badge,
.schedule-board.is-focus-mode .schedule-waiting-badge,
.schedule-board.is-focus-mode .shift-senior-mini {
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.schedule-board.is-focus-mode .schedule-waiting-badge {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 6px;
}

.schedule-board.is-focus-mode .schedule-shift-status {
  max-width: 74px;
  padding: 2px 5px;
  font-size: 8px;
}

.schedule-board.is-focus-mode .schedule-edit-link {
  display: none;
}

/* Employee focus mode: actions stay readable but compact inside each shift. */
.schedule-board-employee.is-focus-mode .schedule-preference-form {
  gap: 3px;
  margin-top: 5px;
  flex-wrap: nowrap;
}

.schedule-board-employee.is-focus-mode .schedule-preference-button,
.schedule-board-employee.is-focus-mode .schedule-queue-full,
.schedule-board-employee.is-focus-mode .schedule-queue-label,
.schedule-board-employee.is-focus-mode .schedule-assigned-me {
  min-height: 22px;
  max-width: 100%;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 8px;
  line-height: 1.05;
  white-space: nowrap;
}

.schedule-board-employee.is-focus-mode .schedule-assigned-me {
  margin-top: 5px;
}

/* Manager focus mode gives staffing signals priority and keeps cards dense. */
.schedule-board-manager.is-focus-mode .schedule-shift {
  padding-top: 5px;
  padding-bottom: 5px;
}

.schedule-board-manager.is-focus-mode .shift-senior-mini {
  color: #5e4a37;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .schedule-board.is-focus-mode .schedule-toolbar {
    gap: 7px;
  }

  .schedule-board.is-focus-mode .schedule-month-title {
    min-width: 132px;
    font-size: 18px;
  }

  .schedule-board.is-focus-mode .schedule-location-filter-item {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 10px;
  }

  .schedule-board.is-focus-mode .schedule-drafts-toggle span {
    display: none;
  }

  .schedule-board.is-focus-mode .schedule-focus-analytics {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 10px;
  }
}

@media (max-width: 900px) {
  .schedule-board.is-focus-mode {
    padding: 7px;
  }

  .schedule-board.is-focus-mode .schedule-toolbar {
    min-height: 44px;
    margin-bottom: 6px;
    padding: 5px 6px;
  }

  .schedule-board.is-focus-mode .schedule-today-link,
  .schedule-board.is-focus-mode .schedule-focus-analytics {
    display: none;
  }

  .schedule-board.is-focus-mode .schedule-fullscreen-button {
    min-width: 34px;
    width: 34px;
    padding: 0;
  }

  .schedule-board.is-focus-mode .schedule-fullscreen-label {
    display: none;
  }

  .schedule-board.is-focus-mode .schedule-shift-event {
    font-size: 9px;
  }
}


/* ===== Patch 000.001.080: compact focus cards + shift popup ===== */

.schedule-focus-card-summary,
.schedule-focus-modal {
  display: none;
}

.schedule-board.is-focus-mode .schedule-day {
  overflow: hidden;
}

.schedule-board.is-focus-mode .schedule-day-shifts {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] {
  min-height: 0;
  flex: 0 0 auto;
  padding: 5px 7px 5px 8px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"]:focus-visible {
  outline: 2px solid #20201e;
  outline-offset: 1px;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] .schedule-shift-hit {
  display: none;
}

/* In the grid keep only the information needed to scan a month. */
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-shift-flags,
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-review-badge,
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-waiting-badge,
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .shift-senior-mini,
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-staff-line,
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-preference-form,
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-assigned-me,
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-edit-link {
  display: none;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] .schedule-shift-flags {
  display: none;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift-location {
  font-size: 11px;
  line-height: 1.05;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift-time {
  margin: 1px 0 2px;
  font-size: 11px;
  line-height: 1.05;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift-event {
  margin-top: 1px;
  font-size: 9px;
  line-height: 1.05;
}

.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift-event {
  display: none;
}

.schedule-board.is-focus-mode .schedule-focus-card-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  overflow: hidden;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

.schedule-board.is-focus-mode .schedule-focus-count {
  color: #77776f;
}

.schedule-board.is-focus-mode .schedule-focus-state {
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-board.is-focus-mode .schedule-focus-state.shortage {
  color: #c12b1f;
}

.schedule-board.is-focus-mode .schedule-focus-state.ok {
  color: #08745d;
}

.schedule-board.is-focus-mode .schedule-focus-state.waiting {
  color: #8b5b00;
}

.schedule-board.is-focus-mode .schedule-focus-state.muted {
  color: #77776f;
}

.schedule-board.is-focus-mode .schedule-focus-want {
  min-width: 0;
  overflow: hidden;
  color: #8b5b00;
  text-overflow: ellipsis;
}

.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift {
  padding-top: 4px;
  padding-bottom: 4px;
}

.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-focus-card-summary {
  display: none;
}

.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift-location,
.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift-time {
  font-size: 10px;
}

/* Popup with the complete shift card. */
.schedule-board.is-focus-mode .schedule-focus-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: grid;
  place-items: center;
  padding: 18px;
}

.schedule-focus-modal[hidden] {
  display: none !important;
}

.schedule-focus-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(20, 20, 18, .46);
  cursor: default;
}

.schedule-focus-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(500px, calc(100vw - 36px));
  max-height: min(82dvh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d7d7d0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

.schedule-focus-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid #e4e4de;
}

.schedule-focus-modal-kicker {
  min-height: 14px;
  margin-bottom: 3px;
  color: #77776f;
  font-size: 11px;
  line-height: 1.2;
}

.schedule-focus-modal-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

.schedule-focus-modal-close {
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  margin: -3px -3px 0 0;
  padding: 0;
  border: 1px solid #d7d7d0;
  border-radius: 8px;
  background: #fff;
  color: #22221f;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.schedule-focus-modal-close:hover {
  background: #f2f2ee;
}

.schedule-focus-modal-content {
  min-height: 0;
  padding: 14px 16px;
  overflow-y: auto;
}

.schedule-focus-modal-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 16px 14px;
  border-top: 1px solid #e4e4de;
}

/* Restore full detail inside popup, independent of compact grid rules. */
.schedule-board.is-focus-mode .schedule-focus-modal-card.schedule-shift {
  width: 100%;
  margin: 0;
  padding: 14px 15px 14px 17px;
  border-left-width: 5px;
  border-radius: 10px;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-shift-location {
  font-size: 17px;
  line-height: 1.15;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-shift-flags {
  display: flex;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-shift-event {
  display: block;
  margin-top: 5px;
  overflow: visible;
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
  text-overflow: clip;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-shift-time {
  margin: 5px 0 8px;
  font-size: 17px;
  line-height: 1.15;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-focus-card-summary {
  display: none;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-review-badge,
.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-waiting-badge,
.schedule-board.is-focus-mode .schedule-focus-modal-card .shift-senior-mini {
  max-width: 100%;
  margin-top: 7px;
  overflow: visible;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  text-overflow: clip;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-waiting-badge {
  width: fit-content;
  padding: 5px 8px;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-staff-line {
  display: flex;
  gap: 10px;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.25;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-staff-line strong {
  font-size: 13px;
  line-height: 1.25;
}

.schedule-board-employee.is-focus-mode .schedule-focus-modal-card .schedule-preference-form {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.schedule-board-employee.is-focus-mode .schedule-focus-modal-card .schedule-preference-button,
.schedule-board-employee.is-focus-mode .schedule-focus-modal-card .schedule-queue-full,
.schedule-board-employee.is-focus-mode .schedule-focus-modal-card .schedule-queue-label,
.schedule-board-employee.is-focus-mode .schedule-focus-modal-card .schedule-assigned-me {
  min-height: 34px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.15;
  white-space: normal;
}

.schedule-board-employee.is-focus-mode .schedule-focus-modal-card .schedule-assigned-me {
  display: block;
  margin-top: 12px;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-shift-status {
  max-width: none;
  padding: 4px 7px;
  font-size: 10px;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card:hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 900px) {
  .schedule-board.is-focus-mode .schedule-focus-modal:not([hidden]) {
    padding: 10px;
  }

  .schedule-focus-modal-dialog {
    width: min(500px, calc(100vw - 20px));
    max-height: 88dvh;
    border-radius: 12px;
  }

  .schedule-focus-modal-head {
    padding: 13px 14px 10px;
  }

  .schedule-focus-modal-content {
    padding: 12px 14px;
  }

  .schedule-focus-modal-actions {
    padding: 10px 14px 12px;
  }
}

/* ===== Patch 000.001.081: readable focus calendar ===== */
/* Keep the clean popup-first month view from 080, but restore comfortable
 * desktop reading sizes. Dense days still collapse secondary text so the
 * month remains visible without per-day scrollbars. */
.schedule-board.is-focus-mode {
  padding: 12px;
}

.schedule-board.is-focus-mode .schedule-toolbar {
  min-height: 54px;
  gap: 14px;
  margin-bottom: 9px;
  padding: 8px 10px;
}

.schedule-board.is-focus-mode .schedule-month-nav {
  gap: 8px;
}

.schedule-board.is-focus-mode .schedule-month-nav .ui-button.compact {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
}

.schedule-board.is-focus-mode .schedule-month-title {
  min-width: 176px;
  font-size: 24px;
  line-height: 1.05;
}

.schedule-board.is-focus-mode .schedule-location-filter-item,
.schedule-board.is-focus-mode .schedule-focus-analytics,
.schedule-board.is-focus-mode .schedule-fullscreen-label {
  font-size: 13px;
}

.schedule-board.is-focus-mode .schedule-location-filter-item,
.schedule-board.is-focus-mode .schedule-focus-analytics,
.schedule-board.is-focus-mode .schedule-drafts-toggle {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.schedule-board.is-focus-mode .schedule-drafts-toggle {
  font-size: 11px;
}

.schedule-board.is-focus-mode .schedule-fullscreen-button {
  min-width: 76px;
  height: 36px;
}

.schedule-board.is-focus-mode .schedule-calendar {
  grid-template-rows: 32px repeat(var(--schedule-weeks), minmax(0, 1fr));
}

.schedule-board.is-focus-mode .schedule-weekday {
  padding: 6px;
  font-size: 14px;
}

.schedule-board.is-focus-mode .schedule-day {
  padding: 6px;
  overflow: hidden;
}

.schedule-board.is-focus-mode .schedule-day-head {
  min-height: 25px;
  margin-bottom: 5px;
}

.schedule-board.is-focus-mode .schedule-day-number {
  font-size: 15px;
}

.schedule-board.is-focus-mode .schedule-day-add {
  width: 22px;
  height: 22px;
  font-size: 15px;
}

.schedule-board.is-focus-mode .schedule-any-theatre-button {
  min-height: 22px;
  padding: 4px 7px;
  font-size: 10px;
}

.schedule-board.is-focus-mode .schedule-day-shifts {
  gap: 4px;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] {
  padding: 7px 8px 7px 10px;
  border-left-width: 4px;
  border-radius: 8px;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift-location {
  font-size: 14px;
  line-height: 1.1;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift-time {
  margin: 2px 0 3px;
  font-size: 14px;
  line-height: 1.08;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift-event {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.12;
}

.schedule-board.is-focus-mode .schedule-focus-card-summary {
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.05;
}

/* Three or more shifts in one day: keep the text readable, but remove
 * secondary lines rather than reintroducing internal scrolling. */
.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-day-shifts {
  gap: 3px;
}

.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift[data-focus-shift="1"] {
  padding: 5px 7px 5px 9px;
}

.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift-location,
.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift-time {
  font-size: 13px;
  line-height: 1.05;
}

.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift-event,
.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-focus-card-summary {
  display: none;
}

@media (max-width: 1180px) {
  .schedule-board.is-focus-mode {
    padding: 9px;
  }

  .schedule-board.is-focus-mode .schedule-toolbar {
    min-height: 48px;
    gap: 8px;
    padding: 6px 8px;
  }

  .schedule-board.is-focus-mode .schedule-month-title {
    min-width: 142px;
    font-size: 20px;
  }

  .schedule-board.is-focus-mode .schedule-location-filter-item,
  .schedule-board.is-focus-mode .schedule-focus-analytics,
  .schedule-board.is-focus-mode .schedule-fullscreen-label {
    font-size: 11px;
  }

  .schedule-board.is-focus-mode .schedule-day .schedule-shift-location,
  .schedule-board.is-focus-mode .schedule-day .schedule-shift-time {
    font-size: 12px;
  }

  .schedule-board.is-focus-mode .schedule-day .schedule-shift-event {
    font-size: 10px;
  }

  .schedule-board.is-focus-mode .schedule-focus-card-summary {
    font-size: 9px;
  }
}

@media (max-width: 900px) {
  .schedule-board.is-focus-mode {
    padding: 7px;
  }

  .schedule-board.is-focus-mode .schedule-toolbar {
    min-height: 44px;
    margin-bottom: 6px;
    padding: 5px 6px;
  }

  .schedule-board.is-focus-mode .schedule-calendar {
    grid-template-rows: 29px repeat(var(--schedule-weeks), minmax(0, 1fr));
  }

  .schedule-board.is-focus-mode .schedule-weekday {
    font-size: 11px;
  }

  .schedule-board.is-focus-mode .schedule-day {
    padding: 5px;
  }

  .schedule-board.is-focus-mode .schedule-day-number {
    font-size: 12px;
  }

  .schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] {
    padding: 5px 7px 5px 8px;
  }

  .schedule-board.is-focus-mode .schedule-day .schedule-shift-location,
  .schedule-board.is-focus-mode .schedule-day .schedule-shift-time,
  .schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift-location,
  .schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift-time {
    font-size: 10px;
  }

  .schedule-board.is-focus-mode .schedule-day .schedule-shift-event {
    font-size: 9px;
  }

  .schedule-board.is-focus-mode .schedule-focus-card-summary {
    font-size: 8px;
  }
}

/* ===== Patch 000.001.082: ergonomic focus shift tiles ===== */
/* In focus mode the month grid is an operational roster, not a theatre poster:
 * theatre on the left, time on the right, staffing/status below. Event titles
 * are deliberately removed from both compact tiles and popup details. */
.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "location time"
    "summary summary";
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-shift-top {
  grid-area: location;
  min-width: 0;
  display: block;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-shift-time {
  grid-area: time;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-shift-event {
  display: none;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] > .schedule-focus-card-summary {
  grid-area: summary;
  width: 100%;
  margin-top: 0;
  justify-content: space-between;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] .schedule-focus-state {
  margin-left: auto;
  text-align: right;
}

.schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] .schedule-focus-want {
  display: none;
}

/* Dense dates stay one-line per shift: theatre + time. */
.schedule-board.is-focus-mode .schedule-day.many-shifts .schedule-shift[data-focus-shift="1"] {
  grid-template-areas: "location time";
  row-gap: 0;
}

/* The popup header already contains date plus "theatre · time". Do not repeat
 * those fields inside the cloned card, and do not show event/performance title. */
.schedule-board.is-focus-mode .schedule-focus-modal-card .schedule-shift-location,
.schedule-board.is-focus-mode .schedule-focus-modal-card > .schedule-shift-time,
.schedule-board.is-focus-mode .schedule-focus-modal-card > .schedule-shift-event {
  display: none;
}

.schedule-board.is-focus-mode .schedule-focus-modal-card.schedule-shift {
  padding-top: 10px;
}

@media (max-width: 1180px) {
  .schedule-board.is-focus-mode .schedule-day .schedule-shift[data-focus-shift="1"] {
    column-gap: 7px;
    row-gap: 3px;
  }
}

/* ===== Patch 000.001.083: shared compact calendar cards + popup ===== */
/* The ordinary desktop month view now uses the same operational card model as
 * focus mode: theatre/time on the first row, staffing/status on the second,
 * full controls/details in the popup. Mobile list remains unchanged. */
@media (min-width: 701px) {
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "location time"
      "summary summary";
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
    min-height: 0;
    padding: 7px 8px 7px 10px;
    cursor: pointer;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"]:focus-visible {
    outline: 2px solid #20201e;
    outline-offset: 1px;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-shift-top {
    grid-area: location;
    min-width: 0;
    display: block;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-shift-time {
    grid-area: time;
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-size: 12px;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] .schedule-shift-location {
    font-size: 12px;
    line-height: 1.1;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-shift-event,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-shift-flags,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-review-badge,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-waiting-badge,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .shift-senior-mini,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-staff-line,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-preference-form,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-assigned-me,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-edit-link,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] .schedule-shift-flags,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] .schedule-shift-hit {
    display: none;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-card-summary {
    grid-area: summary;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.05;
    white-space: nowrap;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-count {
    color: #77776f;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-state {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-state.shortage { color: #c12b1f; }
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-state.ok { color: #08745d; }
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-state.waiting { color: #8b5b00; }
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-state.muted { color: #77776f; }
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-want { display: none; }

  .schedule-board:not(.is-focus-mode) .schedule-day.many-shifts .schedule-shift[data-focus-shift="1"] {
    grid-template-areas: "location time";
    row-gap: 0;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .schedule-board:not(.is-focus-mode) .schedule-day.many-shifts .schedule-focus-card-summary {
    display: none;
  }
}

/* Popup is available in both ordinary desktop and focus modes. */
.schedule-board .schedule-focus-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: grid;
  place-items: center;
  padding: 18px;
}

.schedule-board:not(.is-focus-mode) .schedule-focus-modal-card.schedule-shift {
  width: 100%;
  margin: 0;
  padding: 14px 15px 14px 17px;
  border-left-width: 5px;
  border-radius: 10px;
  cursor: default;
  box-shadow: none;
  transform: none;
}

/* Popup heading already contains date + theatre + time. */
.schedule-focus-modal-card .schedule-shift-location,
.schedule-focus-modal-card > .schedule-shift-time,
.schedule-focus-modal-card > .schedule-shift-event {
  display: none !important;
}

.schedule-board:not(.is-focus-mode) .schedule-focus-modal-card .schedule-shift-flags {
  display: flex;
}

.schedule-board:not(.is-focus-mode) .schedule-focus-modal-card .schedule-review-badge,
.schedule-board:not(.is-focus-mode) .schedule-focus-modal-card .schedule-waiting-badge,
.schedule-board:not(.is-focus-mode) .schedule-focus-modal-card .shift-senior-mini {
  max-width: 100%;
  margin-top: 7px;
  overflow: visible;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  text-overflow: clip;
}

.schedule-board:not(.is-focus-mode) .schedule-focus-modal-card .schedule-waiting-badge {
  width: fit-content;
  padding: 5px 8px;
}

.schedule-board:not(.is-focus-mode) .schedule-focus-modal-card .schedule-staff-line {
  display: flex;
  gap: 10px;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.25;
}

.schedule-board:not(.is-focus-mode) .schedule-focus-modal-card .schedule-staff-line strong {
  font-size: 13px;
  line-height: 1.25;
}

.schedule-board-employee:not(.is-focus-mode) .schedule-focus-modal-card .schedule-preference-form {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.schedule-board-employee:not(.is-focus-mode) .schedule-focus-modal-card .schedule-preference-button,
.schedule-board-employee:not(.is-focus-mode) .schedule-focus-modal-card .schedule-queue-full,
.schedule-board-employee:not(.is-focus-mode) .schedule-focus-modal-card .schedule-queue-label,
.schedule-board-employee:not(.is-focus-mode) .schedule-focus-modal-card .schedule-assigned-me {
  min-height: 34px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.15;
  white-space: normal;
}

.schedule-board-employee:not(.is-focus-mode) .schedule-focus-modal-card .schedule-assigned-me {
  display: block;
  margin-top: 12px;
}

body.schedule-modal-open {
  overflow: hidden;
}

/* ===== Patch 000.001.084: readable ordinary calendar + popup ===== */
/* 083 introduced the compact popup-first desktop model. 084 keeps that model
 * but uses the available desktop space instead of shrinking operational text. */
@media (min-width: 701px) {
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] {
    min-height: 58px;
    padding: 10px 11px 10px 12px;
    column-gap: 10px;
    row-gap: 7px;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] .schedule-shift-location,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-shift[data-focus-shift="1"] > .schedule-shift-time {
    font-size: 15px;
    line-height: 1.15;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-card-summary {
    gap: 10px;
    font-size: 13px;
    line-height: 1.15;
  }

  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-count,
  .schedule-board:not(.is-focus-mode) .schedule-calendar .schedule-focus-state {
    font-size: 13px;
  }

  /* Dense dates stay compact, but remain readable. */
  .schedule-board:not(.is-focus-mode) .schedule-day.many-shifts .schedule-shift[data-focus-shift="1"] {
    min-height: 42px;
    padding: 8px 9px 8px 10px;
    column-gap: 8px;
  }

  .schedule-board:not(.is-focus-mode) .schedule-day.many-shifts .schedule-shift[data-focus-shift="1"] .schedule-shift-location,
  .schedule-board:not(.is-focus-mode) .schedule-day.many-shifts .schedule-shift[data-focus-shift="1"] > .schedule-shift-time {
    font-size: 14px;
    line-height: 1.1;
  }
}

/* The popup is intentionally roomy on desktop: it contains the details and
 * actions removed from the month grid, so its content should be easy to scan. */
@media (min-width: 701px) {
  .schedule-focus-modal-dialog {
    width: min(580px, calc(100vw - 48px));
    max-height: min(86dvh, 780px);
    border-radius: 16px;
  }

  .schedule-focus-modal-head {
    gap: 20px;
    padding: 19px 20px 15px;
  }

  .schedule-focus-modal-kicker {
    min-height: 16px;
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 1.25;
  }

  .schedule-focus-modal-head h2 {
    font-size: 24px;
    line-height: 1.15;
  }

  .schedule-focus-modal-close {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 24px;
  }

  .schedule-focus-modal-content {
    padding: 18px 20px;
  }

  .schedule-focus-modal-actions {
    gap: 10px;
    padding: 14px 20px 18px;
  }

  .schedule-focus-modal-actions .ui-button {
    min-height: 42px;
    padding: 10px 14px;
    font-size: 14px;
  }

  .schedule-board .schedule-focus-modal-card.schedule-shift {
    padding: 18px 19px 18px 21px;
    border-left-width: 6px;
    border-radius: 12px;
  }

  .schedule-board .schedule-focus-modal-card .schedule-review-badge,
  .schedule-board .schedule-focus-modal-card .schedule-waiting-badge,
  .schedule-board .schedule-focus-modal-card .shift-senior-mini {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.35;
  }

  .schedule-board .schedule-focus-modal-card .schedule-waiting-badge {
    padding: 7px 10px;
  }

  .schedule-board .schedule-focus-modal-card .schedule-staff-line {
    gap: 16px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.3;
  }

  .schedule-board .schedule-focus-modal-card .schedule-staff-line strong {
    font-size: 16px;
    line-height: 1.3;
  }

  .schedule-board .schedule-focus-modal-card .schedule-edit-link {
    margin-top: 10px;
    font-size: 14px;
  }

  .schedule-board-employee .schedule-focus-modal-card .schedule-preference-form {
    gap: 9px;
    margin-top: 15px;
  }

  .schedule-board-employee .schedule-focus-modal-card .schedule-preference-button,
  .schedule-board-employee .schedule-focus-modal-card .schedule-queue-full,
  .schedule-board-employee .schedule-focus-modal-card .schedule-queue-label,
  .schedule-board-employee .schedule-focus-modal-card .schedule-assigned-me {
    min-height: 42px;
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.2;
  }
}