:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #20352f;
  background: #f6f8f7;
  font-synthesis: none;
  font-size: 14px;
  --green: #205d50;
  --muted: #76847e;
  --border: #e3e9e5;
  --bg: #f6f8f7;
  --shadow: 0 12px 40px #173e3410;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: 0.55;
}
button {
  border: 1px solid var(--border);
  background: white;
  color: inherit;
  border-radius: 8px;
  padding: 10px 14px;
}
button:hover {
  background: #f3f6f4;
}
button.primary {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
button.primary:hover {
  background: #174a3e;
}
button.ghost {
  background: transparent;
  border-color: transparent;
}
.icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 32px 18px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 25px;
  font-weight: 720;
  letter-spacing: -1px;
  margin: 0 12px 37px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  color: #fff;
  background: var(--green);
  border-radius: 11px;
  font-size: 27px;
  letter-spacing: -5px;
  padding-right: 4px;
}
.workspace {
  margin: 0 7px 24px;
  padding: 13px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.workspace strong {
  display: block;
  font-size: 12px;
}
.workspace small {
  color: var(--muted);
  font-size: 11px;
}
.nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.3px;
  color: #93a099;
  margin: 0 15px 10px;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav button {
  text-align: left;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #64746c;
  font-size: 13px;
  padding: 12px 14px;
}
.nav button.active {
  background: #edf4f0;
  color: var(--green);
  font-weight: 650;
}
.nav .count {
  margin-left: auto;
  background: #dceae2;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 11px;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 24px;
}
.demo-note {
  background: #f7f5ec;
  border: 1px solid #ebe5cf;
  border-radius: 10px;
  padding: 13px;
  font-size: 11px;
  line-height: 1.6;
  color: #7a6a3d;
}
.demo-note strong {
  display: block;
  font-size: 12px;
  color: #6d5b2d;
}
.account {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1e7dc;
  color: #866748;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.account .name {
  font-size: 11px;
  font-weight: 600;
}
.account .role {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.account button {
  padding: 5px;
  margin-left: auto;
}
.main {
  min-width: 0;
}
.topbar {
  height: 72px;
  border-bottom: 1px solid var(--border);
  background: #ffffffb3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 16px;
}
.breadcrumb {
  color: #88958e;
  font-size: 12px;
}
.breadcrumb strong {
  color: #52665b;
  font-weight: 500;
  margin-left: 10px;
}
.live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #76867c;
  font-size: 11px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4b9b73;
}
.content {
  padding: 32px 36px 38px;
  max-width: 1900px;
  margin: auto;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 27px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.7px;
  font-size: 10px;
  color: #8b9890;
  margin: 0 0 10px;
}
.page-heading h1 {
  font-size: 27px;
  letter-spacing: -0.8px;
  font-weight: 650;
  margin: 0 0 9px;
}
.subtitle {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.button-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.button-row button {
  white-space: nowrap;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 24px;
}
.stat {
  border: 1px solid var(--border);
  background: white;
  border-radius: 11px;
  padding: 18px 20px;
}
.stat-label {
  font-size: 11px;
  color: #74857b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.stat-value {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin: 13px 0 8px;
}
.stat-value small {
  font-size: 14px;
  color: #9aa79f;
  font-weight: 400;
}
.stat-foot {
  font-size: 10px;
  color: #85938b;
}
.stat .green {
  color: #42775c;
}
.panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  overflow: hidden;
  box-shadow: 0 2px 3px #244c3102;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  flex-wrap: wrap;
}
.date-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-control input {
  border: 0;
  width: 142px;
  font-size: 13px;
  font-weight: 600;
  background: white;
  color: #314a3b;
}
.date-control button {
  padding: 7px 9px;
}
.segments {
  display: flex;
  padding: 3px;
  background: #f3f6f4;
  border-radius: 8px;
}
.segments button {
  background: transparent;
  border: 0;
  padding: 7px 13px;
  font-size: 11px;
  border-radius: 6px;
  color: #7c8d82;
}
.segments button.active {
  background: white;
  box-shadow: 0 1px 4px #304b2910;
  color: #2a4e3c;
  font-weight: 600;
}
.filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 16px;
  flex-wrap: wrap;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  min-width: 210px;
}
.search input {
  border: 0;
  padding: 0;
  width: 100%;
  outline: none;
  font-size: 11px;
}
.filterbar select {
  font-size: 11px;
  color: #667a6d;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: white;
}
.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 10px;
  color: #7e8e83;
}
.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.swatch {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.swatch.monthly {
  background: #99b9a1;
}
.swatch.regular {
  background: #b1b4df;
}
.swatch.single {
  background: #d3bb8a;
}
.swatch.closed {
  background: #c3c9c6;
}
.calendar-wrap {
  overflow: auto;
  border-top: 1px solid var(--border);
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  text-align: left;
}
th {
  font-weight: 500;
}
td,
th {
  border-bottom: 1px solid #edf1ee;
}
.calendar {
  table-layout: fixed;
}
.calendar th,
.calendar td {
  border-bottom: 2px solid #8fa69a;
}
.calendar tbody th {
  border-right: 2px solid #8fa69a;
}
.calendar thead th {
  background: #fafcfb;
  padding: 13px 12px;
  font-size: 11px;
  color: #788b7e;
  text-align: center;
  border-right: 1px solid #9aafa3;
}
.calendar thead th:first-child {
  width: 190px;
  text-align: left;
  padding-left: 20px;
}
.calendar.week {
  min-width: 1250px;
}
.calendar.month {
  min-width: 1400px;
}
.calendar.day {
  min-width: 650px;
}
.calendar tbody th {
  padding: 11px 16px 11px 20px;
  vertical-align: middle;
  background: #fff;
}
.room-num {
  font-size: 12px;
  font-weight: 600;
  color: #355440;
  display: flex;
  align-items: center;
  gap: 7px;
}
.room-name {
  font-size: 10px;
  line-height: 1.4;
  color: #95a198;
  margin-top: 5px;
}
.readiness {
  font-size: 9px;
  font-weight: 400;
  color: #a5864d;
}
.calendar td {
  padding: 5px;
  border-right: 1px solid #9aafa3;
  vertical-align: top;
}
.slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 57px;
  padding: 9px 12px;
  border: 1px solid transparent;
  text-align: left;
  border-radius: 6px;
  overflow: hidden;
}
.slot-title {
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.slot-desc {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.8;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.slot.free {
  background: #fff;
  border: 1px dashed #dfe9e1;
  color: #9caea1;
}
.slot.free:hover {
  background: #f5f9f5;
  color: #4a7955;
  border-color: #9bbca1;
}
.slot.monthly {
  background: #edf4ed;
  color: #47724b;
  border-left: 3px solid #aac4ab;
}
.slot.regular {
  background: #f0eff8;
  color: #746399;
  border-left: 3px solid #beb0d4;
}
.slot.single {
  background: #fcf4e7;
  color: #977442;
  border-left: 3px solid #d9bd8c;
}
.slot.hold {
  background: #edf3f8;
  color: #47738c;
  border-left: 3px solid #98b9ce;
}
.slot.closed,
.slot.busy {
  background: repeating-linear-gradient(
    135deg,
    #f2f4f3,
    #f2f4f3 5px,
    #eef1ef 5px,
    #eef1ef 6px
  );
  color: #95a199;
}
.slot.nonworking {
  background: #fafbfa;
  color: #b1bbb3;
}
.week .slot {
  min-height: 53px;
  padding: 8px;
}
.week .slot-title {
  font-size: 9px;
}
.week .slot-desc {
  font-size: 8px;
}
.week td {
  padding: 4px;
}
.calendar thead .today {
  color: #296346;
  background: #f0f7f1;
}
.calendar-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  color: #93a096;
  font-size: 10px;
}
.notice {
  display: flex;
  gap: 12px;
  border: 1px solid #e3e9e2;
  border-radius: 9px;
  margin-top: 18px;
  padding: 14px 16px;
  background: #f0f4ef;
  color: #72836c;
  font-size: 11px;
  line-height: 1.5;
}
.notice strong {
  color: #5f7459;
}
.table-list {
  min-width: 640px;
  font-size: 12px;
}
.table-list th {
  padding: 14px 18px;
  background: #f8faf8;
  font-size: 11px;
  color: #7d8d80;
  white-space: nowrap;
}
.table-list td {
  padding: 15px 18px;
}
.table-list small {
  display: block;
  color: #91a092;
  margin-top: 5px;
  font-size: 10px;
}
.badge {
  font-size: 10px;
  padding: 5px 8px;
  border-radius: 5px;
  background: #edf4ed;
  color: #4c7b54;
  display: inline-block;
  white-space: nowrap;
}
.badge.amber {
  background: #fcf3e3;
  color: #a98541;
}
.badge.gray {
  background: #f0f3f1;
  color: #87948a;
}
.badge.purple {
  background: #f0eef8;
  color: #7c6b9e;
}
.empty {
  padding: 54px 24px;
  text-align: center;
  color: #849286;
  line-height: 1.7;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.doctor-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}
.doctor-card h3 {
  font-size: 15px;
  margin: 16px 0 8px;
}
.doctor-card p {
  font-size: 11px;
  color: #839183;
  margin: 0 0 16px;
}
.doctor-card .avatar {
  width: 45px;
  height: 45px;
  font-size: 14px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid #edf1ee;
  font-size: 12px;
}
.detail-row span {
  color: #809084;
}
.detail-row strong {
  text-align: right;
  font-weight: 500;
}
.detail-actions {
  margin-top: 20px;
}
.error-banner {
  padding: 15px 18px;
  background: #fff0ed;
  color: #a7503c;
  border: 1px solid #f2d8cf;
  border-radius: 9px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.6;
}
.boot {
  padding: 15vh 20px;
  text-align: center;
  font-size: 32px;
  letter-spacing: -1px;
  color: var(--green);
}
.boot span {
  display: block;
  font-size: 13px;
  color: #87958c;
  margin-top: 16px;
  letter-spacing: 0;
}
.login {
  max-width: 460px;
  padding: 40px;
  margin: 10vh auto;
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.login .brand {
  margin: 0 0 25px;
}
.login h1 {
  font-size: 25px;
  margin: 0 0 14px;
}
.login p {
  font-size: 13px;
  color: #839083;
  line-height: 1.6;
}
.login button {
  width: 100%;
  margin-top: 12px;
}
.login small {
  display: block;
  margin-top: 22px;
  color: #a08a5d;
  font-size: 11px;
  line-height: 1.6;
}
dialog {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  width: min(560px, calc(100vw - 28px));
  max-height: 90vh;
  box-shadow: 0 24px 100px #15372735;
  color: #294333;
}
dialog::backdrop {
  background: #142c2659;
  backdrop-filter: blur(3px);
}
dialog.reconciliation-modal {
  width: min(1440px, calc(100vw - 28px));
}
.reconciliation-modal .table-list {
  min-width: 1100px;
}
.reconciliation-modal td {
  vertical-align: top;
}
.reconciliation-modal details {
  margin-top: 8px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  font-size: 19px;
  letter-spacing: -0.3px;
  margin: 0;
}
.modal-head button {
  border: 0;
  font-size: 22px;
  padding: 0 5px;
  color: #8a978e;
}
.modal-body {
  padding: 24px 26px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: #6f8273;
}
.field.wide {
  grid-column: 1/-1;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #dde5df;
  border-radius: 7px;
  background: white;
  color: #2e4c38;
  min-width: 0;
}
.field textarea {
  resize: vertical;
  min-height: 70px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.quote-box {
  background: #f2f7f1;
  border: 1px solid #e1e9dd;
  border-radius: 10px;
  padding: 18px;
  margin-top: 20px;
}
.quote-box h3 {
  font-size: 12px;
  margin: 0 0 10px;
  color: #6d836a;
}
.quote-price {
  font-size: 28px;
  color: #315e38;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.quote-box p {
  font-size: 11px;
  color: #7f8f76;
  line-height: 1.6;
}
.check {
  font-size: 12px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  line-height: 1.5;
  margin-top: 16px;
}
.check input {
  margin-top: 3px;
}
.form-error {
  font-size: 12px;
  line-height: 1.6;
  color: #ae604a;
  margin: 16px 0 0;
}
.info-copy {
  font-size: 12px;
  color: #7d8f7f;
  line-height: 1.7;
}
.row-actions {
  display: flex;
  gap: 7px;
}
.row-actions button {
  padding: 6px 10px;
  font-size: 10px;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #254d3d;
  color: #fff;
  font-size: 12px;
  padding: 14px 22px;
  box-shadow: var(--shadow);
  border-radius: 9px;
  z-index: 99;
  display: none;
  max-width: calc(100vw - 30px);
}
#toast.show {
  display: block;
}
.setting {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}
.setting strong {
  font-size: 13px;
}
.setting p {
  font-size: 11px;
  color: #849181;
  line-height: 1.6;
  margin: 7px 0 0;
}
.mobile-title {
  display: none;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #77a98a;
}
@media (min-width: 1550px) {
  .content {
    padding: 36px 48px;
  }
  .calendar.day .slot {
    min-height: 63px;
  }
  .sidebar {
    padding-top: 36px;
  }
}
@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .sidebar {
    padding-left: 10px;
    padding-right: 10px;
  }
  .content {
    padding: 25px 20px;
  }
  .topbar {
    padding: 0 20px;
  }
  .brand {
    font-size: 23px;
  }
  .workspace {
    padding: 10px 5px;
  }
  .stat {
    padding: 15px;
  }
  .legend {
    margin-left: 0;
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-value {
    font-size: 25px;
  }
}
@media (max-width: 760px) {
  .shell {
    display: block;
  }
  .sidebar {
    position: static;
    height: auto;
    padding: 17px 14px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .brand {
    margin: 0 0 15px;
    font-size: 23px;
  }
  .brand-mark {
    width: 30px;
    height: 30px;
  }
  .workspace,
  .nav-label,
  .sidebar-bottom {
    display: none;
  }
  .nav {
    flex-direction: row;
    overflow: auto;
    gap: 4px;
    padding-bottom: 10px;
  }
  .nav button {
    flex-shrink: 0;
    padding: 10px;
    font-size: 11px;
  }
  .nav button .icon {
    width: 15px;
  }
  .nav .count {
    display: none;
  }
  .topbar {
    height: 45px;
    padding: 0 16px;
  }
  .breadcrumb {
    font-size: 10px;
  }
  .live {
    font-size: 9px;
  }
  .content {
    padding: 22px 14px;
  }
  .page-heading {
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .page-heading h1 {
    font-size: 23px;
  }
  .page-heading > .button-row button {
    font-size: 11px;
    padding: 9px;
  }
  .page-heading .subtitle {
    font-size: 11px;
    max-width: 230px;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 18px;
  }
  .stat {
    padding: 13px;
  }
  .stat-label {
    font-size: 10px;
  }
  .stat-value {
    font-size: 25px;
    margin: 10px 0 6px;
  }
  .stat-foot {
    font-size: 9px;
  }
  .toolbar {
    padding: 14px;
    gap: 12px;
  }
  .toolbar > .button-row {
    justify-content: space-between;
    width: 100%;
  }
  .filterbar {
    padding: 0 14px 14px;
    gap: 9px;
  }
  .search {
    flex: 1;
    min-width: 170px;
  }
  .legend {
    gap: 10px;
    font-size: 9px;
  }
  .calendar thead th:first-child {
    width: 150px;
  }
  .calendar tbody th {
    padding-left: 13px;
  }
  .calendar.day {
    min-width: 580px;
  }
  .calendar-footer {
    padding: 12px;
    font-size: 9px;
  }
  .calendar-footer span:last-child {
    display: none;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .modal-body {
    padding: 20px;
  }
  .modal-head {
    padding: 20px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field {
    grid-column: 1/-1;
  }
  .login {
    margin: 35px 15px;
    padding: 28px;
  }
  .notice {
    font-size: 10px;
  }
  .setting {
    align-items: flex-start;
    gap: 15px;
  }
  .setting .badge {
    white-space: normal;
    min-width: 90px;
    text-align: center;
  }
  .date-control input {
    width: 135px;
  }
  .table-list td {
    padding: 12px;
  }
  .page-heading .eyebrow {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  button {
    transition:
      background 0.15s,
      border-color 0.15s;
  }
  @keyframes appear {
    from {
      opacity: 0.4;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.calendar.month {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}
.calendar.month td {
  min-width: 110px;
}
.calendar.month th:first-child {
  min-width: 190px;
}
.calendar.month .slot {
  min-height: 53px;
  padding: 8px;
}
.calendar.month .slot-title {
  font-size: 10px;
}

.field[hidden] {
  display: none;
}

@media (min-width: 761px) {
  .calendar-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.imported-calendar td {
  vertical-align: top;
  min-width: 170px;
}
.imported-calendar.day {
  min-width: 620px;
}
.imported-calendar.day td {
  width: 75%;
}
.import-event {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  text-align: left;
  white-space: normal;
  border: 1px solid var(--event-border, #cbd9d4);
  border-left: 3px solid var(--event-border, #497961);
  background: var(--event-bg, #eff6f1);
  padding: 12px;
  margin: 4px 0;
  border-radius: 8px;
  color: var(--event-text, #213b30);
}
.import-event:hover {
  background: var(--event-hover, #e0eee4);
}
.import-event .slot-title {
  white-space: normal;
  overflow-wrap: anywhere;
}
.import-notice {
  padding: 0 20px;
}
.import-empty {
  display: block;
  padding: 12px;
  color: #78867d;
  font-size: 12px;
}
.import-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.import-event .slot-desc {
  color: inherit;
  opacity: 0.82;
}
.turnkey-label {
  display: inline-block;
  margin-top: 7px;
  background: #f6ead1;
  color: #694b18;
}

/* Stable doctor colors, served from CSS to preserve the strict style CSP. */
.doctor-color-0 {
  --event-bg: hsl(0 65% 90%);
  --event-hover: hsl(0 65% 85%);
  --event-border: hsl(0 43% 48%);
  --event-text: hsl(0 35% 23%);
}
.doctor-color-1 {
  --event-bg: hsl(10 65% 90%);
  --event-hover: hsl(10 65% 85%);
  --event-border: hsl(10 43% 48%);
  --event-text: hsl(10 35% 23%);
}
.doctor-color-2 {
  --event-bg: hsl(20 65% 90%);
  --event-hover: hsl(20 65% 85%);
  --event-border: hsl(20 43% 48%);
  --event-text: hsl(20 35% 23%);
}
.doctor-color-3 {
  --event-bg: hsl(30 65% 90%);
  --event-hover: hsl(30 65% 85%);
  --event-border: hsl(30 43% 48%);
  --event-text: hsl(30 35% 23%);
}
.doctor-color-4 {
  --event-bg: hsl(40 65% 90%);
  --event-hover: hsl(40 65% 85%);
  --event-border: hsl(40 43% 48%);
  --event-text: hsl(40 35% 23%);
}
.doctor-color-5 {
  --event-bg: hsl(50 65% 90%);
  --event-hover: hsl(50 65% 85%);
  --event-border: hsl(50 43% 48%);
  --event-text: hsl(50 35% 23%);
}
.doctor-color-6 {
  --event-bg: hsl(60 65% 90%);
  --event-hover: hsl(60 65% 85%);
  --event-border: hsl(60 43% 48%);
  --event-text: hsl(60 35% 23%);
}
.doctor-color-7 {
  --event-bg: hsl(70 65% 90%);
  --event-hover: hsl(70 65% 85%);
  --event-border: hsl(70 43% 48%);
  --event-text: hsl(70 35% 23%);
}
.doctor-color-8 {
  --event-bg: hsl(80 65% 90%);
  --event-hover: hsl(80 65% 85%);
  --event-border: hsl(80 43% 48%);
  --event-text: hsl(80 35% 23%);
}
.doctor-color-9 {
  --event-bg: hsl(90 65% 90%);
  --event-hover: hsl(90 65% 85%);
  --event-border: hsl(90 43% 48%);
  --event-text: hsl(90 35% 23%);
}
.doctor-color-10 {
  --event-bg: hsl(100 65% 90%);
  --event-hover: hsl(100 65% 85%);
  --event-border: hsl(100 43% 48%);
  --event-text: hsl(100 35% 23%);
}
.doctor-color-11 {
  --event-bg: hsl(110 65% 90%);
  --event-hover: hsl(110 65% 85%);
  --event-border: hsl(110 43% 48%);
  --event-text: hsl(110 35% 23%);
}
.doctor-color-12 {
  --event-bg: hsl(120 65% 90%);
  --event-hover: hsl(120 65% 85%);
  --event-border: hsl(120 43% 48%);
  --event-text: hsl(120 35% 23%);
}
.doctor-color-13 {
  --event-bg: hsl(130 65% 90%);
  --event-hover: hsl(130 65% 85%);
  --event-border: hsl(130 43% 48%);
  --event-text: hsl(130 35% 23%);
}
.doctor-color-14 {
  --event-bg: hsl(140 65% 90%);
  --event-hover: hsl(140 65% 85%);
  --event-border: hsl(140 43% 48%);
  --event-text: hsl(140 35% 23%);
}
.doctor-color-15 {
  --event-bg: hsl(150 65% 90%);
  --event-hover: hsl(150 65% 85%);
  --event-border: hsl(150 43% 48%);
  --event-text: hsl(150 35% 23%);
}
.doctor-color-16 {
  --event-bg: hsl(160 65% 90%);
  --event-hover: hsl(160 65% 85%);
  --event-border: hsl(160 43% 48%);
  --event-text: hsl(160 35% 23%);
}
.doctor-color-17 {
  --event-bg: hsl(170 65% 90%);
  --event-hover: hsl(170 65% 85%);
  --event-border: hsl(170 43% 48%);
  --event-text: hsl(170 35% 23%);
}
.doctor-color-18 {
  --event-bg: hsl(180 65% 90%);
  --event-hover: hsl(180 65% 85%);
  --event-border: hsl(180 43% 48%);
  --event-text: hsl(180 35% 23%);
}
.doctor-color-19 {
  --event-bg: hsl(190 65% 90%);
  --event-hover: hsl(190 65% 85%);
  --event-border: hsl(190 43% 48%);
  --event-text: hsl(190 35% 23%);
}
.doctor-color-20 {
  --event-bg: hsl(200 65% 90%);
  --event-hover: hsl(200 65% 85%);
  --event-border: hsl(200 43% 48%);
  --event-text: hsl(200 35% 23%);
}
.doctor-color-21 {
  --event-bg: hsl(210 65% 90%);
  --event-hover: hsl(210 65% 85%);
  --event-border: hsl(210 43% 48%);
  --event-text: hsl(210 35% 23%);
}
.doctor-color-22 {
  --event-bg: hsl(220 65% 90%);
  --event-hover: hsl(220 65% 85%);
  --event-border: hsl(220 43% 48%);
  --event-text: hsl(220 35% 23%);
}
.doctor-color-23 {
  --event-bg: hsl(230 65% 90%);
  --event-hover: hsl(230 65% 85%);
  --event-border: hsl(230 43% 48%);
  --event-text: hsl(230 35% 23%);
}
.doctor-color-24 {
  --event-bg: hsl(240 65% 90%);
  --event-hover: hsl(240 65% 85%);
  --event-border: hsl(240 43% 48%);
  --event-text: hsl(240 35% 23%);
}
.doctor-color-25 {
  --event-bg: hsl(250 65% 90%);
  --event-hover: hsl(250 65% 85%);
  --event-border: hsl(250 43% 48%);
  --event-text: hsl(250 35% 23%);
}
.doctor-color-26 {
  --event-bg: hsl(260 65% 90%);
  --event-hover: hsl(260 65% 85%);
  --event-border: hsl(260 43% 48%);
  --event-text: hsl(260 35% 23%);
}
.doctor-color-27 {
  --event-bg: hsl(270 65% 90%);
  --event-hover: hsl(270 65% 85%);
  --event-border: hsl(270 43% 48%);
  --event-text: hsl(270 35% 23%);
}
.doctor-color-28 {
  --event-bg: hsl(280 65% 90%);
  --event-hover: hsl(280 65% 85%);
  --event-border: hsl(280 43% 48%);
  --event-text: hsl(280 35% 23%);
}
.doctor-color-29 {
  --event-bg: hsl(290 65% 90%);
  --event-hover: hsl(290 65% 85%);
  --event-border: hsl(290 43% 48%);
  --event-text: hsl(290 35% 23%);
}
.doctor-color-30 {
  --event-bg: hsl(300 65% 90%);
  --event-hover: hsl(300 65% 85%);
  --event-border: hsl(300 43% 48%);
  --event-text: hsl(300 35% 23%);
}
.doctor-color-31 {
  --event-bg: hsl(310 65% 90%);
  --event-hover: hsl(310 65% 85%);
  --event-border: hsl(310 43% 48%);
  --event-text: hsl(310 35% 23%);
}
.doctor-color-32 {
  --event-bg: hsl(320 65% 90%);
  --event-hover: hsl(320 65% 85%);
  --event-border: hsl(320 43% 48%);
  --event-text: hsl(320 35% 23%);
}
.doctor-color-33 {
  --event-bg: hsl(330 65% 90%);
  --event-hover: hsl(330 65% 85%);
  --event-border: hsl(330 43% 48%);
  --event-text: hsl(330 35% 23%);
}
.doctor-color-34 {
  --event-bg: hsl(340 65% 90%);
  --event-hover: hsl(340 65% 85%);
  --event-border: hsl(340 43% 48%);
  --event-text: hsl(340 35% 23%);
}
.doctor-color-35 {
  --event-bg: hsl(350 65% 90%);
  --event-hover: hsl(350 65% 85%);
  --event-border: hsl(350 43% 48%);
  --event-text: hsl(350 35% 23%);
}

.turnkey-occupancy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  margin-bottom: 6px;
  border: 1px solid #b5cfc4;
  border-left: 4px solid #477b65;
  border-radius: 8px;
  background: #eaf3ee;
  color: #24533f;
}
.turnkey-occupancy .slot-title {
  white-space: normal;
}

.shift-pair {
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-height: 100%;
}
.calendar-shift {
  padding: 6px;
  min-height: 65px;
}
.calendar-shift + .calendar-shift {
  border-top: 1px dashed #9aafa3;
}
.calendar-shift.available {
  background: #f4faf6;
}
.shift-label {
  font-size: 10px;
  color: #6d7f75;
  margin-bottom: 4px;
}
.shift-status {
  display: block;
  font-size: 11px;
  color: #4a8063;
}
.calendar-shift.occupied .shift-status {
  color: #8a642e;
}
.imported-calendar td {
  padding: 0;
}
.room-month {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.month-heading {
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  text-transform: capitalize;
}
.month-weekdays,
.month-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.month-weekdays {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 5px 0;
}
.month-days {
  flex: 1;
  min-height: 0;
}
.month-days.weeks-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.month-days.weeks-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}
.month-days.weeks-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}
.month-day {
  min-width: 0;
  min-height: 0;
  border-top: 2px solid #8fa69a;
  border-right: 2px solid #8fa69a;
  display: flex;
  flex-direction: column;
}
.month-day:nth-child(7n) {
  border-right: none;
}
.month-day-number {
  font-size: 11px;
  padding: 3px 7px;
  font-weight: 600;
}
.month-day.is-today .month-day-number {
  background: var(--green);
  color: white;
}
.month-day-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.outside-month {
  background: #f6f8f7;
}
.month-day .calendar-shift {
  min-height: 0;
  padding: 3px 4px;
}
.month-day .shift-label {
  font-size: 9px;
  margin-bottom: 1px;
}
.month-day .import-event {
  padding: 2px 4px;
  margin: 1px 0;
  gap: 0;
  border-radius: 4px;
  border-left-width: 3px;
}
.month-day .import-event .slot-title {
  font-size: 11px;
  line-height: 1.15;
}
.month-day .import-event .slot-desc {
  display: none;
}
.month-day .shift-status {
  font-size: 10px;
  line-height: 1.15;
}
.month-day .turnkey-occupancy {
  padding: 4px;
  margin: 1px;
  gap: 3px;
}
.month-day .turnkey-occupancy .slot-title {
  font-size: 11px;
}
.month-day .turnkey-occupancy .slot-desc {
  font-size: 9px;
}
.room-month-mode .main {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.room-month-mode .topbar {
  min-height: 36px;
  height: 36px;
  flex-shrink: 0;
}
.room-month-mode .content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
}
.room-month-mode .page-heading {
  margin-bottom: 10px;
  flex-shrink: 0;
}
.room-month-mode .page-heading .eyebrow,
.room-month-mode .page-heading .subtitle {
  display: none;
}
.room-month-mode h1 {
  font-size: 22px;
}
.room-month-mode .calendar-stats {
  display: none;
}
.room-month-mode .panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.room-month-mode .toolbar,
.room-month-mode .filterbar {
  padding: 8px 12px;
  flex-shrink: 0;
}
.room-month-mode #calendar-content {
  flex: 1;
  min-height: 0;
}
.room-month-mode .calendar-footer {
  padding: 6px 12px;
  font-size: 10px;
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .room-month-mode .content {
    padding: 8px;
  }
  .room-month-mode .topbar {
    display: none;
  }
  .room-month-mode .page-heading {
    gap: 8px;
  }
  .room-month-mode h1 {
    font-size: 18px;
  }
  .room-month-mode .toolbar {
    gap: 5px;
  }
  .room-month-mode .filterbar {
    gap: 5px;
    padding: 5px;
  }
  .room-month-mode .filterbar .search {
    min-width: 0;
  }
  .month-day .import-event .slot-title {
    font-size: 9px;
  }
  .month-day .shift-label {
    font-size: 8px;
  }
  .month-day .calendar-shift {
    padding: 2px;
  }
  .month-day .import-event {
    padding: 2px;
  }
}

.room-month-mode .content {
  width: 100%;
  margin: 0;
}
.month-day .calendar-shift {
  padding: 1px 3px;
}
.month-day .shift-label {
  font-size: 8px;
  line-height: 9px;
  margin: 0;
  white-space: nowrap;
}
.month-day .import-event {
  padding: 0 3px;
  margin: 0;
}
.month-day-number {
  padding: 2px 6px;
}
@media (max-width: 760px) {
  .shell.room-month-mode {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
  }
  .room-month-mode .sidebar {
    flex-shrink: 0;
  }
  .room-month-mode .main {
    flex: 1;
    height: auto;
    min-height: 0;
  }
  .room-month-mode .calendar-footer {
    display: none;
  }
}

button.calendar-shift {
  width: 100%;
  border: 0;
  border-radius: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
button.calendar-shift:hover {
  background: #dceee3;
}
button.calendar-shift:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.unpaid-mark {
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 17px;
  height: 17px;
  margin-left: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff1ed;
  color: #a33728;
  font: 700 13px/1 sans-serif;
  vertical-align: middle;
}
.unpaid-mark::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
  box-shadow: 0 1px #fff1ed;
}
.month-day .unpaid-mark {
  width: 12px;
  height: 12px;
  font-size: 10px;
}
.month-day .unpaid-mark::after {
  width: 12px;
}
.cashflow {
  margin-bottom: 30px;
}

.prepaid-summary {
  padding: 14px 16px;
  margin: 12px 0;
  border: 1px solid #bcd9ce;
  border-radius: 12px;
  background: #edf7f1;
  color: #254b3c;
}
.prepaid-summary p {
  margin: 6px 0;
}
.prepaid-summary small {
  display: block;
  line-height: 1.5;
}
#prepaid-receipt[hidden] {
  display: none;
}
.cashflow .stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.cashflow .stat-value {
  overflow-wrap: anywhere;
}

/* Today is distinct from doctor colors and the selected calendar period. */
.calendar thead .today {
  color: #713b05;
  background: #ffe4a6;
  box-shadow:
    inset 3px 0 #d88b24,
    inset -3px 0 #d88b24;
}
.today-label {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
}
.calendar td.is-today {
  background: #fff6df;
  box-shadow:
    inset 3px 0 #d88b24,
    inset -3px 0 #d88b24;
}
.month-day.is-today {
  background: #fff6df;
  box-shadow: inset 0 0 0 3px #d88b24;
}
.month-day.is-today .month-day-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffe4a6;
  color: #713b05;
  font-weight: 800;
}
.table-list tr.is-today > td {
  background: #fff6df;
  border-top: 2px solid #d88b24;
  border-bottom: 2px solid #d88b24;
}