#employeeHoursApp,
#employeeHoursModal {
  font-family: Inter, Arial, sans-serif;
  color: #17212b;
}

body.hoursEmployeeMode {
  background: #080a14;
}

body.hoursEmployeeMode #root,
body.hoursEmployeeMode > :not(#employeeHoursApp):not(#employeeHoursModal):not(.hoursDialogBack):not(.hoursDialog):not(script) {
  display: none !important;
}

#employeeHoursApp {
  min-height: 100vh;
  background: #080a14;
}

.hoursShell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 36px;
}

.hoursTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 24px;
}

.hoursBrand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0;
}

.hoursUser {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
}

.hoursBtn,
.hoursIconBtn,
.hoursLinkBtn {
  appearance: none;
  border: 1px solid #c8d0cc;
  border-radius: 6px;
  background: #fff;
  color: #17212b;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 36px;
  padding: 7px 12px;
}

.hoursBtn:hover,
.hoursIconBtn:hover,
.hoursLinkBtn:hover { border-color: #327452; }
.hoursBtn.primary { background: #1f704b; border-color: #1f704b; color: #fff; }
.hoursBtn.danger { color: #a22b2b; }
.hoursBtn:disabled { cursor: wait; opacity: .58; }

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

.hoursTitleRow h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.15;
}

.hoursTitleRow p { color: #60706a; margin: 5px 0 0; font-size: 14px; }

.hoursControls { display: flex; align-items: center; gap: 8px; }
.hoursControls input,
.hoursForm input,
.hoursForm textarea,
.hoursSelect {
  border: 1px solid #c8d0cc;
  border-radius: 6px;
  min-height: 37px;
  padding: 7px 9px;
  background: #fff;
  color: #17212b;
  font: inherit;
}

.hoursSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #d7dfda;
  background: #fff;
  margin-bottom: 16px;
}

.hoursSummary > div { padding: 14px 16px; border-right: 1px solid #d7dfda; }
.hoursSummary > div:last-child { border-right: 0; }
.hoursSummary span { display: block; color: #697772; font-size: 12px; font-weight: 700; }
.hoursSummary strong { display: block; margin-top: 4px; font-size: 22px; }

.hoursCalendar {
  border: 1px solid #d7dfda;
  background: #fff;
}

.hoursWeekdays,
.hoursDays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hoursWeekdays { border-bottom: 1px solid #d7dfda; background: #edf2ef; }
.hoursWeekdays span { padding: 9px 10px; color: #627069; font-size: 12px; font-weight: 800; }
.hoursDay {
  min-height: 122px;
  border-right: 1px solid #e0e6e2;
  border-bottom: 1px solid #e0e6e2;
  padding: 9px;
  text-align: left;
  background: #fff;
  color: #17212b;
  cursor: pointer;
  font: inherit;
}
.hoursDay:nth-child(7n) { border-right: 0; }
.hoursDay.empty { background: #fafcfa; cursor: default; }
.hoursDay:hover:not(.empty) { background: #f4faf6; }
.hoursDay.today { box-shadow: inset 0 0 0 2px #2d7c55; }
.hoursDay.worked { background: #d9f5df; box-shadow: inset 0 0 0 2px #2c8a55; }
.hoursDay.worked:hover { background: #c8efd2; }
.hoursDay.paid,
.hoursDay.paid:hover { background: #e4e7e5; box-shadow: inset 0 0 0 2px #aeb7b2; }
.hoursDay.paid .hoursDayNumber,
.hoursDay.paid .hoursDayPay { color: #5d6863; }
.hoursDayPaidMark { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 8px; background: #7b8780; color: #fff; font-size: 14px; font-weight: 900; }
.hoursDayPayBtn { display: block; width: 24px; height: 24px; margin-top: 8px; border: 1px solid #24734e; background: #fff; color: #24734e; padding: 0; cursor: pointer; font: 900 14px Inter, Arial, sans-serif; }
.hoursDayPayBtn:hover { background: #d9f5df; }
.hoursDay.worked .hoursDayNumber { color: #155b35; }
.hoursDayWorked { display: inline-block; margin-top: 8px; padding: 3px 5px; background: #207347; color: #fff; font-size: 10px; font-weight: 800; }
.hoursDayNumber { display: block; color: #64716b; font-size: 12px; font-weight: 800; }
.hoursDayTime { display: block; margin-top: 14px; font-size: 14px; font-weight: 800; }
.hoursDayPay { display: block; margin-top: 3px; color: #24734e; font-size: 12px; font-weight: 800; }
.hoursDayNote { display: block; margin-top: 6px; color: #5f6b66; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoursDayAdd { display: block; margin-top: 17px; color: #2d7c55; font-size: 12px; font-weight: 800; }

.employeeHoursLauncher {
  position: fixed;
  z-index: 1000;
  right: 18px;
  bottom: 18px;
  background: #1f704b;
  border: 1px solid #1f704b;
  color: #fff;
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 13px;
  cursor: pointer;
  font: 700 13px Inter, Arial, sans-serif;
}

#employeeHoursModal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: 28px 16px;
  background: rgb(20 30 25 / .52);
}
#employeeHoursModal.open { display: flex; }
.hoursModalPanel { width: min(1180px, 100%); background: #080a14; box-shadow: 0 12px 40px rgb(0 0 0 / .25); }
.hoursModalPanel .hoursShell { width: min(1128px, calc(100% - 32px)); }

.hoursDialogBack { position: fixed; inset: 0; z-index: 1002; display: none; background: rgb(20 30 25 / .52); }
.hoursDialogBack.open { display: block; }
.hoursDialog {
  position: fixed;
  z-index: 1003;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px));
  display: none;
  background: #fff;
  border: 1px solid #d1dad4;
  box-shadow: 0 14px 42px rgb(0 0 0 / .28);
  padding: 20px;
}
.hoursDialog.open { display: block; }
.hoursDialog h2 { margin: 0 0 17px; font-size: 20px; }
.hoursForm { display: grid; gap: 12px; }
.hoursForm label { display: grid; gap: 5px; color: #526059; font-size: 12px; font-weight: 800; }
.hoursForm textarea { min-height: 76px; resize: vertical; }
.hoursFormGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hoursEntryTotal { padding: 10px 11px; background: #eef8f1; color: #1d6844; font-size: 13px; font-weight: 800; }
.hoursDialogActions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.hoursDialogActions > div { display: flex; gap: 8px; }
.hoursError { min-height: 18px; color: #a22b2b; font-size: 12px; font-weight: 700; }
.hoursForm.readOnly input { background: #eef1ef; color: #58635e; cursor: not-allowed; }

@media (max-width: 700px) {
  .hoursShell { width: min(100% - 20px, 1180px); padding-top: 8px; }
  .hoursTopbar { padding-bottom: 18px; }
  .hoursTitleRow { align-items: start; flex-direction: column; }
  .hoursTitleRow h1 { font-size: 24px; }
  .hoursSummary > div { padding: 11px 9px; }
  .hoursSummary strong { font-size: 16px; }
  .hoursWeekdays span { padding: 8px 3px; text-align: center; font-size: 10px; }
  .hoursDay { min-height: 86px; padding: 6px; }
  .hoursDayTime { margin-top: 9px; font-size: 11px; }
  .hoursDayPay { font-size: 10px; }
  .hoursDayWorked { margin-top: 5px; padding: 2px 3px; font-size: 9px; }
  .hoursDayNote { display: none; }
  .hoursDayAdd { margin-top: 17px; font-size: 10px; }
  .hoursUser span { max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hoursControls { width: 100%; }
  .hoursControls input { flex: 1; }
  .employeeHoursLauncher { right: 10px; bottom: 10px; }
}