:root {
  --bg: #f4f5f3;
  --surface: #ffffff;
  --panel: #f7f8f6;
  --line: #dde2de;
  --line-soft: #edf0ec;
  --text: #0f172a;
  --muted: #727b75;
  --muted-2: #a3aba4;
  --primary: #3f4854;
  --primary-soft: #edf0ec;
  --primary-line: #cdd5cc;
  --accent: #2f3640;
  --accent-soft: #f5ecd6;
  --pagi-bg: #19dce5;
  --pagi-line: #0fb9c5;
  --pagi-text: #052a31;
  --malam-bg: #191b20;
  --malam-line: #0e1014;
  --malam-text: #ffffff;
  --cuti-bg: #fff200;
  --cuti-line: #dbc900;
  --cuti-text: #342b00;
  --off-bg: #ff271a;
  --off-line: #dc1e14;
  --off-text: #ffffff;
  --change-bg: #16b956;
  --change-line: #0d913f;
  --change-text: #ffffff;
  --off-change-bg: #9d35ea;
  --off-change-line: #7d24c3;
  --off-change-text: #ffffff;
  --sidebar: 196px;
  --topbar: 60px;
  --role-col-width: 88px;
  --name-col-width: 224px;
  --date-col-width: max(120px, calc((100vw - var(--sidebar) - var(--role-col-width) - var(--name-col-width)) / 10));
  font-family: Inter, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--bg);
  color: var(--text);
}

body,
button,
input,
select,
textarea {
  font: 400 13px/1.42 Inter, Arial, sans-serif;
}

button,
input,
select,
textarea {
  color: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

a {
  color: inherit;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 10px;
  height: 0;
}

::-webkit-scrollbar-track {
  background: #edf1f7;
}

::-webkit-scrollbar-thumb {
  background: #c3ccdb;
  border: 2px solid #edf1f7;
  border-radius: 999px;
}

.sf-app {
  width: 100%;
  height: 100vh;
  min-height: 0;
  overflow-x: hidden;
}

.sf-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.sf-sidebar {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--sidebar);
  height: 100vh;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.sf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 22px;
}

.sf-brand__mark,
.sf-user__avatar,
.sf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
}

.sf-brand__mark {
  width: 34px;
  height: 34px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
}

.sf-brand strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.sf-brand span,
.sf-user small,
.sf-page-kicker,
.sf-muted,
.sf-field label {
  color: var(--muted);
}

.sf-brand span,
.sf-user small {
  display: block;
  font-size: 11px;
}

.sf-nav {
  display: grid;
  gap: 4px;
  align-content: start;
}

.sf-nav__group {
  margin: 4px 10px 8px;
  color: #8b95aa;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

button,
summary,
.sf-nav,
.sf-attendance-date-control,
.sf-date-menu,
.sf-date-menu * {
  -webkit-user-select: none;
  user-select: none;
}

.sf-nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 11px;
  border-radius: 12px;
  background: transparent;
  color: #69748b;
  font-weight: 500;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sf-nav__item i {
  width: 17px;
  color: inherit;
  font-size: 14px;
  text-align: center;
}

.sf-nav__item:hover {
  background: #f5f7fb;
  color: #28324a;
  transform: translateX(1px);
}

.sf-nav__item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.sf-nav-tree {
  display: grid;
  gap: 3px;
}

.sf-nav__item--parent {
  justify-content: flex-start;
}

.sf-nav__item--parent .sf-nav__chevron {
  width: auto;
  margin-left: auto;
  font-size: 10px;
  transition: transform .2s ease, color .16s ease;
}

.sf-nav-tree.is-open .sf-nav__chevron {
  transform: rotate(180deg);
}

.sf-nav-sub {
  display: grid;
  gap: 3px;
  margin: -1px 0 4px 28px;
  padding-left: 10px;
  border-left: 1px solid var(--line-soft);
  max-height: 76px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height .24s ease, opacity .18s ease, transform .18s ease, margin .18s ease;
}

.sf-nav-tree:not(.is-open) .sf-nav-sub {
  max-height: 0;
  margin-top: -4px;
  margin-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
}

.sf-nav-sub__item {
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  color: #6f7a90;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}

.sf-nav-sub__item:hover,
.sf-nav-sub__item:focus-visible {
  background: #f5f7fb;
  color: #28324a;
}

.sf-nav-sub__item.is-active {
  background: #edf0ec;
  color: var(--primary);
}

.sf-user {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 8px 0;
  border-top: 1px solid var(--line-soft);
}

.sf-user__text {
  min-width: 0;
}

.sf-user__text strong,
.sf-user__text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-user__logout {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  margin-top: 2px;
  border-radius: 8px;
  background: #f5f7f9;
  color: #596579;
  font-size: 12px;
  font-weight: 600;
  transition: background .16s ease, color .16s ease;
}

.sf-user__logout:hover,
.sf-user__logout:focus-visible {
  background: #fff0f2;
  color: #d43d52;
  outline: none;
}

.sf-user__logout i {
  font-size: 12px;
}

.sf-user__avatar,
.sf-profile-mini__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}

.sf-user strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}

.sf-content {
  display: grid;
  grid-template-rows: var(--topbar) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--surface);
}

.sf-topbar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--topbar);
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
}

.sf-topbar__title {
  min-width: 0;
}

.sf-topbar__title--schedule {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.sf-topbar__title span {
  display: block;
  color: #7d879c;
  font-size: 11px;
}

.sf-topbar__title strong {
  display: block;
  margin-top: 2px;
  flex: 0 0 auto;
  color: #030712;
  font-size: 14px;
  font-weight: 600;
}

.sf-topbar__title--schedule strong {
  margin-top: 0;
}

.sf-topbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.sf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #667085;
}

.sf-icon-btn:hover {
  border-color: var(--line);
  background: #f8fafc;
}

.sf-profile-mini {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 10px;
  border-left: 1px solid var(--line-soft);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.sf-profile-mini::-webkit-details-marker {
  display: none;
}

.sf-profile-mini__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sf-profile-menu {
  position: relative;
}

.sf-profile-menu__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  width: 210px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .14);
  transform-origin: top right;
  animation: sf-profile-menu-in .2s cubic-bezier(.2, .85, .25, 1);
  will-change: opacity, transform;
}

.sf-profile-menu__panel::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: #fff;
  transform: rotate(45deg);
}

.sf-profile-menu__identity {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.sf-profile-menu__identity strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-profile-menu__identity small {
  color: #7d879c;
  font-size: 11px;
}

.sf-profile-menu__logout {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  margin-top: 6px;
  padding: 0 10px;
  border-radius: 8px;
  color: #596579;
  font-size: 12px;
  font-weight: 600;
}

.sf-profile-menu__logout:hover,
.sf-profile-menu__logout:focus-visible {
  background: #fff0f2;
  color: #d43d52;
  outline: none;
}

.sf-profile-menu[open] .sf-profile-mini__avatar {
  box-shadow: 0 0 0 3px rgba(39, 116, 201, .14);
}

.sf-profile-menu.is-closing .sf-profile-menu__panel {
  pointer-events: none;
  animation: sf-profile-menu-out .16s ease forwards;
}

.sf-profile-menu[open] .sf-profile-menu__identity,
.sf-profile-menu[open] .sf-profile-menu__logout {
  animation: sf-profile-menu-item-in .22s .04s ease both;
}

.sf-profile-menu[open] .sf-profile-menu__logout {
  animation-delay: .08s;
}

@keyframes sf-profile-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sf-profile-menu-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(.97);
  }
}

@keyframes sf-profile-menu-item-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-profile-menu__panel,
  .sf-profile-menu[open] .sf-profile-menu__identity,
  .sf-profile-menu[open] .sf-profile-menu__logout,
  .sf-profile-menu.is-closing .sf-profile-menu__panel {
    animation-duration: .01ms;
    animation-delay: 0s;
  }
}

.sf-main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}

.sf-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - var(--topbar));
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

.sf-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.sf-toolbar__left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}

.sf-period {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding-right: 18px;
  border-right: 1px solid var(--line-soft);
}

.sf-period__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6b7280;
}

.sf-period__btn:hover {
  color: var(--primary);
}

.sf-period__text {
  min-width: 150px;
}

.sf-period__text span {
  display: block;
  color: #8a94a8;
  font-size: 11px;
}

.sf-period__text strong {
  display: block;
  margin-top: 2px;
  color: #030712;
  font-size: 14px;
  font-weight: 600;
}

.sf-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.sf-summary__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #647089;
  font-size: 13px;
  white-space: nowrap;
}

.sf-summary__item strong {
  color: #0f172a;
  font-weight: 600;
}

.sf-topbar .sf-summary {
  gap: 10px;
  padding-left: 18px;
  border-left: 1px solid var(--line-soft);
}

.sf-topbar .sf-summary__item {
  font-size: 12px;
}

.sf-dot {
  width: 7px;
  height: 7px;
  border: 1px solid transparent;
  border-radius: 50%;
}

.sf-dot--pagi {
  border-color: var(--pagi-line);
  background: var(--pagi-bg);
}

.sf-dot--malam {
  border-color: var(--malam-line);
  background: var(--malam-bg);
}

.sf-dot--cuti {
  border-color: var(--cuti-line);
  background: var(--cuti-bg);
}

.sf-dot--off {
  border-color: var(--off-line);
  background: var(--off-bg);
}

.sf-dot--change {
  border-color: var(--change-line);
  background: var(--change-bg);
}

.sf-dot--off-change {
  border-color: var(--off-change-line);
  background: var(--off-change-bg);
}

.sf-toolbar__right,
.sf-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.sf-search {
  position: relative;
  width: 230px;
}

.sf-search i {
  position: absolute;
  left: 13px;
  top: 50%;
  color: #8e99ad;
  transform: translateY(-50%);
}

.sf-search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  background: #f1f4f9;
  color: var(--text);
  font-weight: 400;
}

.sf-search input:focus,
.sf-control:focus,
.sf-field input:focus,
.sf-field select:focus,
.sf-field textarea:focus {
  border-color: var(--primary-line);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(39, 49, 63, .10);
}

.sf-action-menu {
  position: relative;
  z-index: 60;
}

.sf-action-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #293342;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  list-style: none;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.sf-action-menu__trigger::-webkit-details-marker {
  display: none;
}

.sf-action-menu__trigger::marker {
  content: "";
}

.sf-action-menu__trigger > i {
  position: relative;
  z-index: 2;
  font-size: 14px;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}

.sf-action-menu__trigger:hover {
  border-color: #1f2937;
  background: #303946;
  transform: translateY(-1px);
}

.sf-action-menu[open] .sf-action-menu__trigger {
  background: #303946;
}

.sf-action-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  width: 218px;
  padding: 8px;
  border: 1px solid #d8dfda;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.sf-action-menu__panel::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 16px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #d8dfda;
  border-left: 1px solid #d8dfda;
  background: rgba(255, 255, 255, .98);
  transform: rotate(45deg);
}

.sf-action-menu__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 10px;
  background: transparent;
  color: #344054;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  transition: background .14s ease, color .14s ease;
}

.sf-action-menu__item i {
  width: 16px;
  color: #64748b;
  text-align: center;
}

.sf-action-menu__item:hover {
  background: #f2f5f2;
  color: #172033;
}

.sf-action-menu__item--primary {
  background: #eff3f0;
  color: var(--primary);
}

.sf-action-menu__item--primary i {
  color: var(--primary);
}

.sf-action-menu__item--danger {
  color: #dc2626;
}

.sf-action-menu__item--danger i {
  color: #ef4444;
}

.sf-action-menu__item--danger:hover {
  background: #fff1f2;
  color: #b91c1c;
}

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #536079;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.sf-btn:hover {
  border-color: #cfd8e6;
  background: #f8fafc;
}

.sf-btn--primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.sf-btn--soft {
  border-color: #d5dcd7;
  background: #f6f8f6;
  color: #334155;
}

.sf-btn--soft:hover {
  border-color: #c4ccc6;
  background: #eef2ef;
}

.sf-btn--danger {
  border-color: #ffd5dd;
  background: #fff5f6;
  color: #cf344e;
}

.sf-btn--danger-soft {
  border-color: #f3c9d0;
  background: #fff7f8;
  color: #be3348;
}

.sf-btn--danger-soft:hover {
  border-color: #eaaeb9;
  background: #fff0f2;
}

.sf-btn--ghost {
  background: transparent;
}

.sf-table-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}

.sf-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  height: 38px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.sf-tab {
  position: relative;
  height: 38px;
  padding: 0;
  background: transparent;
  color: #748098;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.sf-tab span {
  margin-left: 5px;
  color: #a1aab9;
  font-weight: 500;
}

.sf-tab.is-active {
  color: var(--primary);
  font-weight: 600;
}

.sf-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
}

.sf-table-wrap {
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  background: #fafbf9;
  scrollbar-color: rgba(111, 124, 136, .55) transparent;
  scrollbar-width: thin;
}

.sf-table-wrap::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}

.sf-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.sf-table-wrap::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: rgba(111, 124, 136, .55);
}

.sf-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(69, 80, 91, .72);
}

.sf-schedule-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #fafbf9;
}

.sf-schedule-table th,
.sf-schedule-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.sf-schedule-table th:first-child,
.sf-schedule-table td:first-child {
  border-left: 0;
}

.sf-schedule-table th:last-child,
.sf-schedule-table td:last-child {
  border-right: 0;
}

.sf-schedule-table thead th {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #f6f8f6;
}

.sf-role-col {
  width: var(--role-col-width);
}

.sf-name-col {
  width: var(--name-col-width);
}

.sf-date-col {
  width: var(--date-col-width);
}

.sf-sticky-left {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--surface);
  background-clip: border-box;
}

.sf-sticky-role {
  box-shadow: inset -1px 0 0 var(--line);
}

.sf-sticky-name {
  left: var(--role-col-width);
  box-shadow: inset -1px 0 0 var(--line), inset 1px 0 0 var(--line-soft);
}

.sf-schedule-table thead .sf-sticky-left {
  z-index: 15;
  background: #f6f8f6;
}

.sf-role-head,
.sf-name-head {
  height: 44px;
  padding: 0 12px;
  color: #768197;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

.sf-role-head,
.sf-role-cell,
.sf-total-sticky-blank {
  width: var(--role-col-width);
  min-width: var(--role-col-width);
  max-width: var(--role-col-width);
}

.sf-name-head,
.sf-name-cell,
.sf-total-label {
  width: var(--name-col-width);
  min-width: var(--name-col-width);
  max-width: var(--name-col-width);
}

.sf-day-head,
.sf-shift-cell,
.sf-total-count {
  width: var(--date-col-width);
  min-width: var(--date-col-width);
  max-width: var(--date-col-width);
}

.sf-role-head {
  text-align: center;
}

.sf-name-head {
  padding-left: 14px;
}

.sf-day-head {
  height: 44px;
  padding: 0;
  text-align: center;
}

.sf-day-tab {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
  padding: 3px 4px;
  background: transparent;
  color: inherit;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.sf-day-tab:hover {
  background: rgba(63, 72, 84, .06);
}

.sf-day-tab span {
  display: block;
  color: #8a94a8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}

.sf-day-tab strong {
  display: block;
  margin-top: 1px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.12;
  white-space: nowrap;
}

.sf-day-head.is-today {
  background: #f1f3ef;
}

.sf-day-head.is-today .sf-day-tab strong {
  color: #7a5b1f;
}

.sf-day-head.is-active-day {
  background: var(--primary);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.sf-day-head.is-active-day .sf-day-tab span,
.sf-day-head.is-active-day .sf-day-tab strong {
  color: #fff;
}

.sf-day-head.is-active-day.is-today .sf-day-tab strong {
  color: #fff;
}

.sf-role-cell,
.sf-name-cell {
  height: 38px;
  padding: 0 12px;
}

.sf-avatar {
  width: 30px;
  height: 30px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}

.sf-role-cell {
  color: #607089;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
}

.sf-name-cell {
  padding-left: 14px;
}

.sf-name-cell strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-shift-cell {
  height: 38px;
  padding: 3px 6px;
  background: #fbfcfb;
  transition: background .12s ease;
}

.sf-shift-cell.is-active-col {
  background: #eef1f3;
}

.sf-shift-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 8px;
  text-align: center;
  overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.sf-shift-card strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-shift-card small {
  display: none;
}

.sf-shift-card--pagi {
  border-color: var(--pagi-line);
  background: var(--pagi-bg);
  color: var(--pagi-text);
}

.sf-shift-card--malam {
  border-color: var(--malam-line);
  background: var(--malam-bg);
  color: var(--malam-text);
}

.sf-shift-card--cuti {
  border-color: var(--cuti-line);
  background: var(--cuti-bg);
  color: var(--cuti-text);
}

.sf-shift-card--off_day {
  border-color: var(--off-line);
  background: var(--off-bg);
  color: var(--off-text);
}

.sf-shift-card--change_malam {
  border-color: var(--change-line);
  background: var(--change-bg);
  color: var(--change-text);
}

.sf-shift-card--off_change_pagi {
  border-color: var(--off-change-line);
  background: var(--off-change-bg);
  color: var(--off-change-text);
}

.sf-empty-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #c0c8d6;
  font-size: 14px;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}

.sf-empty-cell--action {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  padding: 0;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}

.sf-empty-cell--action i {
  display: none;
  font-size: 10px;
}

.sf-empty-cell--action:hover,
.sf-empty-cell--action:focus-visible {
  border-color: #cfd8d3;
  background: #f5f7f5;
  color: #415066;
  outline: none;
}

.sf-empty-cell--action:hover .sf-empty-cell__dash,
.sf-empty-cell--action:focus-visible .sf-empty-cell__dash {
  display: none;
}

.sf-empty-cell--action:hover i,
.sf-empty-cell--action:focus-visible i {
  display: block;
}

.sf-schedule-table .is-hovered-row {
  background: #f4f6f4;
}

.sf-schedule-table .sf-role-cell.is-hovered-row,
.sf-schedule-table .sf-name-cell.is-hovered-row {
  background: #edf1ee;
}

.sf-schedule-table .sf-name-cell.is-hovered-row strong {
  color: var(--primary);
}

.sf-schedule-table .is-hovered-col {
  background: #f1f4f2;
}

.sf-schedule-table .sf-shift-cell.is-active-col.is-hovered-col {
  background: #e4e9ed;
}

.sf-schedule-table .sf-day-head.is-hovered-col {
  background: #e9eeec;
}

.sf-schedule-table .sf-day-head.is-hovered-col .sf-day-tab span,
.sf-schedule-table .sf-day-head.is-hovered-col .sf-day-tab strong {
  color: #344054;
}

.sf-schedule-table .sf-day-head.is-active-day.is-hovered-col {
  background: #374151;
}

.sf-schedule-table .sf-day-head.is-active-day.is-hovered-col .sf-day-tab span,
.sf-schedule-table .sf-day-head.is-active-day.is-hovered-col .sf-day-tab strong {
  color: #fff;
}

.sf-shift-cell.is-hovered-col.is-hovered-row {
  background: #e1e6ea;
}

.sf-shift-cell.is-hovered-col.is-hovered-row .sf-shift-card {
  box-shadow: inset 0 0 0 1px rgba(63, 72, 84, .24), 0 3px 10px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}

.sf-total-row th,
.sf-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 18;
  height: 36px;
  border-top: 1px solid #d4dbd8;
  background: #eef1ef;
  box-shadow: 0 -1px 0 #d4dbd8, 0 -8px 18px rgba(15, 23, 42, .05);
}

.sf-total-row .sf-sticky-role,
.sf-total-row .sf-sticky-name {
  z-index: 28;
  background: #eef1ef;
}

.sf-total-sticky-blank {
  padding: 0;
}

.sf-total-label {
  padding: 0 14px;
  color: #768197;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

.sf-total-count {
  text-align: center;
}

.sf-total-count.is-hovered-col {
  background: #e4e9ed;
}

.sf-total-count.is-active-col {
  background: #3f4854;
}

.sf-total-count.is-active-col.is-hovered-col {
  background: #343c46;
}

.sf-total-count.is-active-col strong {
  color: #fff;
}

.sf-total-count.is-active-col span {
  color: #b9c0ca;
}

.sf-total-count strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
}

.sf-total-count span {
  display: block;
  margin-top: 1px;
  color: #748098;
  font-size: 9px;
}

.sf-empty-state {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.sf-empty-state i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #f2f5fb;
  color: var(--muted-2);
}

.sf-title-block {
  min-width: 0;
  margin-right: auto;
}

.sf-page-kicker {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-title-block h1,
.sf-title-block h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}

.sf-title-block p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.sf-modal {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
}

.sf-page--staff {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - var(--topbar));
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

.sf-page--staff .sf-toolbar {
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.sf-staff-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

.sf-list-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: #fafbf9;
}

.sf-list-toolbar .sf-title-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.sf-list-toolbar .sf-page-kicker {
  margin-bottom: 0;
}

.sf-list-toolbar h2 {
  font-size: 14px;
  font-weight: 650;
}

.sf-control {
  height: 38px;
  min-width: 146px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  background: #f8fafc;
  font-weight: 500;
}

.sf-staff-table-wrap {
  min-height: 0;
  overflow: auto;
  background: #fafbf9;
  scrollbar-color: #c5ccc8 #eef1ed;
  scrollbar-width: thin;
}

.sf-staff-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fafbf9;
}

.sf-staff-table th,
.sf-staff-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.sf-staff-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f6f8f6;
  color: #768197;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-staff-table tbody tr {
  transition: background .14s ease;
}

.sf-staff-table tbody tr:hover {
  background: #f4f6f4;
}

.sf-staff-table th:nth-child(1),
.sf-staff-table td:nth-child(1) {
  width: 11%;
}

.sf-staff-table th:nth-child(2),
.sf-staff-table td:nth-child(2) {
  width: 41%;
}

.sf-staff-table th:nth-child(3),
.sf-staff-table td:nth-child(3) {
  width: 18%;
}

.sf-staff-table th:nth-child(4),
.sf-staff-table td:nth-child(4) {
  width: 18%;
}

.sf-staff-table th:nth-child(5),
.sf-staff-table td:nth-child(5) {
  width: 12%;
}

.sf-staff-table td strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.sf-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.sf-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.sf-status--active {
  color: #087f4d;
  background: #ecfdf3;
}

.sf-status--active::before {
  background: #12b76a;
}

.sf-status--inactive {
  color: #667085;
  background: #f2f4f7;
}

.sf-status--inactive::before {
  background: #98a2b3;
}

.sf-page--attendance {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(100vh - var(--topbar));
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

.sf-attendance-hero {
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 197, 204, .10), transparent 34%),
    linear-gradient(90deg, rgba(34, 197, 204, .05), rgba(255, 255, 255, 0) 24%, rgba(31, 42, 55, .03) 50%, rgba(255, 255, 255, 0) 76%, rgba(34, 197, 204, .04)),
    #fff;
}

.sf-attendance-hero__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 2px solid #1f2937;
}

.sf-attendance-hero__title span {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #d7ded8;
  border-radius: 10px;
  background: #f5f8f5;
  color: #334155;
  font-size: 15px;
}

.sf-attendance-hero__title h1 {
  margin: 0;
  color: #172033;
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
}

.sf-attendance-hero__stats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 24px;
  padding: 0;
  color: #667085;
}

.sf-attendance-hero__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #526071;
  font-weight: 800;
}

.sf-attendance-hero__stat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c5cc;
  box-shadow: 0 0 0 3px rgba(34, 197, 204, .10);
}

.sf-attendance-hero__stat small {
  font-size: 12px;
  font-weight: 800;
}

.sf-attendance-hero__stat strong {
  color: #172033;
  font-size: 15px;
  line-height: 1;
}

.sf-attendance-hero__stat--pagi strong {
  color: #0d7880;
}

.sf-attendance-hero__stat--malam::before {
  background: #1f2937;
  box-shadow: 0 0 0 3px rgba(31, 41, 55, .10);
}

.sf-attendance-hero__stat--malam strong {
  color: #1f2937;
}

.sf-attendance-hero__divider {
  width: 1px;
  height: 16px;
  background: #dce3dd;
}

.sf-attendance-hero__stats time {
  color: #526071;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.sf-attendance-toolbar {
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.sf-attendance-toolbar--clean {
  justify-content: center;
  min-height: 74px;
}

.sf-attendance-toolbar--clean .sf-toolbar__right {
  justify-content: center;
  width: 100%;
  margin-left: 0;
}

.sf-attendance-panel {
  min-height: 0;
  overflow: auto;
  background: #fafbf9;
  padding-bottom: 22px;
  scrollbar-color: rgba(111, 124, 136, .42) transparent;
  scrollbar-width: thin;
}

.sf-attendance-panel::-webkit-scrollbar,
.sf-attendance-table-wrap::-webkit-scrollbar,
.sf-date-menu__panel::-webkit-scrollbar {
  width: 4px;
  height: 5px;
}

.sf-attendance-panel::-webkit-scrollbar-track,
.sf-attendance-table-wrap::-webkit-scrollbar-track,
.sf-date-menu__panel::-webkit-scrollbar-track {
  background: transparent;
}

.sf-attendance-panel::-webkit-scrollbar-thumb,
.sf-attendance-table-wrap::-webkit-scrollbar-thumb,
.sf-date-menu__panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(111, 124, 136, .38);
}

.sf-date-menu {
  position: relative;
  justify-self: center;
  z-index: 30;
}

.sf-attendance-date-control {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(216px, auto) minmax(140px, auto);
  align-items: center;
  gap: 10px;
}

.sf-attendance-step {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sf-attendance-step::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(34, 197, 204, .13), rgba(52, 64, 84, .04));
  opacity: 0;
  transform: scaleX(.82);
  transform-origin: center;
  transition: opacity .18s ease, transform .22s ease;
}

.sf-attendance-step > * {
  position: relative;
  z-index: 1;
}

.sf-attendance-step i {
  color: #536273;
  font-size: 12px;
}

.sf-attendance-step:hover,
.sf-attendance-step:focus-visible {
  border-color: #c8d6ce;
  background: #eef4f1;
  color: #172033;
  box-shadow: 0 8px 18px rgba(32, 46, 38, .08);
  transform: translateY(-1px);
}

.sf-attendance-step:hover::before,
.sf-attendance-step:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.sf-attendance-step:active {
  transform: translateY(0) scale(.985);
}

.sf-page--attendance.is-attendance-next .sf-attendance-panel,
.sf-page--attendance.is-attendance-next .sf-attendance-hero__stats {
  animation: sfAttendanceNext .28s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-page--attendance.is-attendance-prev .sf-attendance-panel,
.sf-page--attendance.is-attendance-prev .sf-attendance-hero__stats {
  animation: sfAttendancePrev .28s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes sfAttendanceNext {
  from {
    opacity: .64;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sfAttendancePrev {
  from {
    opacity: .64;
    transform: translateX(-14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sf-date-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 216px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  list-style: none;
  background: #fff;
  color: #344054;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sf-date-menu__trigger::-webkit-details-marker {
  display: none;
}

.sf-date-menu__trigger:hover,
.sf-date-menu__trigger:focus-visible,
.sf-date-menu[open] .sf-date-menu__trigger {
  border-color: #c7d0c9;
  background: #f2f5f2;
  box-shadow: 0 0 0 3px rgba(63, 72, 84, .06);
  transform: translateY(-1px);
}

.sf-date-menu__trigger i:first-child {
  color: #536273;
}

.sf-date-menu__trigger i:last-child {
  color: #536273;
  font-size: 11px;
  transition: transform .15s ease;
}

.sf-date-menu[open] .sf-date-menu__trigger i:last-child {
  transform: rotate(180deg);
}

.sf-date-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  display: grid;
  gap: 10px;
  width: 286px;
  padding: 14px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
  transform-origin: top center;
  transform: translateX(-50%);
  will-change: opacity, transform;
}

.sf-date-menu[open] .sf-date-menu__panel {
  animation: sfDateMenuIn .18s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-date-menu.is-closing .sf-date-menu__panel {
  pointer-events: none;
  animation: sfDateMenuOut .16s ease both;
}

@keyframes sfDateMenuIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes sfDateMenuOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(.98);
  }
}

.sf-date-menu__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 2px;
}

.sf-date-menu__head span {
  color: #7c8797;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sf-date-menu__head strong {
  color: #172033;
  font-size: 14px;
  font-weight: 850;
}

.sf-date-menu__weekdays,
.sf-date-menu__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sf-date-menu__weekdays {
  gap: 4px;
}

.sf-date-menu__weekdays span {
  color: #8b98aa;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .05em;
  text-align: center;
}

.sf-date-menu__grid {
  gap: 5px;
}

.sf-date-menu__blank {
  min-height: 34px;
}

.sf-date-menu__day {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f8faf8;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sf-date-menu__day:hover,
.sf-date-menu__day:focus-visible {
  border-color: #c8d6ce;
  background: #eef4f1;
  color: #172033;
  transform: translateY(-1px);
}

.sf-date-menu__day.is-today {
  border-color: rgba(34, 197, 204, .52);
  background: #ecfeff;
  color: #0d6472;
}

.sf-date-menu__day.is-active {
  border-color: #334155;
  background: #334155;
  color: #fff;
  box-shadow: 0 8px 18px rgba(51, 65, 85, .18);
}

.sf-date-menu__day.is-active:hover,
.sf-date-menu__day.is-active:focus-visible {
  border-color: #273444;
  background: #273444;
  color: #fff;
}

.sf-date-menu__item {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  color: #344054;
  text-align: left;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}

.sf-date-menu__item:hover,
.sf-date-menu__item:focus-visible {
  background: #f2f5f2;
  color: #111827;
}

.sf-date-menu__item.is-active {
  background: var(--primary);
  color: #fff;
}

.sf-attendance-section {
  border-bottom: 1px solid var(--line);
  background: #fafbf9;
}

.sf-attendance-section + .sf-attendance-section {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

.sf-attendance-shift-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #fafbf9 100%);
}

.sf-attendance-shift-title h2 {
  position: relative;
  margin: 0;
  color: #172033;
  font-size: clamp(23px, 1.8vw, 31px);
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.sf-attendance-shift-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 84px;
  height: 2px;
  border-radius: 999px;
  background: #1f2937;
  transform: translateX(-50%);
}

.sf-attendance-shift-title--pagi h2::after {
  background: var(--pagi-bg);
}

.sf-attendance-shift-title--malam h2::after {
  background: #1f2937;
}

.sf-attendance-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.sf-attendance-section__head span {
  color: #7c8797;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

.sf-attendance-section__head h2 {
  margin: 2px 0 0;
  color: #1f2937;
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
}

.sf-attendance-section--pagi .sf-attendance-section__head h2 {
  color: #0d7880;
}

.sf-attendance-section--malam .sf-attendance-section__head h2 {
  color: #232a33;
}

.sf-attendance-section__head > strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef2ef;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.sf-attendance-table-wrap {
  overflow: auto;
  background: #fafbf9;
  scrollbar-color: rgba(111, 124, 136, .42) transparent;
  scrollbar-width: thin;
}

.sf-attendance-table {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fafbf9;
}

.sf-attendance-table th,
.sf-attendance-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.sf-attendance-table th {
  background: #3f4854;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.sf-attendance-table th:nth-child(2),
.sf-attendance-table td:nth-child(2) { text-align: left; }

.sf-attendance-col--number { width: 4%; }
.sf-attendance-col--staff { width: 22%; }
.sf-attendance-col--role { width: 12%; }
.sf-attendance-col--date { width: 14%; }
.sf-attendance-col--shift { width: 15%; }
.sf-attendance-col--checkin { width: 14%; }
.sf-attendance-col--location { width: 13%; }
.sf-attendance-col--check { width: 14%; }
.sf-attendance-col--status { width: 14%; }

.sf-attendance-table tbody tr {
  transition: background .18s ease, box-shadow .18s ease;
}

.sf-attendance-table tbody tr:hover {
  background: #eef2ef;
  box-shadow: inset 3px 0 0 rgba(45, 62, 80, .18);
}

.sf-attendance-table tbody tr.is-crosscheck-feedback {
  animation: sf-attendance-row-confirm .54s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-attendance-table tbody tr.is-crosscheck-feedback .sf-crosscheck-btn {
  animation: sf-attendance-button-confirm .42s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-attendance-table tbody tr.is-crosscheck-feedback .sf-attendance-status {
  animation: sf-attendance-text-confirm .5s ease both;
}

.sf-attendance-table td strong {
  color: #111827;
  font-weight: 800;
}

.sf-attendance-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.sf-attendance-pill--pagi {
  border: 1px solid rgba(15, 185, 197, .36);
  background: rgba(25, 220, 229, .18);
  color: #05727b;
}

.sf-attendance-pill--malam {
  border: 1px solid #0e1014;
  background: #191b20;
  color: #fff;
}

.sf-crosscheck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eef6ff;
  color: #175cd3;
  font-weight: 700;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    transform .18s ease;
}

.sf-crosscheck-btn i {
  transition: transform .18s ease;
}

.sf-crosscheck-btn:hover,
.sf-crosscheck-btn:focus-visible {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #0f3f95;
  box-shadow: 0 6px 18px rgba(23, 92, 211, .10);
}

.sf-crosscheck-btn:hover i,
.sf-crosscheck-btn:focus-visible i {
  transform: scale(1.08);
}

.sf-crosscheck-btn:active {
  transform: translateY(1px);
}

.sf-crosscheck-btn.is-checked {
  border-color: #b7e4ce;
  background: #ecfdf3;
  color: #087f4d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.sf-crosscheck-btn.is-checked:hover,
.sf-crosscheck-btn.is-checked:focus-visible {
  background: #dff8eb;
  color: #05603a;
  box-shadow: 0 6px 18px rgba(8, 127, 77, .10);
}

.sf-attendance-status {
  color: #7a8280;
  font-style: italic;
  font-weight: 650;
  transition: color .18s ease, opacity .18s ease;
}

.sf-attendance-status.is-present {
  color: #087f4d;
  font-style: normal;
}

/* Attendance uses lightweight operational labels instead of card or pill controls. */
.sf-attendance-shift {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 126px;
  text-align: left;
}
.sf-attendance-shift > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #edf4fc;
  color: #287cc7;
  font-size: 11px;
}
.sf-attendance-shift > span,
.sf-attendance-status > span { display: grid; gap: 2px; }
.sf-attendance-shift strong { color: #25364d; font-size: 11px; font-weight: 850; }
.sf-attendance-shift small { color: #7b8997; font-size: 9px; font-weight: 700; white-space: nowrap; }
.sf-attendance-shift--malam > i { background: #edf0f4; color: #31445b; }
.sf-attendance-table .sf-attendance-pill { display: none; }
.sf-crosscheck-btn {
  min-height: 0;
  padding: 5px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #2166c5;
  font-size: 11px;
}
.sf-crosscheck-btn:hover,
.sf-crosscheck-btn:focus-visible { background: transparent; box-shadow: none; color: #124b9d; text-decoration: none; transform: translateX(3px); }
.sf-crosscheck-btn:hover i,
.sf-crosscheck-btn:focus-visible i { animation: sf-crosscheck-icon-nudge .34s cubic-bezier(.2,.8,.2,1) both; }
.sf-crosscheck-btn.is-checked { background: transparent; box-shadow: none; color: #16805b; }
.sf-crosscheck-btn.is-checked:hover,
.sf-crosscheck-btn.is-checked:focus-visible { background: transparent; box-shadow: none; color: #0d6244; }
.sf-attendance-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #8995a3;
  font-size: 10px;
  font-style: normal;
}
.sf-attendance-status.is-present { color: #16805b; }
.sf-attendance-status.is-present > i { font-size: 13px; }
.sf-attendance-status strong { color: #16805b; font-size: 11px; font-weight: 850; line-height: 1.2; }
.sf-attendance-status small { color: #6e887d; font-size: 10px; font-weight: 700; line-height: 1.2; }
.sf-attendance-status.is-late { color: #cf4e5a; }
.sf-attendance-status.is-late > i { color: #d9535f; }
.sf-attendance-status.is-late strong { color: #c93645; }
.sf-attendance-status.is-late small { color: #8c6670; }

.sf-checkin-status,
.sf-location-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8a96a3;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.sf-checkin-status i { color: #a6b0bb; font-size: 12px; }
.sf-checkin-status.is-checked { color: #16805b; }
.sf-checkin-status.is-checked i { color: #16805b; }
.sf-checkin-status span { display: grid; gap: 2px; }
.sf-checkin-status small,
.sf-location-meta { color: #7b8997; font-size: 9px; font-weight: 700; }
.sf-location-link { color: #2166c5; text-decoration: none; }
.sf-location-link:hover { color: #124b9d; text-decoration: none; }
.sf-location-empty { color: #a3adb8; font-size: 10px; }

@keyframes sf-crosscheck-icon-nudge {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(3px) scale(1.14); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes sf-attendance-row-confirm {
  0% {
    background: rgba(236, 253, 243, 0);
    box-shadow: inset 0 0 0 rgba(45, 62, 80, 0);
  }
  42% {
    background: #edf7f1;
    box-shadow: inset 4px 0 0 rgba(8, 127, 77, .22);
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 rgba(45, 62, 80, 0);
  }
}

@keyframes sf-attendance-button-confirm {
  0% {
    transform: scale(.98);
  }
  50% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes sf-attendance-text-confirm {
  0% {
    opacity: .45;
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sf-empty-state--attendance {
  min-height: 140px;
  background: #fafbf9;
}

.sf-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #667085;
}

.sf-mini-btn:hover {
  background: #f8fafc;
  color: var(--primary);
}

.sf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(241, 243, 241, .70);
  -webkit-backdrop-filter: blur(14px) saturate(85%);
  backdrop-filter: blur(14px) saturate(85%);
  animation: sf-backdrop-in .16s ease-out both;
}

.sf-modal-backdrop:has(.sf-modal--month-preview) {
  padding: 8px 12px;
}

.sf-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(560px, 100%);
  max-height: min(760px, calc(100vh - 44px));
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .18);
  animation: sf-modal-in .18s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-modal--shift {
  width: min(520px, 100%);
  border-radius: 16px;
}

.sf-bulk-staff,
.sf-duration-picker {
  display: grid;
  gap: 8px;
}

.sf-bulk-staff__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sf-bulk-staff__head label,
.sf-duration-picker > label {
  font-size: 12px;
  font-weight: 600;
}

.sf-bulk-staff__head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  transition: color .18s ease, transform .18s ease;
}

.sf-bulk-staff__head span.has-selection {
  color: #16876a;
  transform: translateY(-1px);
}

.sf-bulk-staff__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.sf-select-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid #cfe1da;
  border-radius: 7px;
  color: #277d68;
  background: #f8fcfa;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.sf-select-all-btn:hover,
.sf-select-all-btn:focus-visible {
  border-color: #79c8b3;
  background: #edf9f4;
  transform: translateY(-1px);
}

.sf-select-all-btn.is-selected {
  border-color: #45af91;
  color: #126d58;
  background: #e4f6ef;
}

.sf-select-all-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.sf-bulk-staff__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 190px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8faf9;
}

.sf-staff-check { position: relative; }
.sf-staff-check input { position: absolute; opacity: 0; pointer-events: none; }
.sf-staff-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sf-staff-check:hover { border-color: #cbd8d2; transform: translateY(-1px); }
.sf-staff-check:has(input:checked) { border-color: #77cdb8; background: #effaf6; box-shadow: 0 4px 12px rgba(26, 135, 105, .08); }
.sf-staff-check__mark {
  display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px;
  border: 1px solid #cbd5d1; border-radius: 6px; color: transparent; font-size: 9px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.sf-staff-check input:checked + .sf-staff-check__mark { border-color: #20a985; background: #20a985; color: #fff; transform: scale(1.05); }
.sf-staff-check__copy { display: grid; min-width: 0; }
.sf-staff-check__copy strong { overflow: hidden; color: #253047; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sf-staff-check__copy em { color: #7a8781; font-size: 9px; font-style: normal; font-weight: 700; }

.sf-duration-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sf-duration-options.is-leave-only { grid-template-columns: minmax(0, 1fr); }
.sf-duration-choice { position: relative; }
.sf-duration-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sf-duration-choice span {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px;
  border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; color: #596579;
  cursor: pointer; font-size: 11px; font-weight: 700;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sf-duration-choice span:hover { transform: translateY(-1px); }
.sf-duration-choice input:checked + span { border-color: #9acfc1; background: #edf8f4; color: #176f5b; box-shadow: 0 0 0 3px rgba(32, 169, 133, .08); }
.sf-duration-month { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 11px; border-radius: 12px; background: #f1f7f5; color: #48665d; font-size: 11px; animation: sf-soft-reveal .18s ease both; }
.sf-duration-date { animation: sf-soft-reveal .18s ease both; }
.sf-duration-month[hidden],
.sf-duration-date[hidden] { display: none; }

.sf-leave-range {
  display: grid;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  animation: sf-soft-reveal .18s ease both;
}

.sf-leave-range[hidden] { display: none; }

.sf-leave-range .sf-field { gap: 5px; }
.sf-leave-range .sf-field > span { color: #344054; font-size: 12px; font-weight: 600; }
.sf-leave-range__hint { display: flex; align-items: center; gap: 6px; margin: 0; color: #7d8b85; font-size: 10px; font-weight: 650; }
.sf-leave-range__hint i { color: #1b927b; }

.sf-leave-end-menu .sf-date-menu__trigger {
  border-color: #d5ded9;
  background: linear-gradient(135deg, #f8fcfb, #fffdf9);
}

.sf-leave-end-menu[open] .sf-date-menu__trigger {
  border-color: #61bca8;
  background: #f0fbf8;
  box-shadow: 0 0 0 4px rgba(36, 164, 133, .1);
}

.sf-leave-end-menu .sf-date-menu__trigger i:first-child { color: #1b927b; }

.sf-leave-calendar__head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sf-leave-calendar__head strong {
  color: #374151;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.sf-leave-calendar__head button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid #d7e3de;
  border-radius: 9px;
  background: #f8fcfb;
  color: #278d78;
  box-shadow: none;
}

.sf-leave-calendar__head button:hover {
  border-color: #a7d4c8;
  background: #edf8f4;
  transform: translateY(-1px);
}

.sf-leave-end-menu .sf-date-menu__day.is-active {
  border-color: #263746;
  background: linear-gradient(135deg, #344757, #1e2d3a);
  box-shadow: 0 7px 16px rgba(29, 43, 57, .2);
}

/* Treat leave start and end as one date-range pair. */
.sf-duration-picker:has(.sf-leave-range:not([hidden])) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 10px;
}

.sf-duration-picker:has(.sf-leave-range:not([hidden])) > label,
.sf-duration-picker:has(.sf-leave-range:not([hidden])) > .sf-duration-options,
.sf-duration-picker:has(.sf-leave-range:not([hidden])) > .sf-duration-month {
  grid-column: 1 / -1;
}

.sf-duration-picker:has(.sf-leave-range:not([hidden])) > .sf-duration-date,
.sf-duration-picker:has(.sf-leave-range:not([hidden])) > .sf-leave-range {
  grid-column: auto;
  align-content: start;
}

.sf-duration-picker:has(.sf-leave-range:not([hidden])) > .sf-duration-date > label,
.sf-duration-picker:has(.sf-leave-range:not([hidden])) > .sf-leave-range .sf-field > span {
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}

.sf-duration-picker:has(.sf-leave-range:not([hidden])) .sf-leave-range__hint {
  min-height: 15px;
}

.sf-duration-picker:has(.sf-leave-range:not([hidden])) > .sf-duration-date:has(.sf-shift-date-menu[open]),
.sf-duration-picker:has(.sf-leave-range:not([hidden])) > .sf-leave-range:has(.sf-leave-end-menu[open]) {
  grid-column: 1 / -1;
}

.sf-duration-picker:has(.sf-leave-range:not([hidden])) .sf-shift-date-menu .sf-date-menu__panel {
  width: 100%;
}

.sf-duration-picker:has(.sf-leave-range:not([hidden])) .sf-shift-date-menu:not(.sf-leave-end-menu) .sf-date-menu__head {
  justify-content: center;
}

.sf-duration-picker:has(.sf-leave-range:not([hidden])) .sf-shift-date-menu:not(.sf-leave-end-menu) .sf-date-menu__head span {
  display: none;
}

/* Clear blue for Pagi and warm yellow for Cuti, with solid icons. */
.sf-modal.sf-modal--shift .sf-shift-choice__icon i {
  font-weight: 900;
}

.sf-modal.sf-modal--shift .sf-shift-choice--pagi {
  --shift-accent: #2778c7;
  --shift-soft: #eef5ff;
  --shift-icon: #dcecff;
  --shift-ring: rgba(39, 120, 199, .12);
  --shift-text: #1f5f9e;
  --shift-muted: #5d7d9d;
}

.sf-modal.sf-modal--shift .sf-shift-choice--pagi .sf-shift-choice__icon {
  background: #e5f0ff;
  color: #236fb8;
}

.sf-modal.sf-modal--shift .sf-shift-choice--cuti {
  --shift-accent: #be891d;
  --shift-soft: #fff8e8;
  --shift-icon: #fff0c8;
  --shift-ring: rgba(190, 137, 29, .12);
  --shift-text: #966a13;
  --shift-muted: #927a49;
}

.sf-modal.sf-modal--shift .sf-shift-choice--cuti .sf-shift-choice__icon {
  background: #fff2cf;
  color: #ad7916;
}

/* Active Pagi uses the requested blue, not the default green. */
.sf-modal.sf-modal--shift .sf-shift-choice--pagi input:checked + .sf-shift-choice__card {
  border-color: #2778c7;
  background: #eef5ff;
  color: #2778c7;
  box-shadow: none;
}

.sf-modal.sf-modal--shift .sf-shift-choice--pagi input:checked + .sf-shift-choice__card .sf-shift-choice__icon {
  background: #dcecff;
  color: #236fb8;
}

.sf-modal.sf-modal--shift .sf-shift-choice--pagi input:checked + .sf-shift-choice__card .sf-shift-choice__copy strong {
  color: #1f5f9e;
}

.sf-modal.sf-modal--shift .sf-shift-choice--pagi input:checked + .sf-shift-choice__card .sf-shift-choice__copy em {
  color: #5d7d9d;
}

.sf-modal.sf-modal--shift .sf-shift-choice--pagi input:checked + .sf-shift-choice__card .sf-shift-choice__selected {
  border-color: #2778c7;
  background: #2778c7;
}

/* Soft Shift Grid: lower visual fatigue across the full monthly schedule. */
.sf-schedule-table .sf-shift-cell {
  padding: 3px 5px;
  background: #fcfdfd;
}

.sf-schedule-table .sf-shift-card {
  --shift-grid-accent: #64748b;
  min-height: 31px;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 2px 0 var(--shift-grid-accent);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.sf-schedule-table .sf-shift-card:hover,
.sf-schedule-table .sf-shift-card:focus-visible {
  filter: saturate(1.06);
  transform: translateY(-1px);
  outline: none;
}

.sf-schedule-table .sf-shift-card strong {
  gap: 5px;
  font-size: 10px;
  font-weight: 750;
}

.sf-schedule-table .sf-shift-card strong i {
  font-size: 9px;
  font-weight: 900;
}

.sf-schedule-table .sf-shift-card--pagi {
  --shift-grid-accent: #1b62a8;
  border-color: #1f70bd;
  background: #2a8fe3;
  color: #ffffff;
}

.sf-schedule-table .sf-shift-card--malam {
  --shift-grid-accent: #132238;
  border-color: #1b2d45;
  background: #1e3047;
  color: #f8fbff;
}

.sf-schedule-table .sf-shift-card--malam strong i { color: #d9ecff; }

.sf-schedule-table .sf-shift-card--change_malam {
  --shift-grid-accent: #116f58;
  border-color: #16866a;
  background: #22a77f;
  color: #ffffff;
}

.sf-schedule-table .sf-shift-card--off_change_pagi {
  --shift-grid-accent: #5e3e9b;
  border-color: #6948ac;
  background: #875bd2;
  color: #ffffff;
}

.sf-schedule-table .sf-shift-card--cuti {
  --shift-grid-accent: #b67a00;
  border-color: #cf920c;
  background: #e8ad18;
  color: #2b2100;
}

.sf-schedule-table .sf-shift-card--off_day {
  --shift-grid-accent: #9f3642;
  border-color: #b74350;
  background: #de5361;
  color: #ffffff;
}

/* Keep the schedule grid light and precise so the shift colors remain the focus. */
.sf-schedule-table th,
.sf-schedule-table td {
  border-right: 0.5px solid rgba(100, 116, 139, 0.32);
  border-bottom: 0.5px solid rgba(100, 116, 139, 0.32);
}

.sf-schedule-table .sf-shift-cell.is-active-col,
.sf-schedule-table .sf-day-head.is-today {
  background: #f1f6fc;
}

.sf-schedule-table .sf-day-head.is-today .sf-day-tab strong {
  color: #2e6fae;
}

.sf-schedule-table .is-hovered-row {
  background: #f6f9fc;
}

.sf-schedule-table .sf-role-cell.is-hovered-row,
.sf-schedule-table .sf-name-cell.is-hovered-row {
  background: #eef4fa;
}

.sf-schedule-table .sf-shift-cell.is-hovered-col.is-hovered-row {
  background: #e8f1fa;
}

.sf-schedule-table .sf-shift-cell.is-hovered-col.is-hovered-row .sf-shift-card {
  box-shadow: inset 0 2px 0 var(--shift-grid-accent), 0 4px 10px rgba(30, 63, 99, .09);
}

/* Shift Rhythm Grid: continuous Pagi/Malam runs become readable lanes. */
.sf-schedule-table .sf-shift-cell.sf-rhythm-cell {
  padding: 3px 0;
  background: #fcfdfd;
}

.sf-schedule-table .sf-rhythm-card {
  position: relative;
  min-height: 31px;
  border-width: 1px 0;
  border-radius: 0;
  box-shadow: none;
}

.sf-schedule-table .sf-rhythm-cell--pagi .sf-rhythm-card {
  border-color: #bfdafa;
  background: #eaf4ff;
  color: #1f5f9e;
}

.sf-schedule-table .sf-rhythm-cell--malam .sf-rhythm-card {
  border-color: #334862;
  background: #25364b;
  color: #f8fbff;
}

.sf-schedule-table .sf-rhythm-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: .3;
}

.sf-schedule-table .sf-rhythm-cell.is-run-start .sf-rhythm-card {
  margin-left: 5px;
  border-left-width: 1px;
  border-radius: 8px 0 0 8px;
}

.sf-schedule-table .sf-rhythm-cell.is-run-end .sf-rhythm-card {
  margin-right: 5px;
  border-right-width: 1px;
  border-radius: 0 8px 8px 0;
}

.sf-schedule-table .sf-rhythm-cell.is-run-start.is-run-end .sf-rhythm-card {
  border-radius: 8px;
}

.sf-schedule-table .sf-rhythm-card strong {
  justify-content: flex-start;
  padding-left: 9px;
}

.sf-schedule-table .sf-rhythm-cell:not(.is-run-start) .sf-rhythm-card strong {
  justify-content: center;
  padding-left: 0;
}

.sf-schedule-table .sf-rhythm-cell:not(.is-run-start) .sf-rhythm-label {
  display: none;
}

.sf-schedule-table .sf-rhythm-cell--pagi .sf-rhythm-card strong i { color: #2778c7; }
.sf-schedule-table .sf-rhythm-cell--malam .sf-rhythm-card strong i { color: #c8e1f7; }

.sf-schedule-table .sf-rhythm-card:hover,
.sf-schedule-table .sf-rhythm-card:focus-visible {
  filter: none;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15);
}

.sf-schedule-table .sf-shift-cell.sf-rhythm-cell.is-active-col {
  background: #eef5fc;
}

.sf-schedule-table .sf-shift-cell.sf-rhythm-cell.is-hovered-col.is-hovered-row .sf-rhythm-card {
  box-shadow: inset 0 0 0 1px rgba(31, 91, 147, .22);
}

/* Quiet Matrix: regular shifts are calm symbols, not visual blocks. */
.sf-schedule-table .sf-shift-cell {
  padding: 4px 6px;
  background: #fcfdfd;
}

.sf-schedule-table .sf-shift-card {
  min-height: 26px;
  border-radius: 7px;
  box-shadow: none;
}

.sf-schedule-table .sf-shift-card--pagi {
  border-color: #d4e4f5;
  background: #f4f8fd;
  color: #3976b0;
}

.sf-schedule-table .sf-shift-card--malam {
  border-color: #dde3e8;
  background: #f5f7f9;
  color: #667789;
}

.sf-schedule-table .sf-shift-card--quiet {
  width: 28px;
  min-width: 28px;
  min-height: 26px;
  margin: 0 auto;
  padding: 0;
}

.sf-schedule-table .sf-shift-card--quiet strong {
  padding: 0;
}

.sf-schedule-table .sf-shift-card--quiet .sf-shift-label {
  display: none;
}

.sf-schedule-table .sf-shift-card--quiet strong i {
  font-size: 10px;
  font-weight: 900;
}

.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--quiet strong i { color: #3e7fbd; }
.sf-schedule-table .sf-shift-card--malam.sf-shift-card--quiet strong i { color: #6d7c8b; }

.sf-schedule-table .sf-shift-card--change_malam,
.sf-schedule-table .sf-shift-card--off_change_pagi,
.sf-schedule-table .sf-shift-card--cuti,
.sf-schedule-table .sf-shift-card--off_day {
  min-height: 26px;
  box-shadow: none;
}

.sf-schedule-table .sf-shift-card--change_malam { background: #eef8f4; }
.sf-schedule-table .sf-shift-card--off_change_pagi { background: #f5f2fb; }
.sf-schedule-table .sf-shift-card--cuti { background: #fff9eb; }
.sf-schedule-table .sf-shift-card--off_day { background: #fff4f5; }

.sf-schedule-table .sf-shift-cell.is-active-col { background: #f3f7fc; }
.sf-schedule-table .sf-shift-cell.is-hovered-col.is-hovered-row { background: #f0f5fa; }
.sf-schedule-table .sf-shift-cell.is-hovered-col.is-hovered-row .sf-shift-card { box-shadow: 0 2px 6px rgba(45, 76, 108, .08); }

/* Strong icon-only tokens for instant shift recognition. */
.sf-schedule-table .sf-shift-card--quiet {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  min-height: 28px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  box-shadow: 0 2px 5px rgba(30, 41, 59, .08);
}

.sf-schedule-table .sf-shift-card--quiet strong { display: grid; place-items: center; padding: 0; }
.sf-schedule-table .sf-shift-card--quiet .sf-shift-label { display: none; }
.sf-schedule-table .sf-shift-card--quiet strong i { color: #fff !important; font-size: 12px; font-weight: 900; }

.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--quiet { border-color: #2e7fce; background: #3c8cda; color: #fff; }
.sf-schedule-table .sf-shift-card--malam.sf-shift-card--quiet { border-color: #3d5068; background: #50657d; color: #fff; }
.sf-schedule-table .sf-shift-card--change_malam.sf-shift-card--quiet { border-color: #208467; background: #2b9a78; color: #fff; }
.sf-schedule-table .sf-shift-card--off_change_pagi.sf-shift-card--quiet { border-color: #7057a8; background: #896bc7; color: #fff; }
.sf-schedule-table .sf-shift-card--cuti.sf-shift-card--quiet { border-color: #c48716; background: #daa22b; color: #fff; }
.sf-schedule-table .sf-shift-card--off_day.sf-shift-card--quiet { border-color: #b9555e; background: #d36a73; color: #fff; }

.sf-schedule-table .sf-shift-card--quiet:hover,
.sf-schedule-table .sf-shift-card--quiet:focus-visible {
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 5px 10px rgba(30, 41, 59, .15);
}

/* Day / Night Pill: strong at a glance without filling each cell. */
.sf-schedule-table .sf-shift-card--quiet .sf-shift-code {
  display: none;
}

.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--quiet,
.sf-schedule-table .sf-shift-card--malam.sf-shift-card--quiet {
  width: 58px;
  min-width: 58px;
  min-height: 27px;
  border-radius: 999px;
}

.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--quiet {
  border-color: #2778c7;
  background: linear-gradient(135deg, #4199ea, #2f7fd0);
}

.sf-schedule-table .sf-shift-card--malam.sf-shift-card--quiet {
  border-color: #263a52;
  background: linear-gradient(135deg, #526b86, #344b66);
}

.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--quiet strong,
.sf-schedule-table .sf-shift-card--malam.sf-shift-card--quiet strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--quiet .sf-shift-code,
.sf-schedule-table .sf-shift-card--malam.sf-shift-card--quiet .sf-shift-code {
  display: inline;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--quiet strong i,
.sf-schedule-table .sf-shift-card--malam.sf-shift-card--quiet strong i {
  color: #fff !important;
  font-size: 10px;
}

/* Clean Lane: connected Pagi/Malam bands with no repeated dots or pills. */
.sf-schedule-table .sf-shift-cell.sf-lane-cell {
  padding: 5px 0;
  background: #fff;
}

.sf-schedule-table .sf-shift-card--lane {
  --lane-bg: #3c86d1;
  display: flex;
  justify-content: center;
  min-height: 23px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--lane-bg);
  color: #fff;
  box-shadow: none;
}

.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--lane {
  --lane-bg: #3b86d1;
}

.sf-schedule-table .sf-shift-card--malam.sf-shift-card--lane {
  --lane-bg: #26394f;
}

.sf-schedule-table .sf-shift-card--lane strong {
  display: none;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card--lane {
  justify-content: flex-start;
  margin-left: 5px;
  border-radius: 7px 0 0 7px;
}

.sf-schedule-table .sf-lane-cell.is-run-end .sf-shift-card--lane {
  margin-right: 5px;
  border-radius: 0 7px 7px 0;
}

.sf-schedule-table .sf-lane-cell.is-run-start.is-run-end .sf-shift-card--lane {
  border-radius: 7px;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card--lane strong {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  padding: 0 9px;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card--lane .sf-shift-code {
  display: none;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card--lane .sf-shift-label {
  display: inline;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card--lane strong i {
  color: #fff !important;
  font-size: 9px;
}

.sf-schedule-table .sf-shift-card--lane:hover,
.sf-schedule-table .sf-shift-card--lane:focus-visible {
  filter: brightness(1.06);
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

.sf-schedule-table .sf-shift-cell.sf-lane-cell.is-active-col,
.sf-schedule-table .sf-shift-cell.sf-lane-cell.is-hovered-col.is-hovered-row {
  background: #f4f8fc;
}

/* Rail + Token: a quiet timeline, not a full-width block of color. */
.sf-schedule-table .sf-shift-cell.sf-rhythm-cell {
  background: #fff;
}

.sf-schedule-table .sf-rhythm-card {
  --rail-color: #5f8fcb;
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--rail-color);
}

.sf-schedule-table .sf-rhythm-cell--pagi .sf-rhythm-card {
  --rail-color: #4b83c4;
  color: #276aa9;
}

.sf-schedule-table .sf-rhythm-cell--malam .sf-rhythm-card {
  --rail-color: #718096;
  color: #4b5d72;
}

.sf-schedule-table .sf-rhythm-card::before {
  top: 50%;
  height: 3px;
  background: var(--rail-color);
  opacity: .68;
  transform: translateY(-50%);
}

.sf-schedule-table .sf-rhythm-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--rail-color);
  box-shadow: 0 0 0 1px rgba(71, 85, 105, .12);
  transform: translate(-50%, -50%);
}

.sf-schedule-table .sf-rhythm-card strong {
  position: relative;
  z-index: 2;
  justify-content: center;
  padding: 0;
}

.sf-schedule-table .sf-rhythm-cell.is-run-start .sf-rhythm-card {
  margin-left: 0;
  border-radius: 0;
  justify-content: flex-start;
}

.sf-schedule-table .sf-rhythm-cell.is-run-end .sf-rhythm-card {
  margin-right: 0;
  border-radius: 0;
}

.sf-schedule-table .sf-rhythm-cell.is-run-start .sf-rhythm-card strong {
  display: inline-flex;
  min-height: 24px;
  margin-left: 7px;
  padding: 0 9px;
  border: 1px solid #c7dbf1;
  border-radius: 999px;
  background: #eff6ff;
  box-shadow: 0 2px 5px rgba(45, 97, 150, .07);
}

.sf-schedule-table .sf-rhythm-cell--malam.is-run-start .sf-rhythm-card strong {
  border-color: #d5dde5;
  background: #f2f5f8;
  color: #46586d;
}

.sf-schedule-table .sf-rhythm-cell.is-run-start .sf-rhythm-card::after {
  display: none;
}

.sf-schedule-table .sf-rhythm-cell:not(.is-run-start) .sf-rhythm-card strong,
.sf-schedule-table .sf-rhythm-cell:not(.is-run-start) .sf-rhythm-card strong i {
  display: none;
}

.sf-schedule-table .sf-rhythm-cell--pagi .sf-rhythm-card strong i { color: #2778c7; }
.sf-schedule-table .sf-rhythm-cell--malam .sf-rhythm-card strong i { color: #61738a; }

.sf-schedule-table .sf-rhythm-card:hover,
.sf-schedule-table .sf-rhythm-card:focus-visible {
  background: transparent;
  box-shadow: none;
}

.sf-schedule-table .sf-rhythm-card:hover::before,
.sf-schedule-table .sf-rhythm-card:focus-visible::before {
  height: 5px;
  opacity: .9;
}

.sf-schedule-table .sf-shift-cell.sf-rhythm-cell.is-active-col,
.sf-schedule-table .sf-shift-cell.sf-rhythm-cell.is-hovered-col.is-hovered-row {
  background: #f6f9fd;
}

@media (max-width: 560px) {
  .sf-duration-picker:has(.sf-leave-range:not([hidden])) {
    grid-template-columns: 1fr;
  }
}
@keyframes sf-soft-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 560px) {
  .sf-bulk-staff__list { grid-template-columns: 1fr; }
}

/* Add Shift refinements: category filters, custom calendar, and richer shift cards. */
.sf-staff-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 0 2px;
  scrollbar-width: none;
}

.sf-staff-filters::-webkit-scrollbar { display: none; }

.sf-staff-filters button {
  flex: 0 0 auto;
  min-height: 29px;
  padding: 0 11px;
  border: 1px solid #dce3df;
  border-radius: 999px;
  background: #fff;
  color: #68756f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sf-staff-filters button:hover { border-color: #afc9c0; color: #237561; transform: translateY(-1px); }
.sf-staff-filters button.is-active { border-color: #48b89b; background: #e9f8f3; color: #14735c; box-shadow: 0 3px 10px rgba(31, 151, 119, .1); }
.sf-staff-check[hidden] { display: none; }

.sf-modal--shift .sf-shift-picker { gap: 10px; }
.sf-modal--shift .sf-shift-options { gap: 10px; }
.sf-modal--shift .sf-shift-choice__card {
  justify-content: flex-start;
  min-height: 58px;
  padding: 8px 10px;
  border-width: 1px;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff 0%, #f7faf9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 14px rgba(15, 23, 42, .04);
}

.sf-modal--shift .sf-shift-choice__icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #edf3f1;
  font-size: 14px;
  transition: transform .18s ease, background .18s ease;
}

.sf-modal--shift .sf-shift-choice__copy { display: grid; gap: 2px; min-width: 0; }
.sf-modal--shift .sf-shift-choice__copy strong { font-size: 11px; font-weight: 850; }
.sf-modal--shift .sf-shift-choice__copy em { color: #87928d; font-size: 9px; font-style: normal; font-weight: 650; }
.sf-modal--shift .sf-shift-choice__selected {
  display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; margin-left: auto;
  border-radius: 999px; background: #dbe5e1; color: transparent; font-size: 8px;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card { border-width: 1px; transform: translateY(-1px); }
.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__selected { background: currentColor; color: #fff; transform: scale(1.08); }
.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__selected i { color: #fff; }
.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__icon { transform: rotate(-4deg) scale(1.04); }
.sf-modal--shift .sf-shift-choice--pagi input:checked + .sf-shift-choice__card { background: linear-gradient(135deg, #e9fffb, #f5fffd); }
.sf-modal--shift .sf-shift-choice--pagi .sf-shift-choice__icon { background: #d9f8f3; }
.sf-modal--shift .sf-shift-choice--malam input:checked + .sf-shift-choice__card { background: linear-gradient(135deg, #1c2430, #111820); }
.sf-modal--shift .sf-shift-choice--malam .sf-shift-choice__icon { background: rgba(255,255,255,.1); }
.sf-modal--shift .sf-shift-choice--malam .sf-shift-choice__copy em { color: #aeb8c7; }

.sf-modal--shift .sf-modal__body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 91, 103, .3) transparent;
}

.sf-modal--shift .sf-modal__body::-webkit-scrollbar { width: 4px; }
.sf-modal--shift .sf-modal__body::-webkit-scrollbar-track { background: transparent; }
.sf-modal--shift .sf-modal__body::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(74, 91, 103, .26); }
.sf-modal--shift .sf-bulk-staff__list { transition: max-height .22s cubic-bezier(.2,.8,.2,1); }
.sf-modal--shift:has(.sf-shift-date-menu[open]) .sf-bulk-staff__list { max-height: 92px; }
.sf-duration-date:has(.sf-shift-date-menu[open]) { padding-bottom: 0; }
.sf-shift-date-menu { position: relative; width: 100%; }
.sf-shift-date-menu > summary { list-style: none; }
.sf-shift-date-menu > summary::-webkit-details-marker { display: none; }
.sf-shift-date-menu .sf-date-menu__trigger {
  display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 14px;
  border: 1px solid #d5ded9; border-radius: 13px; background: linear-gradient(135deg, #f8fcfb, #fffdf9);
  color: #243044; font-size: 12px; font-weight: 750; cursor: pointer;
  transition: border-color .17s ease, box-shadow .17s ease, background .17s ease, transform .17s ease;
}
.sf-shift-date-menu .sf-date-menu__trigger i:first-child { color: #1b927b; }
.sf-shift-date-menu .sf-date-menu__trigger i:last-child { margin-left: auto; color: #647286; transition: transform .17s ease; }
.sf-shift-date-menu[open] .sf-date-menu__trigger { border-color: #61bca8; background: #f0fbf8; box-shadow: 0 0 0 4px rgba(36, 164, 133, .1); }
.sf-shift-date-menu[open] .sf-date-menu__trigger i:last-child { transform: rotate(180deg); }
.sf-shift-date-menu .sf-date-menu__panel {
  position: relative; top: auto; left: auto; z-index: 1; display: none;
  width: 100%; margin-top: 9px; padding: 14px; border: 1px solid #d7e1dc; border-radius: 18px;
  background: rgba(255,255,255,.99); box-shadow: 0 24px 55px rgba(22,34,46,.17);
  transform: none;
}
.sf-shift-date-menu[open] .sf-date-menu__panel { display: block; animation: sf-shift-calendar-in .2s cubic-bezier(.2,.85,.2,1) both; }
.sf-shift-date-menu .sf-date-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.sf-shift-date-menu .sf-date-menu__head span { color: #758194; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sf-shift-date-menu .sf-date-menu__head strong { color: #1c293a; font-size: 13px; }
.sf-shift-date-menu .sf-date-menu__weekdays,
.sf-shift-date-menu .sf-date-menu__grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.sf-shift-date-menu .sf-date-menu__weekdays { margin-bottom: 7px; }
.sf-shift-date-menu .sf-date-menu__weekdays span { color: #8995a4; font-size: 9px; font-weight: 850; text-align: center; }
.sf-shift-date-menu .sf-date-menu__blank,
.sf-shift-date-menu .sf-date-menu__day { min-height: 32px; }
.sf-shift-date-menu .sf-date-menu__day {
  display: grid; place-items: center; border: 1px solid transparent; border-radius: 11px; background: #f4f7f6;
  color: #293646; font-size: 11px; font-weight: 850; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sf-shift-date-menu .sf-date-menu__day:hover { border-color: #b9dcd3; background: #eaf7f3; transform: translateY(-1px); }
.sf-shift-date-menu .sf-date-menu__day.is-today:not(.is-active) { border-color: #efc87c; background: #fff8e9; }
.sf-shift-date-menu .sf-date-menu__day.is-active { border-color: #263746; background: linear-gradient(135deg,#344757,#1e2d3a); color: #fff; box-shadow: 0 7px 16px rgba(29,43,57,.2); }
.sf-shift-date-menu .sf-date-menu__day.is-picking { animation: sf-change-date-pick-final .26s cubic-bezier(.2,.85,.2,1); }

@keyframes sf-shift-calendar-in {
  from { opacity: 0; transform: translate3d(0,-6px,0) scale(.99); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

.sf-modal--change-shift {
  width: min(680px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 44px));
  overflow: visible;
  border-radius: 16px;
}

.sf-modal--share {
  width: min(560px, calc(100vw - 32px));
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.sf-modal--month-preview {
  width: min(1880px, calc(100vw - 18px));
  height: calc(100vh - 16px);
  max-height: calc(100vh - 16px);
  border-radius: 16px;
}

.sf-month-preview__head {
  padding: 9px 16px;
}

.sf-month-preview__head h3 {
  font-size: 16px;
}

.sf-month-preview__head p {
  font-size: 11px;
}

.sf-month-preview__body {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  padding: 7px 10px 10px;
  overflow: hidden;
}

.sf-month-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 18px;
  color: #526071;
  font-size: 10px;
  font-weight: 650;
}

.sf-month-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sf-month-preview__table-wrap {
  display: flex;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fafbf9;
}

.sf-month-preview-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fafbf9;
}

.sf-month-role-col {
  width: 56px;
}

.sf-month-name-col {
  width: 220px;
}

.sf-month-preview-table th,
.sf-month-preview-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1px 3px;
  vertical-align: middle;
}

.sf-month-preview-table th:last-child,
.sf-month-preview-table td:last-child {
  border-right: 0;
}

.sf-month-preview-table thead th {
  height: 26px;
  background: #f3f6f3;
  color: #778295;
  text-align: center;
  line-height: 1.1;
}

.sf-month-preview-table thead th.is-today {
  background: #e5ebe7;
  color: #202a34;
}

.sf-month-preview-table thead span {
  display: block;
  margin-bottom: 1px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}

.sf-month-preview-table thead strong {
  display: block;
  color: #111827;
  font-size: 10px;
  font-weight: 800;
}

.sf-month-preview-table tbody td {
  height: 15px;
}

.sf-month-group-row td {
  height: 4px;
  padding: 0;
  border-bottom-color: rgba(208, 216, 224, .75);
  font-size: 0;
  line-height: 0;
}

.sf-month-group-row--cs-line td {
  background: #eef7f5;
}

.sf-month-group-row--cs-chat td {
  background: #eef4fb;
}

.sf-month-group-row--kapten td {
  background: #f3f1fb;
}

.sf-month-group-row--kasir td {
  background: #fff7e8;
}

.sf-month-group-row--lainnya td {
  background: #f3f6f3;
}

.sf-month-role {
  color: #4e6179;
  font-size: 7px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.sf-month-name {
  overflow: hidden;
  color: #111827;
  font-size: 8.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sf-month-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 12px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 7.5px;
  font-weight: 850;
  line-height: 1;
  text-align: center;
}

button.sf-month-badge {
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

button.sf-month-badge:hover {
  filter: saturate(1.04);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, .08);
}

.sf-month-legend .sf-month-badge {
  width: 32px;
  min-width: 32px;
}

.sf-month-badge--pagi {
  border-color: var(--pagi-line);
  background: var(--pagi-bg);
  color: var(--pagi-text);
}

.sf-month-badge--malam {
  border-color: var(--malam-line);
  background: var(--malam-bg);
  color: var(--malam-text);
}

.sf-month-badge--change_malam {
  border-color: var(--change-line);
  background: var(--change-bg);
  color: var(--change-text);
}

.sf-month-badge--off_change_pagi {
  border-color: var(--off-change-line);
  background: var(--off-change-bg);
  color: var(--off-change-text);
}

.sf-month-badge--cuti {
  border-color: var(--cuti-line);
  background: var(--cuti-bg);
  color: var(--cuti-text);
}

.sf-month-badge--off_day {
  border-color: var(--off-line);
  background: var(--off-bg);
  color: var(--off-text);
}

.sf-month-badge--empty {
  border-color: transparent;
  background: transparent;
  color: #bcc5d0;
}

.sf-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.sf-modal--shift .sf-modal__head {
  padding: 20px 22px 12px;
  border-bottom: 0;
}

.sf-modal__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.sf-modal--shift .sf-modal__head h3 {
  font-size: 15px;
}

.sf-modal__head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.sf-modal--shift .sf-modal__head p {
  margin-top: 6px;
  font-size: 12px;
}

.sf-modal__close {
  margin-left: auto;
}

.sf-modal__body {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  overflow: auto;
}

.sf-modal--shift .sf-modal__body {
  gap: 16px;
  padding: 10px 22px 18px;
  overflow: visible;
}

.sf-modal--change-shift .sf-modal__body {
  padding: 18px 20px 22px;
  overflow: visible;
}

.sf-share-modal__body {
  gap: 14px;
  padding: 18px 20px 18px;
  background: linear-gradient(180deg, #fbfcfc 0%, #f7f9fa 100%);
}

.sf-share-date-card {
  position: relative;
  display: grid;
  gap: 6px;
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid #dbe4e2;
  border-radius: 15px;
  background: linear-gradient(135deg, #fbfdfc 0%, #f3f7f6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 1px 2px rgba(15, 23, 42, .035);
}

.sf-share-date-card span {
  color: #5c7180;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-share-date-card strong {
  color: #172033;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.sf-share-card {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 19px 18px 18px;
  border: 1px solid rgba(48, 134, 92, .34);
  border-radius: 15px;
  background:
    radial-gradient(circle at 16% 0%, rgba(204, 242, 216, .18), rgba(204, 242, 216, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, 0) 40%),
    linear-gradient(145deg, #2f7b55 0%, #246546 50%, #1b4f38 100%);
  color: #f7fff9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.sf-share-card h4 {
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(221, 239, 229, .15);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .025em;
  text-align: center;
  text-transform: uppercase;
}

.sf-share-section {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(221, 239, 229, .13);
}

.sf-share-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sf-share-section strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dff4e8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.sf-share-section strong::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #b5edc8;
  box-shadow: 0 0 0 3px rgba(181, 237, 200, .13);
}

.sf-share-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.sf-share-section li {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.sf-modal__foot--share {
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #dde4e2;
  background: linear-gradient(180deg, #fbfcfc 0%, #f6f8f8 100%);
}

.sf-modal__foot--share .sf-btn {
  min-height: 40px;
}

.sf-modal__foot--share .sf-btn--primary {
  min-width: 210px;
  border-color: #35634b;
  background: #35634b;
  box-shadow: 0 8px 18px rgba(53, 99, 75, .13);
}

.sf-modal__foot--share .sf-btn--primary:hover:not(:disabled),
.sf-modal__foot--share .sf-btn--primary:focus-visible:not(:disabled) {
  border-color: #2b523e;
  background: #2b523e;
}

.sf-modal__foot--share .sf-btn.sf-btn--primary.is-copying,
.sf-modal__foot--share .sf-btn.sf-btn--primary.is-copying:hover,
.sf-modal__foot--share .sf-btn.sf-btn--primary.is-copying:focus-visible {
  border-color: #35634b;
  background: #35634b;
  color: #fff;
}

.sf-modal__foot--share .sf-btn--primary.is-copying i {
  animation: sf-copy-spin .72s linear infinite;
}

.sf-modal__foot--share .sf-btn.sf-btn--primary.is-copied,
.sf-modal__foot--share .sf-btn.sf-btn--primary.is-copied:hover,
.sf-modal__foot--share .sf-btn.sf-btn--primary.is-copied:focus-visible {
  border-color: #2f9a63;
  background: #2f9a63;
  color: #fff;
  box-shadow: 0 10px 22px rgba(47, 154, 99, .18);
}

.sf-modal__foot--share .sf-btn--primary.is-copied i {
  animation: sf-copy-pop .28s ease;
}

.sf-modal--share.is-copied .sf-share-date-card {
  border-color: #c0e6ce;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 0 0 4px rgba(47, 154, 99, .08);
}

.sf-modal--share.is-copied .sf-share-card {
  animation: sf-share-pulse .72s ease;
}

@media (max-width: 560px) {
  .sf-modal__foot--share {
    flex-direction: column-reverse;
  }

  .sf-modal__foot--share .sf-btn {
    width: 100%;
  }
}

.sf-modal--change-shift:has(.sf-custom-select.is-open) .sf-modal__body {
  min-height: 306px;
}

.sf-field {
  display: grid;
  gap: 7px;
}

.sf-modal--change-shift .sf-field {
  align-self: start;
  align-content: start;
  grid-template-rows: auto auto;
}

.sf-fixed-field {
  display: grid;
  gap: 7px;
}

.sf-field label,
.sf-fixed-field label,
.sf-shift-picker > label {
  font-size: 12px;
  font-weight: 600;
}

.sf-fixed-value {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f8faf8;
  transition: border-color .14s ease, background .14s ease;
}

.sf-fixed-value:hover {
  border-color: #c9d0cc;
  background: #fbfcfb;
}

.sf-fixed-value strong {
  overflow: hidden;
  color: #172033;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-fixed-value span {
  color: #7a847f;
  font-size: 11px;
  font-weight: 600;
}

.sf-field input,
.sf-field select,
.sf-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: #f8fafc;
  font-weight: 500;
}

.sf-custom-select {
  position: relative;
  z-index: 3;
}

.sf-custom-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 13px 0 14px;
  border: 1px solid #d7ded8;
  border-radius: 14px;
  outline: none;
  background: #f7f9f7;
  color: #172033;
  font-weight: 650;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.sf-custom-select__button:hover,
.sf-custom-select__button:focus-visible,
.sf-custom-select.is-open .sf-custom-select__button {
  border-color: #bfc8c1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(63, 72, 84, .10);
}

.sf-custom-select__button i {
  color: #536079;
  font-size: 12px;
  transition: transform .16s ease;
}

.sf-custom-select.is-open .sf-custom-select__button i {
  transform: rotate(180deg);
}

.sf-custom-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 12;
  display: grid;
  max-height: 248px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #d8dfda;
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.985);
  transform-origin: top;
  transition: opacity .16s ease, transform .16s ease;
  scrollbar-color: #c5ccc8 #f1f4f1;
  scrollbar-width: thin;
}

.sf-custom-select.is-open .sf-custom-select__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sf-custom-select__option {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  border-radius: 10px;
  background: transparent;
  color: #344054;
  font-weight: 600;
  text-align: left;
  transition: background .14s ease, color .14s ease;
}

.sf-custom-select__option:hover,
.sf-custom-select__option:focus-visible {
  background: #eef2ee;
  color: #172033;
  outline: none;
}

.sf-custom-select__option.is-selected {
  background: #3f4854;
  color: #fff;
}

.sf-modal--change-shift .sf-custom-select {
  z-index: 24;
}

.sf-modal--change-shift .sf-custom-select__button {
  min-height: 46px;
  border-color: #d4dcd6;
  background: #fbfcfb;
}

.sf-modal--change-shift .sf-custom-select__button:hover,
.sf-modal--change-shift .sf-custom-select__button:focus-visible,
.sf-modal--change-shift .sf-custom-select.is-open .sf-custom-select__button {
  border-color: #b8c4bc;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 54, 64, .10);
}

.sf-modal--change-shift .sf-custom-select__menu {
  z-index: 30;
  max-height: 184px;
  border-color: #d6ddd8;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
  scrollbar-color: rgba(93, 105, 116, .48) transparent;
  scrollbar-width: thin;
}

.sf-modal--change-shift .sf-custom-select__menu::-webkit-scrollbar {
  width: 4px;
}

.sf-modal--change-shift .sf-custom-select__menu::-webkit-scrollbar-track {
  background: transparent;
}

.sf-modal--change-shift .sf-custom-select__menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(93, 105, 116, .42);
}

.sf-modal--change-shift .sf-custom-select__option {
  min-height: 38px;
  color: #334155;
}

.sf-modal--change-shift .sf-custom-select__option:hover,
.sf-modal--change-shift .sf-custom-select__option:focus-visible {
  background: #f0f4f1;
  color: #111827;
}

.sf-modal--change-shift .sf-custom-select__option.is-selected {
  background: #e9efeb;
  color: #1f2937;
}

.sf-field textarea {
  min-height: 88px;
  padding: 12px 13px;
  resize: vertical;
}

.sf-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sf-field.is-hidden {
  display: none;
}

.sf-shift-picker {
  display: grid;
  gap: 8px;
}

.sf-shift-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sf-shift-choice {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.sf-shift-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.sf-shift-choice__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px 0 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f2f4f3;
  color: #67736d;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease, filter .16s ease;
}

.sf-shift-choice__card strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-shift-choice__card i {
  flex: 0 0 auto;
}

.sf-shift-choice:hover .sf-shift-choice__card {
  border-color: #bfc8c1;
  background: #f7f9f7;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
  filter: saturate(1.04);
  transform: translateY(-1px);
}

.sf-shift-choice input:checked + .sf-shift-choice__card {
  border-width: 2px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 0 0 3px rgba(63, 72, 84, .12), 0 10px 24px rgba(15, 23, 42, .12);
  transform: translateY(-2px);
}

.sf-shift-choice input:focus-visible + .sf-shift-choice__card {
  outline: 3px solid rgba(63, 72, 84, .18);
  outline-offset: 2px;
}

.sf-shift-choice--pagi .sf-shift-choice__card {
  border-color: var(--pagi-line);
  background: var(--pagi-bg);
  color: var(--pagi-text);
}

.sf-shift-choice--malam .sf-shift-choice__card {
  border-color: var(--malam-line);
  background: var(--malam-bg);
  color: var(--malam-text);
}

.sf-shift-choice--malam:hover .sf-shift-choice__card,
.sf-shift-choice--malam input:checked + .sf-shift-choice__card {
  border-color: #515762;
  background: #2a2d34;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 7px 16px rgba(15, 23, 42, .14);
}

.sf-shift-choice--change_malam .sf-shift-choice__card {
  border-color: var(--change-line);
  background: var(--change-bg);
  color: var(--change-text);
}

.sf-shift-choice--off_change_pagi .sf-shift-choice__card {
  border-color: var(--off-change-line);
  background: var(--off-change-bg);
  color: var(--off-change-text);
}

.sf-shift-choice--off_day .sf-shift-choice__card {
  border-color: var(--off-line);
  background: var(--off-bg);
  color: var(--off-text);
}

.sf-shift-choice--pagi input:checked + .sf-shift-choice__card {
  border-color: var(--pagi-line);
  background: var(--pagi-bg);
  color: var(--pagi-text);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42), 0 0 0 3px rgba(15, 185, 197, .16), 0 10px 24px rgba(15, 185, 197, .14);
}

.sf-shift-choice--malam input:checked + .sf-shift-choice__card {
  border-color: #515762;
  background: var(--malam-bg);
  color: var(--malam-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 3px rgba(47, 54, 64, .22), 0 10px 24px rgba(15, 23, 42, .18);
}

.sf-shift-choice--change_malam input:checked + .sf-shift-choice__card {
  border-color: var(--change-line);
  background: var(--change-bg);
  color: var(--change-text);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .32), 0 0 0 3px rgba(13, 145, 63, .16), 0 10px 24px rgba(13, 145, 63, .12);
}

.sf-shift-choice--off_change_pagi input:checked + .sf-shift-choice__card {
  border-color: var(--off-change-line);
  background: var(--off-change-bg);
  color: var(--off-change-text);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 0 0 3px rgba(125, 36, 195, .16), 0 10px 24px rgba(125, 36, 195, .12);
}

.sf-shift-choice--off_day input:checked + .sf-shift-choice__card {
  border-color: var(--off-line);
  background: var(--off-bg);
  color: var(--off-text);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 0 0 3px rgba(220, 30, 20, .16), 0 10px 24px rgba(220, 30, 20, .12);
}

.sf-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

.sf-modal__foot--shift {
  gap: 8px;
  padding: 14px 22px 20px;
  border-top: 0;
  background: #fff;
}

.sf-modal--change-shift .sf-modal__foot {
  position: relative;
  z-index: 2;
  border-top-color: #dfe5e1;
  background: #f8faf8;
}

.sf-modal--shift .sf-modal__foot .sf-btn {
  flex: 1 1 0;
  min-height: 38px;
  border-radius: 14px;
}

.sf-modal--shift .sf-modal__foot .sf-btn--danger {
  flex: 0 0 auto;
  min-width: 88px;
}

.sf-confirm-layer {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: sf-backdrop-in .16s ease-out both;
}

.sf-confirm-layer.is-leaving {
  pointer-events: none;
  animation: sf-backdrop-out .17s ease-in both;
}

.sf-confirm-layer.is-leaving .sf-confirm {
  animation: sf-confirm-out .17s cubic-bezier(.4, 0, 1, 1) both;
}

.sf-confirm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  width: min(380px, 100%);
  padding: 18px;
  border: 1px solid #f3c8cf;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .20);
  animation: sf-modal-in .18s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-confirm__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #fecdd3;
  border-radius: 14px;
  background: #fff1f2;
  color: #e34455;
}

.sf-confirm--success {
  border-color: #b9dfcf;
}

.sf-confirm--success .sf-confirm__icon {
  border-color: #b9dfcf;
  background: #edf8f3;
  color: #16845b;
}

.sf-confirm--verify {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #d7e2ee;
  background: linear-gradient(135deg, #ffffff 0%, #f5faff 100%);
  box-shadow: 0 24px 60px rgba(24, 48, 76, .18);
}

.sf-confirm--verify::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -74px;
  right: -54px;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 164, 236, .23) 0%, rgba(94, 164, 236, 0) 70%);
}

.sf-confirm--verify > * { position: relative; z-index: 1; }

.sf-confirm--verify .sf-confirm__icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-color: #c9dced;
  background: linear-gradient(145deg, #edf7ff 0%, #e4effc 100%);
  color: #2f6fb2;
  box-shadow: 0 8px 18px rgba(47, 111, 178, .12);
}

.sf-confirm--verify .sf-confirm__icon::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(47, 111, 178, .16);
  border-radius: 10px;
  pointer-events: none;
}

.sf-confirm--verify .sf-confirm__copy {
  padding-top: 2px;
}

.sf-confirm--verify .sf-confirm__actions {
  position: relative;
  margin-top: 7px;
  padding-top: 12px;
}

.sf-confirm--verify .sf-confirm__actions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px dashed #d7e3f0;
}

.sf-confirm--verify .sf-btn--primary {
  border-color: #245fa7;
  background: linear-gradient(135deg, #2e72c2 0%, #24528d 100%);
  box-shadow: 0 8px 16px rgba(36, 82, 141, .18);
}

.sf-confirm--verify .sf-btn--primary:hover,
.sf-confirm--verify .sf-btn--primary:focus-visible {
  border-color: #1d4b82;
  background: linear-gradient(135deg, #347dce 0%, #1d4b82 100%);
  box-shadow: 0 10px 19px rgba(36, 82, 141, .24);
}


.sf-confirm__copy {
  min-width: 0;
}

.sf-confirm__copy h3 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  font-weight: 700;
}

.sf-confirm__copy p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.sf-confirm__actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.sf-confirm__actions .sf-btn {
  min-width: 104px;
  border-radius: 14px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sf-confirm__actions .sf-btn:active {
  transform: translateY(1px) scale(.985);
}

.sf-confirm__actions .sf-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(45, 62, 80, .14);
}

@keyframes sf-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sf-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sf-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sf-confirm-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(.975);
    filter: blur(1px);
  }
}

@keyframes sf-share-pulse {
  0% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  }
  42% {
    transform: scale(1.008);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      0 0 0 5px rgba(47, 154, 99, .1);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  }
}

@keyframes sf-copy-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sf-copy-pop {
  0% {
    transform: scale(.72);
  }
  70% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

.sf-modal__foot .sf-btn--danger {
  margin-right: auto;
}

.sf-toast-root {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.sf-toast {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(220px, calc(100vw - 48px));
  height: min(220px, calc(100vw - 48px));
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  max-width: 220px;
  padding: 24px;
  border: 1px solid #b7e7d0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fffb 100%);
  color: #1f6f52;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .18);
  font-weight: 700;
  text-align: center;
  animation: sf-toast-in .24s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-toast.is-leaving {
  animation: sf-toast-out .2s ease both;
}

.sf-toast__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 1px solid #a8e7cd;
  border-radius: 14px;
  background: linear-gradient(145deg, #e8fff4, #c7f4df);
  color: #138a62;
  font-size: 24px;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55), 0 8px 18px rgba(19, 138, 98, .14);
}

.sf-toast__icon::after {
  position: absolute;
  inset: 4px;
  border: 2px dashed currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: '';
  animation: sf-toast-ring-spin .72s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-toast__icon i {
  animation: sf-toast-check-spin .72s .08s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-toast__message {
  line-height: 1.35;
  max-width: 100%;
}

.sf-toast--error {
  border-color: #fecdd3;
  background: linear-gradient(180deg, #ffffff 0%, #fff8f9 100%);
  color: #be123c;
}

.sf-toast--error .sf-toast__icon {
  border-color: #f4b8c0;
  background: linear-gradient(145deg, #fff2f4, #ffdfe4);
  color: #d64559;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .6), 0 8px 18px rgba(214, 69, 89, .14);
}

@keyframes sf-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: none; }
}

@keyframes sf-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes sf-toast-check-spin {
  from { opacity: 0; transform: scale(.25) rotate(-180deg); }
  70% { opacity: 1; transform: scale(1.12) rotate(360deg); }
  to { opacity: 1; transform: scale(1) rotate(360deg); }
}

@keyframes sf-toast-ring-spin {
  from { opacity: 0; transform: rotate(-180deg) scale(.72); }
  65% { opacity: .72; transform: rotate(250deg) scale(1.04); }
  to { opacity: .8; transform: rotate(360deg) scale(1); }
}

.sf-loading {
  display: grid;
  place-items: center;
  min-height: 240px;
  color: var(--muted);
}

.sf-loading i {
  margin-right: 8px;
}

/* Hover/focus contrast guard: keep every interactive state readable. */
.sf-btn,
.sf-btn i,
.sf-action-menu__item,
.sf-action-menu__item i,
.sf-custom-select__button,
.sf-custom-select__button i,
.sf-custom-select__option,
.sf-shift-choice__card,
.sf-shift-choice__card i,
.sf-shift-card,
.sf-shift-card i,
.sf-mini-btn,
.sf-icon-btn,
.sf-period__btn,
.sf-day-tab,
.sf-empty-cell {
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    transform .16s ease,
    opacity .16s ease;
}

button:disabled,
.sf-btn:disabled,
.sf-btn[disabled] {
  opacity: 1;
  cursor: not-allowed;
}

.sf-btn:hover:not(:disabled),
.sf-btn:focus-visible:not(:disabled) {
  border-color: #c7d0cb;
  background: #f4f7f5;
  color: #172033;
}

.sf-btn:hover:not(:disabled) i,
.sf-btn:focus-visible:not(:disabled) i,
.sf-action-menu__item:hover i,
.sf-action-menu__item:focus-visible i,
.sf-custom-select__button:hover i,
.sf-custom-select__button:focus-visible i,
.sf-custom-select.is-open .sf-custom-select__button i,
.sf-mini-btn:hover i,
.sf-icon-btn:hover i,
.sf-period__btn:hover i,
.sf-day-tab:hover i {
  color: currentColor;
}

.sf-btn--primary,
.sf-btn--primary i {
  color: #fff;
}

.sf-btn--primary:hover:not(:disabled),
.sf-btn--primary:focus-visible:not(:disabled) {
  border-color: #303946;
  background: #303946;
  color: #fff;
  box-shadow: 0 8px 18px rgba(47, 54, 64, .16);
}

.sf-btn--primary:disabled,
.sf-btn--primary[disabled] {
  border-color: #d8e0db;
  background: #eef2ef;
  color: #6b7680;
  box-shadow: none;
}

.sf-btn--primary:disabled i,
.sf-btn--primary[disabled] i {
  color: #6b7680;
}

.sf-btn--danger:hover:not(:disabled),
.sf-btn--danger:focus-visible:not(:disabled),
.sf-btn--danger-soft:hover:not(:disabled),
.sf-btn--danger-soft:focus-visible:not(:disabled) {
  border-color: #f3aebb;
  background: #fff0f3;
  color: #be123c;
}

.sf-action-menu__trigger:hover,
.sf-action-menu__trigger:focus-visible,
.sf-action-menu[open] .sf-action-menu__trigger {
  border-color: #1f2937;
  background: #303946;
  color: #fff;
}

.sf-action-menu__item:hover,
.sf-action-menu__item:focus-visible {
  background: #edf2ef;
  color: #111827;
  outline: none;
}

.sf-action-menu__item--primary:hover,
.sf-action-menu__item--primary:focus-visible {
  background: #e7eee9;
  color: #26313d;
}

.sf-action-menu__item--danger:hover,
.sf-action-menu__item--danger:focus-visible {
  background: #fff1f2;
  color: #b91c1c;
}

.sf-custom-select__button:hover,
.sf-custom-select__button:focus-visible,
.sf-custom-select.is-open .sf-custom-select__button {
  color: #172033;
}

.sf-custom-select__option:hover,
.sf-custom-select__option:focus-visible {
  background: #edf3ef;
  color: #172033;
}

.sf-custom-select__option.is-selected,
.sf-custom-select__option.is-selected:hover,
.sf-custom-select__option.is-selected:focus-visible {
  background: #303946;
  color: #fff;
}

.sf-modal--change-shift .sf-custom-select__option.is-selected,
.sf-modal--change-shift .sf-custom-select__option.is-selected:hover,
.sf-modal--change-shift .sf-custom-select__option.is-selected:focus-visible {
  background: #303946;
  color: #fff;
}

.sf-shift-choice--pagi:hover .sf-shift-choice__card,
.sf-shift-choice--pagi input:focus-visible + .sf-shift-choice__card {
  border-color: #0daeba;
  background: #23d6de;
  color: var(--pagi-text);
}

.sf-shift-choice--malam:hover .sf-shift-choice__card,
.sf-shift-choice--malam input:focus-visible + .sf-shift-choice__card {
  border-color: #3a414b;
  background: #22262d;
  color: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
}

.sf-shift-choice--change_malam:hover .sf-shift-choice__card,
.sf-shift-choice--change_malam input:focus-visible + .sf-shift-choice__card {
  border-color: #0d913f;
  background: #18b858;
  color: #fff;
}

.sf-shift-choice--off_change_pagi:hover .sf-shift-choice__card,
.sf-shift-choice--off_change_pagi input:focus-visible + .sf-shift-choice__card {
  border-color: #7d24c3;
  background: #9634df;
  color: #fff;
}

.sf-shift-choice--cuti:hover .sf-shift-choice__card,
.sf-shift-choice--cuti input:focus-visible + .sf-shift-choice__card {
  border-color: #c2b300;
  background: #f8ea18;
  color: var(--cuti-text);
}

.sf-shift-choice--off_day:hover .sf-shift-choice__card,
.sf-shift-choice--off_day input:focus-visible + .sf-shift-choice__card {
  border-color: #dc1e14;
  background: #ff372d;
  color: #fff;
}

.sf-shift-choice__card strong,
.sf-shift-choice__card i {
  color: currentColor;
}

.sf-shift-choice--pagi input:checked + .sf-shift-choice__card,
.sf-shift-choice--pagi input:checked + .sf-shift-choice__card strong,
.sf-shift-choice--pagi input:checked + .sf-shift-choice__card i {
  color: var(--pagi-text);
}

.sf-shift-choice--malam input:checked + .sf-shift-choice__card {
  border-color: #4b5563;
  background: #191b20;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 3px rgba(47, 54, 64, .18), 0 8px 18px rgba(15, 23, 42, .16);
}

.sf-shift-choice--malam input:checked + .sf-shift-choice__card strong,
.sf-shift-choice--malam input:checked + .sf-shift-choice__card i {
  color: #fff;
}

.sf-shift-choice--change_malam input:checked + .sf-shift-choice__card,
.sf-shift-choice--change_malam input:checked + .sf-shift-choice__card strong,
.sf-shift-choice--change_malam input:checked + .sf-shift-choice__card i,
.sf-shift-choice--off_change_pagi input:checked + .sf-shift-choice__card,
.sf-shift-choice--off_change_pagi input:checked + .sf-shift-choice__card strong,
.sf-shift-choice--off_change_pagi input:checked + .sf-shift-choice__card i,
.sf-shift-choice--off_day input:checked + .sf-shift-choice__card,
.sf-shift-choice--off_day input:checked + .sf-shift-choice__card strong,
.sf-shift-choice--off_day input:checked + .sf-shift-choice__card i {
  color: #fff;
}

@media (max-width: 1366px) {
  :root {
    --sidebar: 190px;
  }

  .sf-toolbar {
    gap: 12px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .sf-toolbar__left {
    gap: 12px;
  }

  .sf-period {
    gap: 9px;
    padding-right: 12px;
  }

  .sf-period__text {
    min-width: 132px;
  }

  .sf-summary {
    gap: 10px;
  }

  .sf-summary__item {
    font-size: 12px;
  }

  .sf-search {
    width: 205px;
  }

  .sf-role-cell,
  .sf-name-cell,
  .sf-role-head,
  .sf-name-head,
  .sf-total-label {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 980px) {
  :root {
    --sidebar: 74px;
  }

  .sf-sidebar {
    padding: 16px 10px;
  }

  .sf-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .sf-brand__text,
  .sf-nav__group,
  .sf-nav__item span,
  .sf-nav-sub,
  .sf-nav__item--parent .sf-nav__chevron,
  .sf-user__text {
    display: none;
  }

  .sf-nav__item {
    justify-content: center;
    padding: 0;
  }

  .sf-user {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-left: 0;
    padding-right: 0;
  }

  .sf-user__logout {
    grid-column: auto;
    width: 40px;
    padding: 0;
  }

  .sf-user__logout span {
    display: none;
  }

  .sf-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-toolbar__left,
  .sf-toolbar__right {
    width: 100%;
  }

  .sf-toolbar__right {
    justify-content: flex-start;
  }

  .sf-search {
    flex: 1 1 auto;
    width: auto;
  }
}

@media (max-width: 720px) {
  :root {
    --sidebar: 0px;
  }

  .sf-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-sidebar {
    display: none;
  }

  .sf-sticky-left {
    left: 0;
  }

  .sf-topbar {
    padding: 0 14px;
  }

  .sf-profile-mini span {
    display: none;
  }

  .sf-toolbar__left,
  .sf-toolbar__right,
  .sf-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-period {
    width: 100%;
    border-right: 0;
  }

  .sf-search,
  .sf-btn {
    width: 100%;
  }

  .sf-attendance-toolbar--clean .sf-toolbar__right {
    align-items: center;
  }

  .sf-attendance-hero {
    padding: 18px 14px 16px;
  }

  .sf-attendance-hero__title {
    width: 100%;
  }

  .sf-attendance-hero__title h1 {
    font-size: 22px;
  }

  .sf-attendance-hero__stats {
    width: min(100%, 340px);
    gap: 8px;
    padding: 7px 12px;
  }

  .sf-attendance-hero__stats time {
    flex-basis: 100%;
    text-align: center;
  }

  .sf-attendance-hero__divider {
    display: none;
  }

  .sf-attendance-date-control {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 320px);
  }

  .sf-attendance-step,
  .sf-date-menu,
  .sf-date-menu__trigger {
    width: 100%;
  }

  .sf-attendance-shift-title {
    min-height: 54px;
    padding: 13px 12px 12px;
  }

  .sf-attendance-shift-title h2 {
    font-size: 22px;
  }

  .sf-date-menu__panel {
    width: min(286px, calc(100vw - 36px));
  }

  .sf-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dark scrollbars: remove the bright native rails and keep every scrollable
   surface consistent with the dashboard palette. */
html[data-theme="dark"],
html[data-theme="dark"] * {
  scrollbar-color: #405b76 #0a1522;
  scrollbar-width: thin;
}

html[data-theme="dark"]::-webkit-scrollbar,
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}

html[data-theme="dark"]::-webkit-scrollbar-track,
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0a1522 !important;
  border-radius: 999px;
}

html[data-theme="dark"]::-webkit-scrollbar-thumb,
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  min-width: 34px;
  min-height: 34px;
  border: 2px solid #0a1522 !important;
  border-radius: 999px;
  background: #405b76 !important;
  background-clip: padding-box !important;
}

html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #587694 !important;
}

html[data-theme="dark"]::-webkit-scrollbar-thumb:active,
html[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
  background: #6a8aad !important;
}

html[data-theme="dark"]::-webkit-scrollbar-corner,
html[data-theme="dark"] ::-webkit-scrollbar-corner {
  background: #0a1522 !important;
}

html[data-theme="dark"]::-webkit-scrollbar-button,
html[data-theme="dark"] ::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html[data-theme="dark"] :where(
  .sf-modal__body,
  .sf-custom-select__menu,
  .sf-date-menu__panel,
  .sf-bulk-staff__list
)::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

/* Keep the complete totals footer pinned during vertical scrolling.
   The date separator layer above needs positioned cells, but total cells must
   remain sticky instead of inheriting its relative positioning. */
.sf-schedule-table tfoot {
  position: relative;
  z-index: 20;
}

.sf-schedule-table .sf-total-row > th,
.sf-schedule-table .sf-total-row > td,
.sf-schedule-table .sf-total-count {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: #eef1ef;
  background-clip: padding-box;
}

.sf-schedule-table .sf-total-row > .sf-sticky-role,
.sf-schedule-table .sf-total-row > .sf-sticky-name {
  z-index: 30;
}

html[data-theme="dark"] .sf-schedule-table .sf-total-row > th,
html[data-theme="dark"] .sf-schedule-table .sf-total-row > td,
html[data-theme="dark"] .sf-schedule-table .sf-total-count {
  background: #111f30 !important;
}

html[data-theme="dark"] .sf-schedule-table .sf-total-row > th,
html[data-theme="dark"] .sf-schedule-table .sf-total-row > td {
  border-top-color: #2c4259 !important;
  border-bottom-color: #2c4259 !important;
  box-shadow:
    0 -1px 0 #2c4259,
    0 -8px 18px rgba(2, 8, 16, .22) !important;
}

html[data-theme="dark"] .sf-schedule-table .sf-total-label {
  color: #b8c9db !important;
}

html[data-theme="dark"] .sf-schedule-table .sf-total-count strong,
html[data-theme="dark"] .sf-schedule-table .sf-total-count.is-active-col strong {
  color: #edf5fd !important;
}

html[data-theme="dark"] .sf-schedule-table .sf-total-count span,
html[data-theme="dark"] .sf-schedule-table .sf-total-count.is-active-col span {
  color: #8fa5bc !important;
}

html[data-theme="dark"] .sf-schedule-table .sf-total-count.is-active-col {
  background: #172a40 !important;
}

/* Search field should render as one pill, without a rectangular wrapper
   surface showing through around its rounded corners. */
html[data-theme="dark"] .sf-search,
html[data-theme="dark"] .sf-search:focus-within {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-search input[type="search"] {
  appearance: none;
  color: #edf4fd !important;
  background: #0f1d2e !important;
  border-color: #304861 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .sf-search input[type="search"]:hover {
  background: #122237 !important;
  border-color: #3b5875 !important;
}

html[data-theme="dark"] .sf-search input[type="search"]:focus {
  background: #132338 !important;
  border-color: #4b91e6 !important;
  box-shadow: 0 0 0 3px rgba(75, 145, 230, .14) !important;
}

html[data-theme="dark"] .sf-search i {
  z-index: 1;
  color: #8fa8c2;
  pointer-events: none;
}

html[data-theme="dark"] .sf-search input[type="search"]::-webkit-search-cancel-button,
html[data-theme="dark"] .sf-search input[type="search"]::-webkit-search-decoration {
  appearance: none;
}

/* Dark schedule settings menu: one cohesive control without the light-mode
   pointer diamond or white hover flashes. */
html[data-theme="dark"] .sf-action-menu__trigger,
html[data-theme="dark"] .sf-action-menu[open] .sf-action-menu__trigger {
  color: #dce8f6 !important;
  background: #132338 !important;
  border-color: #38516c !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .sf-action-menu__trigger::before {
  border-color: rgba(143, 174, 207, .18) !important;
  background: #0e1b2b !important;
}

html[data-theme="dark"] .sf-action-menu__trigger > i {
  color: #dce8f6 !important;
}

html[data-theme="dark"] .sf-action-menu__trigger:hover,
html[data-theme="dark"] .sf-action-menu__trigger:focus-visible,
html[data-theme="dark"] .sf-action-menu[open] .sf-action-menu__trigger:hover {
  color: #fff !important;
  background: #1a314b !important;
  border-color: #5b83aa !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28) !important;
  transform: translateY(-1px);
}

html[data-theme="dark"] .sf-action-menu__panel {
  gap: 3px;
  width: 218px;
  padding: 7px;
  border-color: #304861 !important;
  border-radius: 13px;
  background: #101d2d !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .44) !important;
}

html[data-theme="dark"] .sf-action-menu__panel::before {
  content: none !important;
  display: none !important;
}

html[data-theme="dark"] .sf-action-menu__item,
html[data-theme="dark"] .sf-action-menu__item--primary {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #b9c9da !important;
  background: transparent !important;
  transform: none;
}

html[data-theme="dark"] .sf-action-menu__item i,
html[data-theme="dark"] .sf-action-menu__item--primary i {
  color: #7792ae !important;
}

html[data-theme="dark"] .sf-action-menu__item:hover,
html[data-theme="dark"] .sf-action-menu__item:focus,
html[data-theme="dark"] .sf-action-menu__item:focus-visible,
html[data-theme="dark"] .sf-action-menu__item--primary:hover,
html[data-theme="dark"] .sf-action-menu__item--primary:focus-visible {
  color: #f5f9ff !important;
  background: #172b43 !important;
  border-color: #2f4c69 !important;
  box-shadow: inset 3px 0 0 #4b91e6 !important;
  outline: none;
  transform: none;
}

html[data-theme="dark"] .sf-action-menu__item:hover i,
html[data-theme="dark"] .sf-action-menu__item:focus i,
html[data-theme="dark"] .sf-action-menu__item:focus-visible i {
  color: #82baff !important;
  transform: none;
}

/* Share Shift: compact, balanced summary card with a clear single action. */
.sf-modal.sf-modal--share {
  width: min(500px, calc(100vw - 32px));
  border-radius: 18px;
}

.sf-modal.sf-modal--share .sf-modal__head {
  min-height: 64px;
  padding: 16px 20px;
}

.sf-modal.sf-modal--share .sf-modal__head h3 {
  font-size: 17px;
  letter-spacing: -.015em;
}

.sf-modal.sf-modal--share .sf-share-modal__body {
  gap: 12px;
  padding: 16px 20px 18px;
}

.sf-modal.sf-modal--share .sf-share-hero {
  min-height: 60px;
  padding: 12px 14px;
  border-radius: 13px;
  box-shadow: none;
}

.sf-modal.sf-modal--share .sf-share-hero__date {
  gap: 2px;
}

.sf-modal.sf-modal--share .sf-share-hero__date strong {
  font-size: 21px;
  letter-spacing: -.025em;
}

.sf-modal.sf-modal--share .sf-share-hero__status {
  padding: 6px 9px;
  font-size: 9px;
}

.sf-modal.sf-modal--share .sf-share-feed {
  gap: 8px;
  padding: 0;
}

.sf-modal.sf-modal--share .sf-share-feed__item {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  min-height: 0;
  padding: 11px 12px;
  border: 1px solid #dce6e1;
  border-radius: 13px;
  background: #fff;
}

.sf-modal.sf-modal--share .sf-share-feed__item::after {
  content: none;
  display: none;
}

.sf-modal.sf-modal--share .sf-share-feed__node {
  width: 36px;
  height: 36px;
  border-width: 1px;
  border-radius: 10px;
  box-shadow: none;
}

.sf-modal.sf-modal--share .sf-share-feed__content {
  gap: 5px;
  min-height: 36px;
  padding: 0;
}

.sf-modal.sf-modal--share .sf-share-feed__head {
  align-items: center;
}

.sf-modal.sf-modal--share .sf-share-feed__head strong {
  font-size: 11px;
}

.sf-modal.sf-modal--share .sf-share-feed__head span,
.sf-modal.sf-modal--share .sf-share-feed li {
  font-size: 9.5px;
}

.sf-modal.sf-modal--share .sf-share-feed__head em {
  width: 21px;
  height: 21px;
}

.sf-modal.sf-modal--share .sf-share-format {
  overflow: hidden;
  border-radius: 12px;
}

.sf-modal.sf-modal--share .sf-share-format summary {
  min-height: 42px;
  padding: 0 12px;
}

.sf-modal.sf-modal--share .sf-modal__foot--share {
  min-height: 0;
  padding: 14px 20px 16px;
}

.sf-modal.sf-modal--share .sf-modal__foot--share .sf-btn--primary {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  border-radius: 12px;
}

html[data-theme="dark"] .sf-modal.sf-modal--share {
  background: #0d1a2a !important;
  border-color: #2d435a !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-hero {
  background: linear-gradient(135deg, #14283e, #112237) !important;
  border-color: #31506d !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-hero__status {
  color: #8be1ca !important;
  background: #153b37 !important;
  border: 1px solid #28645a;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed__item {
  background: #101f31 !important;
  border-color: #2d435a !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed__node {
  color: #5bd1b4 !important;
  background: #14332f !important;
  border-color: #327b6c !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed__head em {
  color: #83ddc6 !important;
  background: #173a35 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format {
  background: #101f31 !important;
  border-color: #2d435a !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format summary {
  color: #aebfd1 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format:hover {
  background: #13263b !important;
  border-color: #3a5875 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-modal__foot--share {
  background: #0b1726 !important;
  border-color: #2d435a !important;
}

@media (max-width: 520px) {
  .sf-modal.sf-modal--share {
    width: 100%;
  }

  .sf-modal.sf-modal--share .sf-share-hero {
    gap: 10px;
  }
}

/* Keep the compact manual modal fixed while its custom menu floats above the form. */
.sf-modal--manual-checkin,
.sf-modal--manual-checkin .sf-modal__body {
  max-height: none;
  overflow: visible !important;
}

.sf-modal--manual-checkin .sf-custom-select__menu,
.sf-modal--manual-checkin .sf-custom-select.is-open .sf-custom-select__menu {
  max-height: 190px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sf-modal--manual-checkin .sf-custom-select__menu::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sf-modal--manual-checkin .sf-custom-select.is-open {
  z-index: 30;
}

.sf-modal--manual-checkin .sf-custom-select.is-open .sf-custom-select__menu {
  animation: sf-manual-dropdown-in .18s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes sf-manual-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-height: 620px) {
  .sf-modal--manual-checkin .sf-custom-select__menu,
  .sf-modal--manual-checkin .sf-custom-select.is-open .sf-custom-select__menu {
    max-height: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-modal--manual-checkin .sf-custom-select.is-open .sf-custom-select__menu {
    animation: none;
  }
}

/* Final polish: schedule action menu, share modal, and custom date select. */
.sf-action-menu__trigger {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  border-color: #d9e0e6;
  color: #111827;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  transition:
    transform .18s cubic-bezier(.2, .8, .2, 1),
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.sf-action-menu__trigger::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(249, 250, 251, .9), rgba(255, 255, 255, .35));
  opacity: 1;
  transition: border-color .18s ease, transform .18s ease;
}

.sf-action-menu__trigger::after {
  content: none;
  position: absolute;
  inset: 9px;
  z-index: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .86) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 100% 50%, rgba(255, 255, 255, .86) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .86) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 0 50%, rgba(255, 255, 255, .86) 0 1.2px, transparent 1.7px);
  opacity: .8;
  pointer-events: none;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
}

.sf-action-menu__compass-plus {
  position: relative;
  z-index: 2;
  display: block;
  width: 18px;
  height: 18px;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), opacity .16s ease;
}

.sf-action-menu__compass-plus::before,
.sf-action-menu__compass-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: #111827;
  box-shadow: none;
}

.sf-action-menu__compass-plus::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.sf-action-menu__compass-plus::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.sf-action-menu__trigger:hover,
.sf-action-menu__trigger:focus-visible,
.sf-action-menu[open] .sf-action-menu__trigger {
  background: #fff;
  border-color: #c7d0d9;
  color: #05070a;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .13);
}

.sf-action-menu__trigger:hover::before,
.sf-action-menu__trigger:focus-visible::before,
.sf-action-menu[open] .sf-action-menu__trigger::before {
  border-color: rgba(17, 24, 39, .16);
  transform: scale(.92);
}

.sf-action-menu__trigger:hover::after,
.sf-action-menu__trigger:focus-visible::after,
.sf-action-menu[open] .sf-action-menu__trigger::after {
  opacity: 1;
  transform: rotate(90deg);
}

.sf-action-menu[open] .sf-action-menu__compass-plus {
  transform: rotate(90deg) scale(1.08);
}

.sf-action-menu[open] .sf-action-menu__trigger > i {
  transform: rotate(90deg) scale(1.08);
}

.sf-action-menu__panel {
  transform-origin: top right;
  animation: sf-action-menu-in .18s cubic-bezier(.2, .8, .2, 1);
  will-change: transform, opacity;
}

.sf-action-menu.is-closing .sf-action-menu__panel {
  animation: sf-action-menu-out .14s ease forwards;
  pointer-events: none;
}

.sf-action-menu__item {
  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.sf-action-menu__item i {
  transition: transform .16s ease, color .16s ease;
}

.sf-action-menu[open] .sf-action-menu__item {
  animation: sf-action-item-in .22s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-action-menu[open] .sf-action-menu__item:nth-child(2) {
  animation-delay: .025s;
}

.sf-action-menu[open] .sf-action-menu__item:nth-child(3) {
  animation-delay: .05s;
}

.sf-action-menu[open] .sf-action-menu__item:nth-child(4) {
  animation-delay: .075s;
}

.sf-action-menu[open] .sf-action-menu__item:nth-child(5) {
  animation-delay: .1s;
}

.sf-action-menu__item:hover,
.sf-action-menu__item:focus-visible {
  background: #edf4f1;
  color: #172033;
  transform: translateX(2px);
  box-shadow: none;
}

.sf-action-menu__item:hover i,
.sf-action-menu__item:focus-visible i {
  transform: scale(1.08);
}

.sf-action-menu__item--danger:hover,
.sf-action-menu__item--danger:focus-visible {
  background: #fff1f2;
  color: #b91c1c;
  box-shadow: none;
}

.sf-action-menu__item--primary:hover,
.sf-action-menu__item--primary:focus-visible {
  background: #eaf1ee;
  color: #172033;
}

@keyframes sf-action-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sf-action-menu-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-5px) scale(.97);
  }
}

@keyframes sf-action-item-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sf-modal-backdrop.is-closing {
  animation: sf-backdrop-out .16s ease forwards;
}

.sf-modal-backdrop.is-closing .sf-modal {
  animation: sf-modal-out .16s ease forwards;
}

@keyframes sf-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sf-modal-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
}

.sf-modal--share .sf-modal__head {
  padding-bottom: 16px;
}

.sf-share-modal__body {
  padding: 20px;
  background: linear-gradient(180deg, #fbfcfc 0%, #f6faf8 100%);
}

.sf-share-date-card {
  border-color: #d9e4df;
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  box-shadow: none;
}

.sf-share-date-card span {
  color: #667a73;
  letter-spacing: .1em;
}

.sf-share-card {
  border-color: rgba(42, 130, 91, .26);
  background:
    radial-gradient(circle at 13% 0%, rgba(204, 246, 221, .24), transparent 34%),
    linear-gradient(145deg, #4fa277 0%, #398662 44%, #286a50 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 16px 34px rgba(31, 87, 65, .16);
}

.sf-share-card h4 {
  color: #f8fff9;
}

.sf-share-section {
  border-color: rgba(235, 255, 242, .18);
}

.sf-share-section strong {
  color: #f0fff7;
}

.sf-share-section strong::before {
  background: #ccf6dd;
  box-shadow: 0 0 0 4px rgba(204, 246, 221, .16);
}

.sf-share-section li {
  color: #fff;
}

.sf-modal__foot--share {
  justify-content: flex-end;
}

.sf-modal__foot--share .sf-btn--primary {
  min-width: 220px;
  border-color: #2f6754;
  background: #2f6754;
  box-shadow: 0 10px 22px rgba(47, 103, 84, .14);
}

.sf-modal__foot--share .sf-btn--primary:hover,
.sf-modal__foot--share .sf-btn--primary:focus-visible {
  border-color: #285848;
  background: #285848;
  color: #fff;
  transform: translateY(-1px);
}

.sf-modal--share.is-copied .sf-share-card {
  animation: sf-share-copy-glow .72s ease;
}

@keyframes sf-share-copy-glow {
  0% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .16),
      0 16px 34px rgba(31, 87, 65, .16);
    transform: scale(1);
  }
  35% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .2),
      0 0 0 5px rgba(102, 220, 148, .18),
      0 22px 42px rgba(31, 87, 65, .21);
    transform: scale(1.006);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .16),
      0 16px 34px rgba(31, 87, 65, .16);
    transform: scale(1);
  }
}

.sf-modal--change-shift .sf-modal__body {
  min-height: 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 198, 189, .08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  transition:
    min-height .24s cubic-bezier(.2, .8, .2, 1),
    padding .2s ease;
}

.sf-modal--change-shift:has(.sf-custom-select.is-open) .sf-modal__body {
  min-height: 570px;
}

.sf-change-flow {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.sf-change-flow__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.sf-change-flow__head span {
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.sf-change-flow__head small {
  color: #7a8581;
  font-size: 12px;
  font-weight: 700;
}

.sf-flow-builder {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-flow-builder__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid #d8e1dc;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.sf-flow-builder__item:nth-child(1) {
  border-color: #cce8e6;
  background:
    linear-gradient(90deg, rgba(45, 198, 189, .12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f4fbfa 100%);
}

.sf-flow-builder__item:nth-child(2) {
  border-color: #dce8d2;
  background:
    linear-gradient(90deg, rgba(129, 180, 110, .12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbf4 100%);
}

.sf-flow-builder__item:nth-child(3) {
  border-color: #e4d8ea;
  background:
    linear-gradient(90deg, rgba(141, 95, 173, .10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbf7fd 100%);
}

.sf-flow-builder__item:nth-child(4) {
  border-color: #eadfce;
  background:
    linear-gradient(90deg, rgba(197, 143, 65, .12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
}

.sf-flow-builder__item:hover {
  border-color: #b8c6bf;
  background:
    linear-gradient(90deg, rgba(52, 64, 78, .055), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f3f7f5 100%);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.sf-flow-builder__item.is-moving {
  animation: sfFlowMove .26s cubic-bezier(.2, .8, .2, 1);
}

.sf-flow-builder__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #eef4f1;
  color: #34404e;
  font-size: 13px;
  font-weight: 900;
}

.sf-flow-builder__item:nth-child(1) .sf-flow-builder__index {
  background: #e7f6f4;
  color: #17635d;
}

.sf-flow-builder__item:nth-child(2) .sf-flow-builder__index {
  background: #edf5e9;
  color: #456538;
}

.sf-flow-builder__item:nth-child(3) .sf-flow-builder__index {
  background: #f3edf8;
  color: #65437d;
}

.sf-flow-builder__item:nth-child(4) .sf-flow-builder__index {
  background: #f8f0e4;
  color: #795829;
}

.sf-flow-builder__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sf-flow-builder__text strong {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-flow-builder__text em {
  overflow: hidden;
  color: #66736e;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-flow-builder__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-flow-builder__move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d8e1dc;
  border-radius: 11px;
  background: #fff;
  color: #34404e;
  cursor: pointer;
  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.sf-flow-builder__move:hover:not(:disabled),
.sf-flow-builder__move:focus-visible:not(:disabled) {
  border-color: #34404e;
  background: #34404e;
  color: #fff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .12);
  transform: translateY(-1px);
}

.sf-flow-builder__move:disabled {
  opacity: .35;
  cursor: default;
}

@keyframes sfFlowMove {
  0% {
    transform: scale(.985);
  }

  60% {
    transform: scale(1.012);
  }

  100% {
    transform: scale(1);
  }
}

.sf-custom-select__button {
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}

.sf-modal--change-shift .sf-custom-select__button {
  min-height: 48px;
  border-color: #d3ddd8;
  border-radius: 15px;
  background:
    linear-gradient(90deg, rgba(45, 198, 189, .08), transparent 42%),
    #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78);
}

.sf-custom-select__button:hover,
.sf-custom-select__button:focus-visible,
.sf-custom-select.is-open .sf-custom-select__button {
  background: #fbfdfc;
  color: #172033;
  transform: translateY(-1px);
}

.sf-modal--change-shift .sf-custom-select__button:hover,
.sf-modal--change-shift .sf-custom-select__button:focus-visible,
.sf-modal--change-shift .sf-custom-select.is-open .sf-custom-select__button {
  border-color: #abc3bc;
  background:
    linear-gradient(90deg, rgba(45, 198, 189, .12), rgba(129, 180, 110, .08)),
    #ffffff;
  box-shadow:
    0 10px 22px rgba(31, 41, 55, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .86);
}

.sf-custom-select__menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transform-origin: top center;
  transition:
    max-height .24s cubic-bezier(.2, .8, .2, 1),
    opacity .18s ease,
    transform .22s cubic-bezier(.2, .8, .2, 1);
}

.sf-custom-select.is-open .sf-custom-select__menu {
  max-height: 248px;
  overflow-y: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sf-modal--change-shift .sf-custom-select__menu {
  margin-top: 10px;
  padding: 8px;
  max-height: 0;
  border-color: #d7dfdc;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 198, 189, .12), transparent 36%),
    radial-gradient(circle at 92% 16%, rgba(197, 143, 65, .08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
  box-shadow: 0 22px 42px rgba(15, 23, 42, .13);
  scrollbar-color: #b7c5bf transparent;
  scrollbar-width: thin;
}

.sf-modal--change-shift .sf-custom-select.is-open .sf-custom-select__menu {
  max-height: 220px;
}

.sf-modal--change-shift .sf-custom-select__menu::-webkit-scrollbar {
  width: 5px;
}

.sf-modal--change-shift .sf-custom-select__menu::-webkit-scrollbar-track {
  background: transparent;
}

.sf-modal--change-shift .sf-custom-select__menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #bdc9c4;
}

.sf-custom-select__option {
  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}

.sf-modal--change-shift .sf-custom-select__option {
  min-height: 36px;
  margin: 1px 0;
  padding: 0 12px;
  border-radius: 12px;
  color: #253243;
  font-weight: 800;
}

.sf-modal--change-shift .sf-custom-select__option:nth-child(6n + 1) {
  background: rgba(45, 198, 189, .075);
}

.sf-modal--change-shift .sf-custom-select__option:nth-child(6n + 3) {
  background: rgba(129, 180, 110, .065);
}

.sf-modal--change-shift .sf-custom-select__option:nth-child(6n + 5) {
  background: rgba(197, 143, 65, .06);
}

.sf-custom-select__option:hover,
.sf-custom-select__option:focus-visible {
  background: #eef4f1;
  color: #172033;
  transform: translateX(3px);
}

.sf-modal--change-shift .sf-custom-select__option:hover,
.sf-modal--change-shift .sf-custom-select__option:focus-visible {
  background: #e7f5f1;
  color: #172033;
  box-shadow: inset 3px 0 0 #2dc6bd;
  transform: translateX(4px);
}

.sf-custom-select__option.is-selected,
.sf-custom-select__option.is-selected:hover,
.sf-custom-select__option.is-selected:focus-visible {
  background: #303946;
  color: #fff;
  transform: none;
}

.sf-modal--change-shift .sf-custom-select__option.is-selected,
.sf-modal--change-shift .sf-custom-select__option.is-selected:hover,
.sf-modal--change-shift .sf-custom-select__option.is-selected:focus-visible {
  background: linear-gradient(135deg, #34404e 0%, #26313d 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(52, 64, 78, .18);
  transform: none;
}

.sf-custom-select.is-picked .sf-custom-select__button {
  animation: sf-select-picked .24s ease;
}

.sf-custom-select__option.is-picking {
  animation: sf-select-option-pick .18s ease;
}

@keyframes sf-select-picked {
  0% {
    box-shadow: 0 0 0 0 rgba(45, 95, 79, .18);
  }
  60% {
    box-shadow: 0 0 0 5px rgba(45, 95, 79, .12);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(45, 95, 79, 0);
  }
}

@keyframes sf-select-option-pick {
  0% {
    transform: translateX(3px) scale(1);
  }
  55% {
    transform: translateX(3px) scale(.985);
  }
  100% {
    transform: translateX(3px) scale(1);
  }
}

/* Final polish: Change Shift configuration modal */
.sf-modal--change-shift .sf-modal__head {
  background:
    radial-gradient(circle at 12% -18%, rgba(35, 203, 196, .14), transparent 36%),
    radial-gradient(circle at 96% 0%, rgba(240, 180, 93, .10), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}

.sf-modal--change-shift .sf-modal__body {
  background:
    radial-gradient(circle at 8% 8%, rgba(35, 203, 196, .075), transparent 28%),
    radial-gradient(circle at 100% 16%, rgba(240, 180, 93, .065), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
}

.sf-modal--change-shift .sf-modal__foot {
  background: linear-gradient(180deg, #fbfdfc 0%, #f7faf8 100%);
}

.sf-modal--change-shift .sf-modal__head p,
.sf-change-flow__head small {
  display: none !important;
}

.sf-change-flow__head {
  align-items: center;
}

.sf-change-flow__head span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1f2937;
}

.sf-change-flow__head span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #23cbc4;
  box-shadow: 0 0 0 4px rgba(35, 203, 196, .12);
}

.sf-flow-builder {
  gap: 10px;
}

.sf-flow-builder__item {
  --flow-accent: #23cbc4;
  --flow-soft: rgba(35, 203, 196, .12);
  position: relative;
  overflow: hidden;
  border-color: #d6e1dc;
  background:
    linear-gradient(90deg, var(--flow-soft), rgba(255, 255, 255, .98) 46%, #ffffff 100%);
  box-shadow: 0 12px 24px rgba(31, 42, 55, .055);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease;
}

.sf-flow-builder__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--flow-accent);
}

.sf-flow-builder__item:nth-child(1) {
  --flow-accent: #23cbc4;
  --flow-soft: rgba(35, 203, 196, .14);
}

.sf-flow-builder__item:nth-child(2) {
  --flow-accent: #86c36d;
  --flow-soft: rgba(134, 195, 109, .14);
}

.sf-flow-builder__item:nth-child(3) {
  --flow-accent: #9b7cf3;
  --flow-soft: rgba(155, 124, 243, .12);
}

.sf-flow-builder__item:nth-child(4) {
  --flow-accent: #f0b45d;
  --flow-soft: rgba(240, 180, 93, .15);
}

.sf-flow-builder__item:hover {
  border-color: #b8c7c0;
  background:
    linear-gradient(90deg, var(--flow-soft), rgba(255, 255, 255, .99) 50%, #ffffff 100%);
  box-shadow: 0 16px 30px rgba(31, 42, 55, .075);
  transform: translateY(-1px);
}

.sf-flow-builder__index {
  background: #eef4f1;
  color: #26313d;
}

.sf-flow-builder__item:nth-child(1) .sf-flow-builder__index {
  background: #dff5f2;
  color: #17635d;
}

.sf-flow-builder__item:nth-child(2) .sf-flow-builder__index {
  background: #edf7e8;
  color: #456538;
}

.sf-flow-builder__item:nth-child(3) .sf-flow-builder__index {
  background: #f2ebfb;
  color: #65437d;
}

.sf-flow-builder__item:nth-child(4) .sf-flow-builder__index {
  background: #fbf0df;
  color: #795829;
}

.sf-flow-builder__move:hover:not(:disabled),
.sf-flow-builder__move:focus-visible:not(:disabled) {
  border-color: var(--flow-accent);
  background: #ffffff;
  color: #172033;
  box-shadow: 0 10px 18px rgba(31, 42, 55, .12);
}

.sf-modal--change-shift .sf-custom-select__button {
  border-color: #ccd9d4;
  background:
    linear-gradient(90deg, rgba(35, 203, 196, .06), rgba(255, 255, 255, .96) 38%, #ffffff 100%);
}

.sf-modal--change-shift .sf-custom-select__button:hover,
.sf-modal--change-shift .sf-custom-select__button:focus-visible,
.sf-modal--change-shift .sf-custom-select.is-open .sf-custom-select__button {
  border-color: #8db5ac;
  box-shadow: 0 0 0 4px rgba(35, 203, 196, .12);
}

.sf-modal--change-shift .sf-custom-select__menu {
  border-color: #d5ded9;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 34px rgba(31, 42, 55, .13);
}

.sf-modal--change-shift .sf-custom-select__option:hover,
.sf-modal--change-shift .sf-custom-select__option:focus-visible {
  background: #f0f7f4;
  color: #172033;
  box-shadow: inset 3px 0 0 #23cbc4;
  transform: translateX(4px);
}

.sf-modal--change-shift .sf-custom-select__option.is-selected,
.sf-modal--change-shift .sf-custom-select__option.is-selected:hover,
.sf-modal--change-shift .sf-custom-select__option.is-selected:focus-visible {
  background: #e6f8f6;
  color: #17635d;
  box-shadow: inset 3px 0 0 #23cbc4;
  transform: none;
}

/* Change Shift calendar picker */
.sf-modal--change-shift,
.sf-modal--change-shift .sf-modal__body {
  overflow: visible;
}

.sf-modal--change-shift .sf-change-date-field {
  position: relative;
  z-index: 80;
}

.sf-modal--change-shift .sf-change-date-menu {
  display: block;
  position: relative;
  width: 100%;
  user-select: none;
}

.sf-modal--change-shift .sf-change-date-menu > summary {
  list-style: none;
}

.sf-modal--change-shift .sf-change-date-menu > summary::-webkit-details-marker {
  display: none;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger {
  align-items: center;
  background: #fbfffd;
  border: 1px solid #ccd9d4;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 1px 0 rgba(15, 23, 42, .04);
  color: #172033;
  cursor: pointer;
  display: flex;
  font-weight: 850;
  gap: 12px;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
  width: 100%;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger i:first-child {
  color: #24746e;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger i:last-child {
  color: #536170;
  transition: color .18s ease, transform .22s ease;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:hover,
.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:focus-visible,
.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger {
  background:
    linear-gradient(135deg, rgba(35, 203, 196, .11), rgba(84, 180, 123, .08)),
    #ffffff;
  border-color: #9dcfc8;
  box-shadow: 0 0 0 4px rgba(35, 203, 196, .09), inset 0 1px 0 rgba(255, 255, 255, .96);
  outline: 0;
}

.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger i:last-child {
  transform: rotate(180deg);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__panel {
  background:
    linear-gradient(180deg, rgba(248, 253, 251, .98), rgba(255, 255, 255, .99)),
    #ffffff;
  border: 1px solid rgba(199, 213, 207, .96);
  border-radius: 18px;
  box-shadow: 0 24px 54px rgba(15, 23, 42, .16);
  display: grid;
  gap: 10px;
  left: 0;
  max-height: none;
  opacity: 0;
  overflow: hidden;
  padding: 14px;
  pointer-events: none;
  position: absolute;
  right: auto;
  top: calc(100% + 10px);
  transform: translateY(-8px) scale(.98);
  transform-origin: top center;
  width: 336px;
  max-width: 100%;
  z-index: 120;
}

.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__panel,
.sf-modal--change-shift .sf-change-date-menu.is-open .sf-date-menu__panel {
  animation: sf-change-calendar-in .22s cubic-bezier(.2, .8, .2, 1) both;
  pointer-events: auto;
}

.sf-modal--change-shift .sf-change-date-menu.is-closing .sf-date-menu__panel {
  animation: sf-change-calendar-out .16s ease both;
  pointer-events: none;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__head {
  align-items: center;
  background: rgba(240, 247, 244, .62);
  border-radius: 13px;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__head span {
  color: #788780;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__head strong {
  color: #1b2936;
  font-size: 14px;
  font-weight: 900;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__weekdays {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 4px;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__weekdays span {
  color: #8491a1;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__blank {
  min-height: 38px;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day {
  appearance: none;
  background: #f2f6f4;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(206, 218, 212, .42);
  color: #253244;
  cursor: pointer;
  display: grid;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  min-height: 38px;
  padding: 0;
  place-items: center;
  transition:
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    transform .16s ease;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day:hover,
.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day:focus-visible {
  background: #e5f5f2;
  box-shadow: 0 0 0 3px rgba(35, 203, 196, .13), inset 0 0 0 1px rgba(91, 188, 178, .38);
  color: #0f6963;
  outline: 0;
  transform: translateY(-1px);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-today {
  background: #eaf8f5;
  box-shadow: inset 0 0 0 1px rgba(35, 203, 196, .48), 0 0 0 3px rgba(35, 203, 196, .08);
  color: #0f6f68;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-active {
  background: #33404d;
  box-shadow: 0 10px 20px rgba(51, 64, 77, .20);
  color: #ffffff;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-active:hover,
.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-active:focus-visible {
  background: #2b3642;
  color: #ffffff;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-picking {
  animation: sf-change-calendar-pick .28s ease both;
}

.sf-modal--change-shift .sf-change-flow {
  transition: margin-top .24s cubic-bezier(.2, .8, .2, 1);
}

.sf-modal--change-shift:has(.sf-change-date-menu[open]) .sf-change-flow {
  margin-top: 318px;
}

@keyframes sf-change-calendar-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sf-change-calendar-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-6px) scale(.985);
  }
}

@keyframes sf-change-calendar-pick {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(.92);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 720px) {
  .sf-modal--change-shift .sf-change-date-menu .sf-date-menu__panel {
    width: 100%;
    padding: 12px;
  }

  .sf-modal--change-shift:has(.sf-change-date-menu[open]) .sf-change-flow {
    margin-top: 318px;
  }

  .sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day,
  .sf-modal--change-shift .sf-change-date-menu .sf-date-menu__blank {
    min-height: 34px;
  }
}

/* Calendar style for Change Shift, aligned with Absensi picker */
.sf-modal--change-shift .sf-change-date-field {
  isolation: isolate;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  min-height: 56px;
  border-color: #d5e1dc;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 12px 26px rgba(15, 23, 42, .045);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:hover,
.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:focus-visible {
  background: linear-gradient(180deg, #ffffff 0%, #f0fbf8 100%);
  border-color: #a7d7cf;
  color: #102a35;
  box-shadow: 0 0 0 4px rgba(38, 199, 190, .12), 0 14px 30px rgba(15, 23, 42, .07);
}

.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger,
.sf-modal--change-shift .sf-change-date-menu.is-open .sf-date-menu__trigger {
  border-color: #64c7bd;
  background: linear-gradient(135deg, rgba(220, 250, 246, .95), #ffffff 72%);
  box-shadow: 0 0 0 5px rgba(38, 199, 190, .12), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger i:first-child {
  color: #17847b;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger i:last-child {
  justify-self: end;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__panel {
  left: 50%;
  right: auto;
  top: calc(100% + 12px);
  width: 346px;
  max-width: min(346px, calc(100vw - 96px));
  padding: 14px;
  border-color: rgba(204, 220, 214, .94);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
  box-shadow: 0 28px 70px rgba(20, 31, 42, .18);
  backdrop-filter: blur(18px);
  transform-origin: top center;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__head {
  padding: 11px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f1fbf8, #f7faf8);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__weekdays {
  gap: 6px;
  margin-top: 12px;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__grid {
  gap: 6px;
  margin-top: 8px;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day {
  position: relative;
  height: 38px;
  min-height: 38px;
  border-radius: 13px;
  background: #f3f7f5;
  color: #263442;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(205, 218, 212, .52);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day span {
  position: relative;
  z-index: 1;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day:hover,
.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day:focus-visible {
  background: #e9f8f5;
  color: #12353e;
  box-shadow: 0 0 0 3px rgba(35, 203, 196, .12), inset 0 0 0 1px rgba(89, 190, 181, .42);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-today:not(.is-active) {
  background: linear-gradient(180deg, #edfffb, #f7fbfa);
  color: #08756d;
  box-shadow: inset 0 0 0 1px rgba(35, 203, 196, .45);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-active {
  background: #34424e;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(52, 66, 78, .22), inset 0 -2px 0 rgba(20, 30, 39, .24);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: #28d2c9;
  transform: translateX(-50%);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-active:hover,
.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-active:focus-visible {
  background: #2f3b46;
  color: #ffffff;
}

.sf-modal--change-shift:has(.sf-change-date-menu[open]) .sf-change-flow {
  margin-top: 326px;
}

@keyframes sf-change-calendar-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, -10px, 0) scale(.96);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes sf-change-calendar-out {
  from {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translate3d(-50%, -8px, 0) scale(.97);
    filter: blur(3px);
  }
}

@media (max-width: 720px) {
  .sf-modal--change-shift .sf-change-date-menu .sf-date-menu__panel {
    left: 0;
    max-width: 100%;
    width: 100%;
  }

  @keyframes sf-change-calendar-in {
    from {
      opacity: 0;
      transform: translate3d(0, -10px, 0) scale(.96);
      filter: blur(4px);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes sf-change-calendar-out {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }

    to {
      opacity: 0;
      transform: translate3d(0, -8px, 0) scale(.97);
      filter: blur(3px);
    }
  }
}
/* Final Change Shift date picker polish */
.sf-modal--change-shift .sf-change-date-field {
  position: relative;
  isolation: isolate;
}

.sf-modal--change-shift .sf-change-date-menu {
  position: relative;
  width: 100%;
  z-index: 30;
}

.sf-modal--change-shift .sf-change-date-menu > summary,
.sf-modal--change-shift .sf-change-date-menu > summary::-webkit-details-marker {
  list-style: none;
}

.sf-modal--change-shift .sf-change-date-menu > summary::-webkit-details-marker {
  display: none;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid rgba(198, 215, 209, .95);
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fffd 0%, #fffdf8 100%);
  color: #182333;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger i:first-child {
  color: #1f9b91;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger i:last-child {
  margin-left: auto;
  color: #516173;
  transition: transform .18s ease, color .18s ease;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:hover,
.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:focus-visible {
  color: #182333;
  background: linear-gradient(135deg, #eefbf8 0%, #fff7ec 100%);
  border-color: rgba(55, 156, 145, .46);
  box-shadow: 0 0 0 4px rgba(32, 153, 143, .11);
  transform: translateY(-1px);
}

.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger,
.sf-modal--change-shift .sf-change-date-menu.is-open .sf-date-menu__trigger {
  border-color: rgba(38, 143, 134, .55);
  background: linear-gradient(135deg, #ecfbf8 0%, #fff7ea 100%);
  box-shadow: 0 0 0 4px rgba(32, 153, 143, .12);
}

.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger i:last-child,
.sf-modal--change-shift .sf-change-date-menu.is-open .sf-date-menu__trigger i:last-child {
  color: #142433;
  transform: rotate(180deg);
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  z-index: 50;
  width: min(392px, calc(100vw - 72px));
  max-height: none;
  overflow: visible;
  padding: 16px;
  border: 1px solid rgba(201, 216, 210, .95);
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 55px rgba(22, 34, 46, .16);
  transform-origin: top center;
  opacity: 0;
  transform: translate3d(-50%, -10px, 0) scale(.98);
  pointer-events: none;
}

.sf-modal--change-shift .sf-change-date-menu:not([open]) .sf-date-menu__panel {
  display: none;
}

.sf-modal--change-shift .sf-change-date-menu[open].is-open .sf-date-menu__panel {
  animation: sf-change-calendar-in-final .22s cubic-bezier(.2, .85, .2, 1) both;
  pointer-events: auto;
}

.sf-modal--change-shift .sf-change-date-menu.is-closing .sf-date-menu__panel {
  animation: sf-change-calendar-out-final .16s ease both;
  pointer-events: none;
}

.sf-modal--change-shift .sf-date-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: #667386;
}

.sf-modal--change-shift .sf-date-menu__head span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-modal--change-shift .sf-date-menu__head strong {
  font-size: 14px;
  color: #182333;
}

.sf-modal--change-shift .sf-date-menu__weekdays,
.sf-modal--change-shift .sf-date-menu__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sf-modal--change-shift .sf-date-menu__weekdays {
  gap: 6px;
  margin-bottom: 8px;
}

.sf-modal--change-shift .sf-date-menu__weekdays span {
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  color: #8793a3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-modal--change-shift .sf-date-menu__grid {
  gap: 8px;
}

.sf-modal--change-shift .sf-date-menu__blank {
  min-height: 38px;
}

.sf-modal--change-shift .sf-date-menu__day {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f5f8f7;
  color: #1d2b3a;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sf-modal--change-shift .sf-date-menu__day:hover,
.sf-modal--change-shift .sf-date-menu__day:focus-visible {
  color: #122033;
  background: #eaf5f2;
  border-color: rgba(47, 143, 132, .22);
  transform: translateY(-1px);
  outline: none;
}

.sf-modal--change-shift .sf-date-menu__day.is-today:not(.is-active) {
  border-color: rgba(255, 184, 76, .55);
  background: #fff7e7;
}

.sf-modal--change-shift .sf-date-menu__day.is-active {
  color: #fff;
  border-color: #2f4658;
  background: linear-gradient(135deg, #2f3e4f 0%, #1d2b39 100%);
  box-shadow: 0 8px 18px rgba(29, 43, 57, .2);
}

.sf-modal--change-shift .sf-date-menu__day.is-active:hover,
.sf-modal--change-shift .sf-date-menu__day.is-active:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #354658 0%, #203040 100%);
}

.sf-modal--change-shift .sf-date-menu__day.is-picking {
  animation: sf-change-date-pick-final .26s cubic-bezier(.2, .85, .2, 1);
}

.sf-modal--change-shift .sf-change-flow {
  transition: margin-top .18s ease;
}

.sf-modal--change-shift:has(.sf-change-date-menu[open]) .sf-change-flow {
  margin-top: 318px;
  transition: margin-top .22s cubic-bezier(.2, .85, .2, 1);
}

@keyframes sf-change-calendar-in-final {
  from {
    opacity: 0;
    transform: translate3d(-50%, -10px, 0) scale(.98);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes sf-change-calendar-out-final {
  from {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(-50%, -8px, 0) scale(.98);
  }
}

@keyframes sf-change-date-pick-final {
  0% {
    transform: scale(.94);
  }
  55% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* Change Shift calendar: keep the picker in the modal flow so it never overlaps the role order or footer. */
.sf-modal--change-shift .sf-modal__panel {
  max-height: min(92vh, 760px);
  overflow: hidden;
}

.sf-modal--change-shift .sf-modal__body {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 74, 91, .28) transparent;
}

.sf-modal--change-shift .sf-modal__body::-webkit-scrollbar {
  width: 4px;
}

.sf-modal--change-shift .sf-modal__body::-webkit-scrollbar-track {
  background: transparent;
}

.sf-modal--change-shift .sf-modal__body::-webkit-scrollbar-thumb {
  background: rgba(58, 74, 91, .24);
  border-radius: 999px;
}

.sf-modal--change-shift .sf-change-date-field {
  position: relative;
  isolation: auto;
  z-index: 4;
}

.sf-modal--change-shift .sf-change-date-menu {
  position: relative;
  width: 100%;
  z-index: 5;
}

.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__panel {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  width: min(372px, 100%);
  max-height: none;
  overflow: hidden;
  margin: 12px auto 0;
  padding: 16px;
  border: 1px solid rgba(198, 215, 209, .92);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(242, 253, 250, .98), rgba(255, 253, 248, .98));
  box-shadow: 0 16px 36px rgba(22, 34, 46, .12);
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(.98);
  transform-origin: top center;
  pointer-events: none;
}

.sf-modal--change-shift .sf-change-date-menu:not([open]) .sf-date-menu__panel {
  display: none;
}

.sf-modal--change-shift .sf-change-date-menu[open].is-open .sf-date-menu__panel {
  display: block;
  pointer-events: auto;
  animation: sf-change-calendar-inline-in .22s cubic-bezier(.2, .85, .2, 1) both;
}

.sf-modal--change-shift .sf-change-date-menu.is-closing .sf-date-menu__panel {
  display: block;
  pointer-events: none;
  animation: sf-change-calendar-inline-out .16s ease both;
}

.sf-modal--change-shift .sf-change-flow,
.sf-modal--change-shift:has(.sf-change-date-menu[open]) .sf-change-flow {
  margin-top: 16px;
  transition: margin-top .18s ease;
}

.sf-modal--change-shift .sf-date-menu__head {
  margin-bottom: 14px;
}

.sf-modal--change-shift .sf-date-menu__grid {
  gap: 8px;
}

.sf-modal--change-shift .sf-date-menu__day {
  min-height: 38px;
}

@keyframes sf-change-calendar-inline-in {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sf-change-calendar-inline-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(.98);
  }
}

/* Role-aware Change Shift cards: colors follow the role when reordered. */
.sf-modal--change-shift .sf-flow-builder__item {
  --flow-border: #d7e2de;
  --flow-soft: rgba(47, 74, 69, .07);
  --flow-card: #f8fbfa;
  --flow-index-bg: #edf3f1;
  --flow-index-text: #2f4a45;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--flow-border) !important;
  border-left-width: 1px !important;
  background:
    radial-gradient(circle at 18% 0%, var(--flow-soft), transparent 46%),
    linear-gradient(135deg, #ffffff 0%, var(--flow-card) 100%) !important;
  box-shadow: 0 12px 24px rgba(31, 42, 55, .055);
}

.sf-modal--change-shift .sf-flow-builder__item::before {
  content: none !important;
  display: none !important;
}

.sf-modal--change-shift .sf-flow-builder__item.sf-flow-builder__item--cs-line {
  --flow-border: #bfe8e6;
  --flow-soft: rgba(34, 184, 181, .14);
  --flow-card: #f0fbfa;
  --flow-index-bg: #def6f4;
  --flow-index-text: #176b67;
}

.sf-modal--change-shift .sf-flow-builder__item.sf-flow-builder__item--cs-chat {
  --flow-border: #d8cef7;
  --flow-soft: rgba(139, 111, 232, .12);
  --flow-card: #f8f5ff;
  --flow-index-bg: #eee9ff;
  --flow-index-text: #6049bd;
}

.sf-modal--change-shift .sf-flow-builder__item.sf-flow-builder__item--kapten {
  --flow-border: #cfe5bd;
  --flow-soft: rgba(143, 191, 100, .14);
  --flow-card: #f7fbf1;
  --flow-index-bg: #edf7e4;
  --flow-index-text: #547b32;
}

.sf-modal--change-shift .sf-flow-builder__item.sf-flow-builder__item--kasir {
  --flow-border: #ead7b8;
  --flow-soft: rgba(227, 170, 84, .15);
  --flow-card: #fff9ef;
  --flow-index-bg: #fbefd9;
  --flow-index-text: #9a6a20;
}

.sf-modal--change-shift .sf-flow-builder__item.sf-flow-builder__item--default {
  --flow-border: #d7e2de;
  --flow-soft: rgba(47, 74, 69, .08);
  --flow-card: #f8fbfa;
  --flow-index-bg: #edf3f1;
  --flow-index-text: #2f4a45;
}

.sf-modal--change-shift .sf-flow-builder__index {
  border: 1px solid var(--flow-border);
  background: var(--flow-index-bg) !important;
  color: var(--flow-index-text) !important;
}

.sf-modal--change-shift .sf-flow-builder__text strong {
  color: #132033;
}

.sf-modal--change-shift .sf-flow-builder__text em {
  color: #66756f;
}

.sf-modal--change-shift .sf-flow-builder__item:hover {
  border-color: var(--flow-border) !important;
  background:
    radial-gradient(circle at 18% 0%, var(--flow-soft), transparent 42%),
    linear-gradient(135deg, #ffffff 0%, var(--flow-card) 100%) !important;
  box-shadow: 0 16px 30px rgba(31, 42, 55, .075);
  transform: translateY(-1px);
}

/* Final Add Shift layout guard: keep calendar, picker, and footer inside the modal. */
.sf-modal.sf-modal--shift {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(760px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.sf-modal.sf-modal--shift .sf-modal__head {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  background: #fff;
}

.sf-modal.sf-modal--shift .sf-modal__body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 16px;
}

.sf-modal.sf-modal--shift .sf-modal__foot {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  margin: 0;
  border-top: 1px solid rgba(216, 224, 220, .9);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -10px 24px rgba(15, 23, 42, .055);
}

.sf-modal.sf-modal--shift:has(.sf-shift-date-menu[open]) .sf-bulk-staff__list {
  max-height: 84px;
}

.sf-modal.sf-modal--shift .sf-shift-date-menu .sf-date-menu__panel {
  box-shadow: 0 12px 28px rgba(22, 34, 46, .11);
}

@media (max-height: 720px) {
  .sf-modal.sf-modal--shift {
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .sf-modal.sf-modal--shift .sf-modal__head {
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .sf-modal.sf-modal--shift .sf-modal__body {
    gap: 12px;
    padding-top: 8px;
  }
}

/* Final Shift Type visual system. */
.sf-modal.sf-modal--shift.is-edit {
  height: auto;
  max-height: calc(100dvh - 32px);
}

.sf-modal.sf-modal--shift .sf-modal__body {
  align-content: start;
}

.sf-modal.sf-modal--shift.is-edit .sf-fixed-value {
  min-height: 58px;
  align-content: center;
  padding: 11px 13px;
}

.sf-modal.sf-modal--shift .sf-shift-picker {
  gap: 9px;
  padding: 13px;
  border: 1px solid #e1e7e4;
  border-radius: 17px;
  background: linear-gradient(180deg, #fbfcfc 0%, #f7f9f8 100%);
}

.sf-modal.sf-modal--shift .sf-shift-picker > label {
  color: #344054;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.sf-modal.sf-modal--shift .sf-shift-options {
  gap: 8px;
}

.sf-modal.sf-modal--shift .sf-shift-choice__card {
  min-height: 61px;
  padding: 9px 10px;
  border: 1px solid #dce3e0;
  border-radius: 14px;
  background: #fff;
  color: #344054;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
  transform: none;
}

.sf-modal.sf-modal--shift .sf-shift-choice:hover .sf-shift-choice__card {
  border-color: #c6d2cd;
  background: #fff;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .065);
  transform: translateY(-1px);
}

.sf-modal.sf-modal--shift .sf-shift-choice__icon {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #f0f4f2;
  color: #52635e;
}

.sf-modal.sf-modal--shift .sf-shift-choice__copy strong {
  color: #263347;
  font-size: 11px;
  font-weight: 850;
}

.sf-modal.sf-modal--shift .sf-shift-choice__copy em {
  color: #84908b;
  font-size: 9px;
  font-weight: 700;
}

.sf-modal.sf-modal--shift .sf-shift-choice__selected {
  border: 1px solid #d8e0dc;
  background: #fff;
  color: transparent;
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card {
  border-color: var(--shift-accent, #249d83);
  background: var(--shift-soft, #effaf6);
  color: var(--shift-accent, #249d83);
  box-shadow: 0 0 0 3px var(--shift-ring, rgba(36, 157, 131, .10)), 0 8px 18px rgba(15, 23, 42, .055);
  transform: none;
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__icon {
  background: var(--shift-icon, #dff5ee);
  color: var(--shift-accent, #249d83);
  transform: none;
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__copy strong {
  color: var(--shift-text, #176b59);
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__copy em {
  color: var(--shift-muted, #568278);
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__selected {
  border-color: var(--shift-accent, #249d83);
  background: var(--shift-accent, #249d83);
}

.sf-modal.sf-modal--shift .sf-shift-choice--pagi {
  --shift-accent: #159f8b; --shift-soft: #effbf8; --shift-icon: #dcf6f0;
  --shift-ring: rgba(21, 159, 139, .10); --shift-text: #126d61; --shift-muted: #5a8179;
}
.sf-modal.sf-modal--shift .sf-shift-choice--malam {
  --shift-accent: #465569; --shift-soft: #f1f4f7; --shift-icon: #e1e7ed;
  --shift-ring: rgba(70, 85, 105, .11); --shift-text: #29374a; --shift-muted: #6f7b8c;
}
.sf-modal.sf-modal--shift .sf-shift-choice--change_malam {
  --shift-accent: #27856d; --shift-soft: #f0f8f5; --shift-icon: #deeee8;
  --shift-ring: rgba(39, 133, 109, .10); --shift-text: #276653; --shift-muted: #6b857c;
}
.sf-modal.sf-modal--shift .sf-shift-choice--off_change_pagi {
  --shift-accent: #7964b5; --shift-soft: #f6f3fb; --shift-icon: #ebe5f7;
  --shift-ring: rgba(121, 100, 181, .10); --shift-text: #59468e; --shift-muted: #81769d;
}
.sf-modal.sf-modal--shift .sf-shift-choice--off_day {
  --shift-accent: #b25f62; --shift-soft: #fcf3f3; --shift-icon: #f5e3e3;
  --shift-ring: rgba(178, 95, 98, .10); --shift-text: #8d484b; --shift-muted: #9c7476;
}

@media (max-width: 520px) {
  .sf-modal.sf-modal--shift .sf-shift-options { grid-template-columns: 1fr; }
}

/* Reduce nested-card styling in Add Shift controls. */
.sf-modal.sf-modal--shift .sf-staff-filters {
  gap: 18px;
  padding: 0 2px 5px;
  border-bottom: 1px solid #e5eae7;
}

.sf-modal.sf-modal--shift .sf-staff-filters button {
  position: relative;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7a8681;
  box-shadow: none;
  font-size: 9px;
  transition: color .16s ease;
}

.sf-modal.sf-modal--shift .sf-staff-filters button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: #239c82;
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .16s ease, transform .16s ease;
}

.sf-modal.sf-modal--shift .sf-staff-filters button:hover {
  border: 0;
  color: #344e47;
  transform: none;
}

.sf-modal.sf-modal--shift .sf-staff-filters button.is-active {
  border: 0;
  background: transparent;
  color: #16735e;
  box-shadow: none;
}

.sf-modal.sf-modal--shift .sf-staff-filters button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.sf-modal.sf-modal--shift .sf-shift-picker {
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sf-modal.sf-modal--shift .sf-shift-choice__card {
  border-color: #e2e7e5;
  border-radius: 12px;
  box-shadow: none;
}

.sf-modal.sf-modal--shift .sf-shift-choice:hover .sf-shift-choice__card {
  border-color: #cbd7d2;
  box-shadow: 0 3px 9px rgba(15, 23, 42, .045);
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card {
  box-shadow: none;
}

/* Compact role separators in the monthly shift preview. */
.sf-month-preview-table tbody tr.sf-month-group-row td {
  height: 2px;
  min-height: 2px;
  padding: 0;
  border-bottom-width: 1px;
  font-size: 0;
  line-height: 0;
}

/* Change Shift visual alignment with the simplified Add Shift modal. */
.sf-modal.sf-modal--change-shift {
  width: min(590px, calc(100vw - 32px));
  border: 1px solid #e0e6e3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
}

.sf-modal.sf-modal--change-shift .sf-modal__head {
  padding: 19px 22px 13px;
  border-bottom: 0;
  background: #fff;
}

.sf-modal.sf-modal--change-shift .sf-modal__head h3 {
  color: #172033;
  font-size: 16px;
  font-weight: 750;
}

.sf-modal.sf-modal--change-shift .sf-modal__body {
  gap: 18px;
  padding: 10px 22px 20px;
  background: #fff;
}

.sf-modal.sf-modal--change-shift .sf-field > label,
.sf-modal.sf-modal--change-shift .sf-change-flow__head span {
  color: #344054;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.sf-modal.sf-modal--change-shift .sf-change-flow__head span::before {
  content: none;
  display: none;
}

.sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #d5ded9;
  border-radius: 13px;
  background: linear-gradient(135deg, #f8fcfb, #fffdf9);
  color: #243044;
  font-size: 12px;
  font-weight: 750;
  box-shadow: none;
}

.sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:hover,
.sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:focus-visible,
.sf-modal.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger {
  border-color: #61bca8;
  background: #f0fbf8;
  box-shadow: 0 0 0 4px rgba(36, 164, 133, .1);
  transform: none;
}

.sf-modal.sf-modal--change-shift .sf-change-flow {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sf-modal.sf-modal--change-shift .sf-change-flow__head {
  margin: 0;
  padding: 0;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder {
  gap: 8px;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item {
  --flow-accent: #60716b;
  --flow-icon: #edf2f0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 58px;
  padding: 8px 9px 8px 10px;
  overflow: visible;
  border: 1px solid #e0e6e3 !important;
  border-radius: 13px;
  background: #fff !important;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item:hover {
  border-color: #c9d4cf !important;
  background: #fff !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
  transform: translateY(-1px);
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item--cs-line {
  --flow-accent: #188e7b; --flow-icon: #e4f6f1;
}
.sf-modal.sf-modal--change-shift .sf-flow-builder__item--cs-chat {
  --flow-accent: #6977a8; --flow-icon: #edf0f8;
}
.sf-modal.sf-modal--change-shift .sf-flow-builder__item--kapten {
  --flow-accent: #688348; --flow-icon: #eef5e7;
}
.sf-modal.sf-modal--change-shift .sf-flow-builder__item--kasir {
  --flow-accent: #9b7334; --flow-icon: #f8f0e3;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: var(--flow-icon) !important;
  color: var(--flow-accent) !important;
  font-size: 12px;
  font-weight: 850;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__text {
  gap: 2px;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__text strong {
  color: #263347;
  font-size: 11px;
  font-weight: 850;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__text em {
  color: #84908b;
  font-size: 9px;
  font-weight: 650;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__actions {
  gap: 5px;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__move {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid #dce3e0;
  border-radius: 10px;
  background: #f8faf9;
  color: #53635e;
  box-shadow: none;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__move:hover:not(:disabled) {
  border-color: #aec8bf;
  background: #edf7f3;
  color: #20745f;
  transform: translateY(-1px);
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__move:disabled {
  border-color: #edf0ef;
  background: #fafbfb;
  color: #c5ceca;
  opacity: 1;
}

.sf-modal.sf-modal--change-shift .sf-modal__foot {
  gap: 8px;
  padding: 14px 22px 19px;
  border-top: 1px solid #e4e9e7;
  background: #fff;
}

.sf-modal.sf-modal--change-shift .sf-modal__foot .sf-btn {
  min-height: 38px;
  border-radius: 13px;
}

/* Give Change Shift the same rounded, color-balanced finish as Add Shift. */
.sf-modal.sf-modal--change-shift {
  overflow: hidden !important;
  border-radius: 20px !important;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item {
  border-color: var(--flow-border-strong, #cbd9d4) !important;
  background: var(--flow-surface, #f4f9f7) !important;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item:hover {
  border-color: var(--flow-border-strong, #b8ccc4) !important;
  background: var(--flow-surface-hover, #eef8f4) !important;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item--cs-line {
  --flow-border-strong: #9eddd0;
  --flow-surface: #e9f9f5;
  --flow-surface-hover: #e1f6f0;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item--cs-chat {
  --flow-border-strong: #c8c9ef;
  --flow-surface: #f1f1fc;
  --flow-surface-hover: #eaeaFA;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item--kapten {
  --flow-border-strong: #c9dfad;
  --flow-surface: #f2f9e9;
  --flow-surface-hover: #ebf5df;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item--kasir {
  --flow-border-strong: #ecd2a4;
  --flow-surface: #fff7e9;
  --flow-surface-hover: #fff1da;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__text strong {
  color: var(--flow-accent) !important;
}

/* Change Shift timeline: show the order as one connected flow. */
.sf-modal.sf-modal--change-shift .sf-flow-builder {
  position: relative;
  gap: 0;
  padding: 2px 0;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 66px;
  padding: 10px 9px 10px 10px;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: -18px;
  left: 28px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--flow-accent), rgba(148, 163, 184, .23));
  opacity: .55;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item:last-child::after {
  display: none;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item:hover {
  background: rgba(248, 251, 250, .86) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__index {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border: 2px solid var(--flow-accent);
  border-radius: 50%;
  background: #fff !important;
  box-shadow: 0 0 0 4px var(--flow-icon);
  font-size: 12px;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__text {
  align-content: center;
  min-height: 42px;
  padding: 0 2px;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__text strong {
  color: #253347 !important;
  font-size: 12px;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__text em {
  color: #738079;
  font-size: 10px;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__actions {
  align-self: center;
  padding: 4px;
  border: 1px solid #e1e7e4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .035);
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__move {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__move:hover:not(:disabled) {
  background: var(--flow-icon);
  transform: none;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__move:disabled {
  background: transparent;
}

.sf-modal.sf-modal--change-shift .sf-flow-builder__item.is-moving .sf-flow-builder__index {
  animation: sf-flow-node-move .3s cubic-bezier(.2, .85, .2, 1);
}

@keyframes sf-flow-node-move {
  0% { transform: scale(.88); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Share Shift: compact daily briefing instead of a single text block. */
.sf-modal.sf-modal--share {
  width: min(560px, calc(100vw - 32px));
  border-radius: 20px;
  overflow: hidden;
}

.sf-modal.sf-modal--share .sf-modal__head {
  padding: 19px 22px 13px;
  border-bottom: 0;
}

.sf-modal.sf-modal--share .sf-modal__head h3 {
  color: #172033;
  font-size: 16px;
  font-weight: 750;
}

.sf-modal.sf-modal--share .sf-share-modal__body {
  gap: 12px;
  padding: 10px 22px 19px;
  background: #fff;
}

.sf-share-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 17px;
  border: 1px solid #cde2da;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(39, 166, 134, .14), transparent 42%),
    linear-gradient(135deg, #f4fcf9 0%, #fffdf9 100%);
}

.sf-share-hero__date { display: grid; gap: 4px; }
.sf-share-hero__date span { color: #698078; font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.sf-share-hero__date strong { color: #1c2b3d; font-size: 22px; font-weight: 850; line-height: 1.05; }
.sf-share-hero__status { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px; background: #e2f6ee; color: #17775f; font-size: 10px; font-weight: 800; white-space: nowrap; }

.sf-share-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sf-share-summary span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid #e1e8e4;
  border-radius: 12px;
  background: #fbfcfc;
  color: #75817c;
  font-size: 9px;
  font-weight: 700;
}

.sf-share-summary strong { color: #26384b; font-size: 15px; font-weight: 850; }

.sf-share-brief {
  display: grid;
  gap: 8px;
}

.sf-share-brief__section {
  --brief-accent: #198c78;
  --brief-icon: #e2f7f1;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  padding: 11px;
  border: 1px solid #dfe7e3;
  border-radius: 14px;
  background: #fff;
}

.sf-share-brief__section--change { --brief-accent: #198c78; --brief-icon: #e2f7f1; }
.sf-share-brief__section--off-change { --brief-accent: #62759b; --brief-icon: #ebeff8; }
.sf-share-brief__section--off { --brief-accent: #a27635; --brief-icon: #faf0df; }
.sf-share-brief__section--cuti { --brief-accent: #a95f65; --brief-icon: #fae9ea; }

.sf-share-brief__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brief-icon); color: var(--brief-accent); font-size: 14px; }
.sf-share-brief__content { display: grid; gap: 7px; min-width: 0; }
.sf-share-brief__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sf-share-brief__head > div { display: grid; gap: 2px; min-width: 0; }
.sf-share-brief__head strong { color: #2b394d; font-size: 11px; font-weight: 850; }
.sf-share-brief__head span { color: #7b8782; font-size: 9px; font-weight: 650; }
.sf-share-brief__head em { display: grid; place-items: center; flex: 0 0 21px; width: 21px; height: 21px; border-radius: 999px; background: var(--brief-icon); color: var(--brief-accent); font-size: 10px; font-style: normal; font-weight: 850; }
.sf-share-brief ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sf-share-brief li { color: #52615b; font-size: 10px; font-weight: 750; }
.sf-share-brief li::before { content: "•"; margin-right: 6px; color: var(--brief-accent); }

.sf-share-format { border: 1px solid #e1e8e4; border-radius: 13px; background: #fbfcfc; }
.sf-share-format summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 12px; color: #5b6a64; cursor: pointer; font-size: 10px; font-weight: 800; list-style: none; }
.sf-share-format summary::-webkit-details-marker { display: none; }
.sf-share-format summary span { display: inline-flex; align-items: center; gap: 7px; }
.sf-share-format summary span i { color: #269b7d; font-size: 13px; }
.sf-share-format summary > i { transition: transform .16s ease; }
.sf-share-format[open] summary > i { transform: rotate(180deg); }
.sf-share-format pre { max-height: 210px; margin: 0; padding: 0 12px 12px; overflow: auto; color: #52615b; font: 10px/1.5 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; }

.sf-modal.sf-modal--share .sf-modal__foot--share { padding: 13px 22px 18px; border-top: 1px solid #e4e9e7; background: #fff; }
.sf-modal.sf-modal--share .sf-modal__foot--share .sf-btn--primary { min-width: 0; border-radius: 13px; background: #2f6754; }

@media (max-width: 520px) {
  .sf-share-hero { align-items: flex-start; flex-direction: column; }
  .sf-share-summary { grid-template-columns: 1fr; }
}

/* Share Shift update feed: surface only the changes that matter. */
.sf-modal.sf-modal--share .sf-share-modal__body {
  gap: 15px;
  padding-top: 14px;
}

.sf-modal.sf-modal--share .sf-share-hero {
  align-items: center;
  padding: 14px 16px;
  border-color: #d8e6e0;
  border-radius: 15px;
  background: linear-gradient(135deg, #f8fcfa 0%, #fffdf9 100%);
}

.sf-modal.sf-modal--share .sf-share-hero__date strong {
  font-size: 23px;
}

.sf-share-feed {
  position: relative;
  display: grid;
  gap: 0;
  padding: 1px 0;
}

.sf-share-feed__item {
  --feed-accent: #198c78;
  --feed-icon: #e2f7f1;
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-height: 70px;
  padding: 8px 1px;
}

.sf-share-feed__item--change { --feed-accent: #198c78; --feed-icon: #e2f7f1; }
.sf-share-feed__item--off-change { --feed-accent: #62759b; --feed-icon: #ebeff8; }
.sf-share-feed__item--off { --feed-accent: #a27635; --feed-icon: #faf0df; }
.sf-share-feed__item--cuti { --feed-accent: #a95f65; --feed-icon: #fae9ea; }

.sf-share-feed__item::after {
  content: "";
  position: absolute;
  top: 49px;
  bottom: -10px;
  left: 19px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--feed-accent), rgba(148, 163, 184, .22));
  opacity: .52;
}

.sf-share-feed__item:last-child::after { display: none; }
.sf-share-feed__node { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--feed-accent); border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--feed-icon); color: var(--feed-accent); font-size: 13px; }
.sf-share-feed__content { display: grid; align-content: center; gap: 6px; min-height: 48px; padding: 1px 0; }
.sf-share-feed__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sf-share-feed__head > div { display: grid; gap: 2px; min-width: 0; }
.sf-share-feed__head strong { color: #27364a; font-size: 12px; font-weight: 850; }
.sf-share-feed__head span { color: #7b8782; font-size: 10px; font-weight: 650; }
.sf-share-feed__head em { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px; background: var(--feed-icon); color: var(--feed-accent); font-size: 10px; font-style: normal; font-weight: 850; }
.sf-share-feed ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.sf-share-feed li { color: #53615b; font-size: 10px; font-weight: 750; }
.sf-share-feed li::before { content: "•"; margin-right: 6px; color: var(--feed-accent); }

.sf-share-feed__empty { display: grid; justify-items: center; gap: 5px; padding: 22px 12px; border: 1px dashed #d6e2dc; border-radius: 15px; color: #708078; text-align: center; }
.sf-share-feed__empty i { color: #27977d; font-size: 20px; }
.sf-share-feed__empty strong { color: #3b5149; font-size: 12px; }
.sf-share-feed__empty span { font-size: 10px; font-weight: 650; }

.sf-modal.sf-modal--share .sf-share-format {
  border-color: #dce6e1;
  background: #fff;
}

.sf-modal.sf-modal--share .sf-share-format summary {
  min-height: 38px;
  color: #60716a;
}

.sf-modal.sf-modal--share .sf-share-format summary span i {
  color: #2a8f77;
}

/* Final Quiet Matrix overrides. */
.sf-schedule-table .sf-shift-cell { padding: 4px 6px; background: #fcfdfd; }
.sf-schedule-table .sf-shift-card { min-height: 26px; border-radius: 7px; box-shadow: none; }
.sf-schedule-table .sf-shift-card--pagi { border-color: #d4e4f5; background: #f4f8fd; color: #3976b0; }
.sf-schedule-table .sf-shift-card--malam { border-color: #dde3e8; background: #f5f7f9; color: #667789; }
.sf-schedule-table .sf-shift-card--quiet { width: 28px; min-width: 28px; min-height: 26px; margin: 0 auto; padding: 0; }
.sf-schedule-table .sf-shift-card--quiet strong { padding: 0; }
.sf-schedule-table .sf-shift-card--quiet .sf-shift-label { display: none; }
.sf-schedule-table .sf-shift-card--quiet strong i { font-size: 10px; font-weight: 900; }
.sf-schedule-table .sf-shift-card--pagi.sf-shift-card--quiet strong i { color: #3e7fbd; }
.sf-schedule-table .sf-shift-card--malam.sf-shift-card--quiet strong i { color: #6d7c8b; }
.sf-schedule-table .sf-shift-card--change_malam,
.sf-schedule-table .sf-shift-card--off_change_pagi,
.sf-schedule-table .sf-shift-card--cuti,
.sf-schedule-table .sf-shift-card--off_day { min-height: 26px; box-shadow: none; }
.sf-schedule-table .sf-shift-card--change_malam { background: #eef8f4; }
.sf-schedule-table .sf-shift-card--off_change_pagi { background: #f5f2fb; }
.sf-schedule-table .sf-shift-card--cuti { background: #fff9eb; }
.sf-schedule-table .sf-shift-card--off_day { background: #fff4f5; }
.sf-schedule-table .sf-shift-cell.is-active-col { background: #f3f7fc; }
.sf-schedule-table .sf-shift-cell.is-hovered-col.is-hovered-row { background: #f0f5fa; }
.sf-schedule-table .sf-shift-cell.is-hovered-col.is-hovered-row .sf-shift-card { box-shadow: 0 2px 6px rgba(45, 76, 108, .08); }

/* Final guard: lanes must retain their solid contrast over schedule defaults. */
.sf-schedule-table .sf-shift-cell.sf-lane-cell {
  padding: 5px 0;
  background: #fff;
}

.sf-schedule-table .sf-shift-card.sf-shift-card--lane {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  visibility: visible;
  color: #fff;
  background: #3b86d1;
  box-shadow: none;
  filter: none;
}

.sf-schedule-table .sf-lane-cell--malam .sf-shift-card.sf-shift-card--lane {
  background: #26394f;
}

.sf-schedule-table .sf-shift-card.sf-shift-card--lane strong {
  display: none;
  opacity: 1;
  color: #fff;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane {
  justify-content: flex-start;
  margin-left: 5px;
  border-radius: 7px 0 0 7px;
}

.sf-schedule-table .sf-lane-cell.is-run-end .sf-shift-card.sf-shift-card--lane {
  margin-right: 5px;
  border-radius: 0 7px 7px 0;
}

.sf-schedule-table .sf-lane-cell.is-run-start.is-run-end .sf-shift-card.sf-shift-card--lane {
  border-radius: 7px;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane strong {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  padding: 0 9px;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane .sf-shift-code {
  display: none;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane .sf-shift-label {
  display: inline;
}

.sf-schedule-table .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane strong i {
  color: #fff !important;
  font-size: 9px;
}

/* Exception shifts occupy the same visual lane as Pagi and Malam. */
.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) {
  width: 100%;
  min-width: 0;
  min-height: 23px;
  border-width: 0;
  border-radius: 0;
  box-shadow: none;
}

.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) strong {
  display: grid;
  place-items: center;
}

.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) strong {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) strong i,
.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) .sf-shift-code {
  display: none;
}

.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) .sf-shift-label {
  display: inline;
  color: #fff;
}

.sf-schedule-table .sf-shift-card--change_malam.sf-shift-card--quiet {
  border-color: #1e2937;
  background: #1f2937;
  color: #f5cf5d;
}

.sf-schedule-table .sf-shift-card--off_change_pagi.sf-shift-card--quiet {
  border-color: #7057a8;
  background: #896bc7;
  color: #fff;
}

.sf-schedule-table .sf-shift-card--cuti.sf-shift-card--quiet {
  border-color: #d89e18;
  background: #e2aa2b;
  color: #182332;
}

.sf-schedule-table .sf-shift-card--off_day.sf-shift-card--quiet {
  border-color: #b8424f;
  background: #cf5963;
  color: #ffe08a;
}

.sf-schedule-table .sf-shift-card--change_malam.sf-shift-card--quiet .sf-shift-label {
  color: #f5cf5d;
}

.sf-schedule-table .sf-shift-card--cuti.sf-shift-card--quiet .sf-shift-label {
  color: #182332;
}

.sf-schedule-table .sf-shift-card--off_day.sf-shift-card--quiet .sf-shift-label {
  color: #ffe08a;
}

.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) strong i {
  color: #fff !important;
  font-size: 10px;
}

/* Use the same edge-to-edge cell geometry for every non-regular shift. */
.sf-schedule-table .sf-shift-cell.sf-exception-cell {
  padding: 5px 0;
  background: #fff;
}

.sf-schedule-table .sf-shift-cell.sf-exception-cell.is-active-col,
.sf-schedule-table .sf-shift-cell.sf-exception-cell.is-hovered-col.is-hovered-row {
  background: #f4f8fc;
}

.sf-schedule-table .sf-shift-cell.sf-exception-cell.is-month-end .sf-shift-card--quiet {
  width: calc(100% - 5px);
  margin-right: 5px;
  border-radius: 0 7px 7px 0;
}


/* Keep long Pagi/Malam lanes legible without repeating their labels. */
.sf-schedule-table .sf-lane-cell:not(.is-run-start) .sf-shift-card.sf-shift-card--lane strong {
  display: grid;
  place-items: center;
  min-height: 23px;
  padding: 0;
}

.sf-schedule-table .sf-lane-cell:not(.is-run-start) .sf-shift-card.sf-shift-card--lane .sf-shift-code,
.sf-schedule-table .sf-lane-cell:not(.is-run-start) .sf-shift-card.sf-shift-card--lane .sf-shift-label {
  display: none;
}

.sf-schedule-table .sf-lane-cell:not(.is-run-start) .sf-shift-card.sf-shift-card--lane strong i {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 9px;
}

/* Restore the light grid; only reinforce the first join after a labelled lane start. */
.sf-schedule-table .sf-lane-cell.is-run-start + .sf-lane-cell .sf-shift-card.sf-shift-card--lane {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .28);
}

/* Give compact lane labels enough baseline room for descenders such as g and y. */
.sf-schedule-table .sf-shift-cell.sf-lane-cell,
.sf-schedule-table .sf-shift-cell.sf-exception-cell {
  padding-top: 4px;
  padding-bottom: 4px;
}

.sf-schedule-table .sf-shift-card.sf-shift-card--lane,
.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) {
  min-height: 25px;
}

.sf-schedule-table .sf-shift-card.sf-shift-card--lane strong,
.sf-schedule-table .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) strong {
  min-height: 25px;
  line-height: 1.25;
}

/* A selected day stays visible even when it is also today. */
.sf-schedule-table .sf-day-head.is-active-day,
.sf-schedule-table .sf-day-head.is-active-day.is-today {
  background: #dfe4e8;
  box-shadow: none;
}

.sf-schedule-table .sf-day-head.is-active-day .sf-day-tab span,
.sf-schedule-table .sf-day-head.is-active-day .sf-day-tab strong,
.sf-schedule-table .sf-day-head.is-active-day.is-today .sf-day-tab strong {
  color: #2f3b48;
}

.sf-schedule-table .sf-shift-cell.is-active-col,
.sf-schedule-table .sf-shift-cell.sf-exception-cell.is-active-col {
  background: #e9edf1;
}

.sf-schedule-table .sf-total-count.is-active-col {
  background: #dfe4e8;
}

.sf-schedule-table .sf-total-count.is-active-col strong {
  color: #2f3b48;
}

.sf-schedule-table .sf-total-count.is-active-col span {
  color: #7b8794;
}

.sf-schedule-table .sf-day-head.is-active-day.is-hovered-col {
  background: #d2d8de;
  box-shadow: none;
}

.sf-schedule-table .sf-day-head.is-active-day.is-hovered-col .sf-day-tab span,
.sf-schedule-table .sf-day-head.is-active-day.is-hovered-col .sf-day-tab strong {
  color: #26313d;
}

.sf-schedule-table .sf-shift-cell.is-active-col.is-hovered-col,
.sf-schedule-table .sf-shift-cell.sf-exception-cell.is-active-col.is-hovered-col {
  background: #dde3e8;
}

.sf-schedule-table .sf-total-count.is-active-col.is-hovered-col {
  background: #d2d8de;
}

/* Shift choices retain their identity before selection and gain a firmer selected state. */
.sf-modal.sf-modal--shift .sf-shift-choice--pagi { --choice-border: #2f80cf; --choice-icon: #2778c7; --choice-soft: #eef5ff; --choice-ring: rgba(47, 128, 207, .14); }
.sf-modal.sf-modal--shift .sf-shift-choice--malam { --choice-border: #344b66; --choice-icon: #344b66; --choice-soft: #f1f4f7; --choice-ring: rgba(52, 75, 102, .14); }
.sf-modal.sf-modal--shift .sf-shift-choice--change_malam { --choice-border: #1f2937; --choice-icon: #d5a72e; --choice-soft: #f5f7f9; --choice-ring: rgba(31, 41, 55, .15); }
.sf-modal.sf-modal--shift .sf-shift-choice--off_change_pagi { --choice-border: #8064bd; --choice-icon: #8064bd; --choice-soft: #f5f1fb; --choice-ring: rgba(128, 100, 189, .14); }
.sf-modal.sf-modal--shift .sf-shift-choice--cuti { --choice-border: #d89e18; --choice-icon: #c98f13; --choice-soft: #fff8e8; --choice-ring: rgba(216, 158, 24, .14); }
.sf-modal.sf-modal--shift .sf-shift-choice--off_day { --choice-border: #cf5963; --choice-icon: #c74d58; --choice-soft: #fff2f3; --choice-ring: rgba(207, 89, 99, .14); }

.sf-modal.sf-modal--shift .sf-shift-choice .sf-shift-choice__card {
  border-color: var(--choice-border);
}

.sf-modal.sf-modal--shift .sf-shift-choice .sf-shift-choice__icon {
  background: var(--choice-soft);
  color: var(--choice-icon);
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card {
  border-width: 2px;
  border-color: var(--choice-border);
  background: var(--choice-soft);
  box-shadow: 0 0 0 2px var(--choice-ring);
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__icon {
  background: #fff;
  color: var(--choice-icon);
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__icon i {
  color: var(--choice-icon) !important;
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__selected {
  border-color: var(--choice-border);
  background: var(--choice-border);
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__copy strong {
  color: var(--choice-border);
}

.sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__copy em {
  color: var(--choice-border);
  opacity: .72;
}

/* Compact action menu for a selected schedule shift. */
.sf-shift-action-menu {
  position: fixed;
  z-index: 120;
  min-width: 142px;
  padding: 5px;
  border: 1px solid #d8e0e4;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 34, 48, .14);
  animation: sf-shift-action-in .14s ease both;
}

.sf-shift-action-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}

.sf-shift-action-menu button i { color: #52647a; }
.sf-shift-action-menu button.is-danger { color: #c43f50; }
.sf-shift-action-menu button.is-danger i { color: #cf5963; }
.sf-shift-action-menu button:hover,
.sf-shift-action-menu button:focus-visible { background: #eef1f3; color: #1f2937; outline: 0; }
.sf-shift-action-menu button.is-danger:hover,
.sf-shift-action-menu button.is-danger:focus-visible { background: #fff1f2; color: #b42336; }

/* Compact the management choices into one focused control panel. */
.sf-modal.sf-modal--shift.sf-modal--manage-shift {
  width: min(520px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 32px);
  grid-template-rows: auto auto auto;
}
.sf-modal.sf-modal--shift.sf-modal--manage-shift .sf-modal__body { overflow: visible; padding-top: 14px; padding-bottom: 14px; }
.sf-modal.sf-modal--shift.sf-modal--manage-shift .sf-modal__foot { box-shadow: none; }
.sf-manage-shift__intro { margin: 0 0 10px; color: #718096; font-size: 11px; font-weight: 700; }
.sf-manage-shift__options { display: grid; gap: 0; overflow: hidden; border: 1px solid #dbe4e1; border-radius: 15px; background: #fff; }
.sf-manage-shift__option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 60px;
  gap: 11px;
  padding: 9px 12px;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #e6ece9;
  border-radius: 0;
  background: #fff;
  color: #243247;
  text-align: left;
}
.sf-manage-shift__option:last-child { border-bottom: 0; }
.sf-manage-shift__option:hover,
.sf-manage-shift__option:focus-visible { transform: none; outline: 0; box-shadow: inset 0 0 0 1px rgba(34, 53, 73, .04); }
.sf-manage-shift__option > span:nth-child(2) { display: grid; gap: 3px; }
.sf-manage-shift__option strong { font-size: 12px; font-weight: 850; }
.sf-manage-shift__option em { color: #7a8794; font-size: 9.5px; font-style: normal; font-weight: 650; }
.sf-manage-shift__option > i { color: #8794a1; font-size: 11px; }
.sf-manage-shift__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #eef5f2; color: #208467; }
.sf-manage-shift__option.is-add { border-left-color: #35a787; }
.sf-manage-shift__option.is-add:hover { background: #f4fbf8; }
.sf-manage-shift__option.is-leave .sf-manage-shift__icon { background: #fff4dc; color: #bd8611; }
.sf-manage-shift__option.is-leave { border-left-color: #dfaa2d; }
.sf-manage-shift__option.is-leave:hover { background: #fffaf0; }
.sf-manage-shift__option.is-delete .sf-manage-shift__icon { background: #fff0f2; color: #cf5963; }
.sf-manage-shift__option.is-delete { border-left-color: #d55b68; }
.sf-manage-shift__option.is-delete:hover { background: #fff6f7; }

@keyframes sf-shift-action-in {
  from { opacity: 0; transform: translateY(-3px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Monthly Canvas: retain every day of the month without horizontal scrolling. */
.sf-modal--month-preview {
  width: min(1880px, calc(100vw - 18px));
  border-radius: 20px;
  background: #fff;
}

.sf-modal--month-preview .sf-month-preview__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e3e8e6;
}

.sf-modal--month-preview .sf-month-preview__head h3 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.sf-modal--month-preview .sf-month-preview__body {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 9px 12px 12px;
}

.sf-modal--month-preview .sf-month-legend {
  justify-self: center;
  flex-wrap: nowrap;
  gap: 5px 13px;
  min-height: 0;
  color: #667085;
  font-size: 10px;
}

.sf-modal--month-preview .sf-month-preview__head > .sf-modal__close {
  justify-self: end;
}

.sf-modal--month-preview .sf-month-legend .sf-month-badge {
  width: 26px;
  min-width: 26px;
  height: 14px;
  border-radius: 4px;
  font-size: 7px;
}

.sf-modal--month-preview .sf-month-preview__table-wrap {
  overflow-x: hidden;
  overflow-y: hidden;
  border-color: #dce3e0;
  border-radius: 12px;
  background: #fbfcfb;
}

.sf-modal--month-preview .sf-month-preview-table {
  height: auto;
  background: #fbfcfb;
}

.sf-modal--month-preview .sf-month-role-col { width: 54px; }
.sf-modal--month-preview .sf-month-name-col { width: 190px; }

.sf-modal--month-preview .sf-month-preview-table th,
.sf-modal--month-preview .sf-month-preview-table td {
  border-color: #dde4e1;
}

.sf-modal--month-preview .sf-month-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 34px;
  background: #f3f6f4;
}

.sf-modal--month-preview .sf-month-preview-table thead th.is-today {
  background: #dfe4e8;
  box-shadow: inset 0 -2px 0 #5f6d7b;
}

.sf-modal--month-preview .sf-month-preview-table thead span {
  color: #8491a1;
  font-size: 7px;
}

.sf-modal--month-preview .sf-month-preview-table thead strong {
  color: #344054;
  font-size: 10px;
}

.sf-modal--month-preview .sf-month-preview-table tbody td {
  height: var(--sf-month-preview-row-height, 15px);
  min-height: 0;
  padding: 0;
  background: #fff;
}

.sf-modal--month-preview .sf-month-preview-table tbody tr {
  height: var(--sf-month-preview-row-height, 15px);
}

.sf-modal--month-preview .sf-month-preview-table tbody td.sf-month-role,
.sf-modal--month-preview .sf-month-preview-table tbody td.sf-month-name {
  padding: 0 8px;
  background: #fbfcfb;
}

.sf-modal--month-preview .sf-month-role {
  color: #61738a;
  font-size: 7px;
}

.sf-modal--month-preview .sf-month-name {
  color: #253347;
  font-size: 9px;
  font-weight: 850;
}

/* A light row tint keeps each staff category readable without spacer rows. */
.sf-modal--month-preview .sf-month-preview-table tbody tr.sf-month-group--cs-line td { background: #f5faf7; }
.sf-modal--month-preview .sf-month-preview-table tbody tr.sf-month-group--cs-chat td { background: #f5f8fc; }
.sf-modal--month-preview .sf-month-preview-table tbody tr.sf-month-group--kapten td { background: #f8f6fc; }
.sf-modal--month-preview .sf-month-preview-table tbody tr.sf-month-group--kasir td { background: #fff9f0; }
.sf-modal--month-preview .sf-month-preview-table tbody tr.sf-month-group--lainnya td { background: #f7f8f8; }

.sf-modal--month-preview .sf-month-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: max(7px, calc(var(--sf-month-preview-row-height, 15px) - 2px));
  min-height: 0;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
}

.sf-modal--month-preview .sf-month-badge i { font-size: 6px; }
.sf-modal--month-preview .sf-month-badge span:empty { display: none; }
.sf-modal--month-preview button.sf-month-badge:hover { filter: brightness(1.05); transform: none; box-shadow: none; }

.sf-modal--month-preview .sf-month-badge--pagi { background: #3d89d2; color: #fff; }
.sf-modal--month-preview .sf-month-badge--malam { background: #253b54; color: #fff; }
.sf-modal--month-preview .sf-month-badge--change_malam { background: #1f2937; color: #f5cf5d; }
.sf-modal--month-preview .sf-month-badge--off_change_pagi { background: #8064bd; color: #fff; }
.sf-modal--month-preview .sf-month-badge--cuti { background: #e2aa2b; color: #182332; }
.sf-modal--month-preview .sf-month-badge--off_day { background: #cf5963; color: #ffe08a; }

.sf-modal--month-preview .sf-month-badge--lane.is-run-start { margin-left: 3px; width: calc(100% - 3px); border-radius: 6px 0 0 6px; }
.sf-modal--month-preview .sf-month-badge--lane.is-run-end { margin-right: 3px; width: calc(100% - 3px); border-radius: 0 6px 6px 0; }
.sf-modal--month-preview .sf-month-badge--lane.is-run-start.is-run-end { width: calc(100% - 6px); margin-left: 3px; border-radius: 6px; }
.sf-modal--month-preview .sf-month-badge.is-month-end { margin-right: 3px; width: calc(100% - 3px); border-radius: 0 6px 6px 0; }
.sf-modal--month-preview .sf-month-badge--empty { color: #c1cad4; background: transparent; }

.sf-modal--month-preview.is-auto-condensed .sf-month-preview-table tbody td.sf-month-role,
.sf-modal--month-preview.is-auto-condensed .sf-month-preview-table tbody td.sf-month-name {
  padding-top: 0;
  padding-bottom: 0;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-badge {
  font-size: 6px;
}

/* Staff directory: compact controls and table-first layout. */
.sf-page--staff .sf-toolbar {
  min-height: 62px;
  padding: 10px 24px;
  gap: 16px;
}

.sf-page--staff .sf-title-block h1 {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.sf-page--staff .sf-toolbar__right { gap: 12px; }

.sf-page--staff .sf-search {
  width: 252px;
}

.sf-page--staff .sf-search input {
  height: 40px;
  border-color: #dbe2ea;
  border-radius: 12px;
  background: #f7f9fc;
  font-size: 13px;
}

.sf-page--staff .sf-search input:hover { border-color: #c8d4e0; background: #fff; }

.sf-page--staff .sf-btn--primary {
  min-height: 40px;
  border-radius: 12px;
  padding: 0 15px;
  box-shadow: 0 5px 13px rgba(36, 49, 67, .13);
}

.sf-staff-status-filter {
  position: relative;
  z-index: 12;
  min-width: 166px;
}

.sf-staff-status-filter__trigger {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 12px;
  align-items: center;
  width: 100%;
  height: 40px;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #fff;
  color: #344255;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.sf-staff-status-filter__trigger > i:first-child { color: #4f7eae; font-size: 12px; }
.sf-staff-status-filter__trigger > i:last-child { color: #8290a1; font-size: 10px; transition: transform .18s ease; }
.sf-staff-status-filter__trigger:hover,
.sf-staff-status-filter__trigger:focus-visible,
.sf-staff-status-filter.is-open .sf-staff-status-filter__trigger {
  border-color: #aebfd1;
  background: #fbfdff;
  box-shadow: 0 0 0 4px rgba(67, 121, 177, .09);
}
.sf-staff-status-filter.is-open .sf-staff-status-filter__trigger > i:last-child { transform: rotate(180deg); }

.sf-staff-status-filter__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 7px;
  border: 1px solid #d9e1ea;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 15px 32px rgba(31, 47, 66, .14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease;
}

.sf-staff-status-filter.is-open .sf-staff-status-filter__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sf-staff-status-filter__option {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) 12px;
  align-items: center;
  min-height: 34px;
  gap: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #526174;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.sf-staff-status-filter__option > i:first-child { color: #8090a2; font-size: 11px; }
.sf-staff-status-filter__option > i:last-child { color: #356da7; font-size: 10px; }
.sf-staff-status-filter__option:hover,
.sf-staff-status-filter__option:focus-visible { background: #f1f6fb; color: #263d57; transform: translateX(2px); }
.sf-staff-status-filter__option.is-selected { background: #e9f2fb; color: #245b93; }
.sf-staff-status-filter__option.is-selected > i:first-child { color: #3d7aba; }

.sf-page--staff .sf-list-toolbar {
  min-height: 48px;
  padding: 0 24px;
  background: #fff;
}

.sf-staff-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: #718096;
}

.sf-staff-summary > i { color: #4c83bd; font-size: 12px; }
.sf-staff-summary strong { color: #1f3956; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.sf-staff-summary span { font-size: 12px; font-weight: 700; }

.sf-page--staff .sf-staff-table-wrap,
.sf-page--staff .sf-staff-table { background: #fff; }

.sf-page--staff .sf-staff-table th,
.sf-page--staff .sf-staff-table td { padding: 12px 20px; }
.sf-page--staff .sf-staff-table th { background: #f8fafc; color: #74839a; }
.sf-page--staff .sf-staff-table tbody tr:hover { background: #f6f9fc; }
.sf-page--staff .sf-staff-table td strong { font-size: 12px; font-weight: 800; }

.sf-page--staff .sf-status {
  min-height: 0;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}
.sf-page--staff .sf-status::before { width: 6px; height: 6px; }
.sf-page--staff .sf-status--inactive { color: #778396; }

.sf-page--staff .sf-row-actions { gap: 6px; }
.sf-page--staff .sf-mini-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border-color: #dce4ec;
  background: #fff;
  color: #5b6d82;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sf-page--staff .sf-mini-btn:hover,
.sf-page--staff .sf-mini-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(45, 64, 87, .12); }
.sf-page--staff .sf-mini-btn--edit:hover,
.sf-page--staff .sf-mini-btn--edit:focus-visible { border-color: #a8c9e8; background: #edf6ff; color: #286eae; }
.sf-page--staff .sf-mini-btn--delete:hover,
.sf-page--staff .sf-mini-btn--delete:focus-visible { border-color: #f3bec5; background: #fff1f2; color: #cf4655; }

/* Staff form: dropdown options expand in-flow, so they can never cover the footer. */
.sf-modal--staff {
  width: min(520px, 100%);
  border-radius: 18px;
  border-color: #d8e2ec;
  background: #fff;
}
.sf-modal--staff .sf-modal__head {
  padding: 20px 22px 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(61, 137, 210, .13), transparent 34%),
    linear-gradient(110deg, #fbfdff 0%, #f7fbff 100%);
}
.sf-modal--staff .sf-modal__head h3 { color: #19324e; }
.sf-modal--staff .sf-modal__body { gap: 15px; padding: 20px 22px; overflow-y: auto; background: #fff; }
.sf-modal--staff .sf-modal__foot { padding: 14px 22px; border-top-color: #e0e8f0; background: #fbfcfe; }
.sf-modal--staff .sf-field label { color: #627488; }
.sf-modal--staff .sf-field input { min-height: 46px; border-color: #d9e1e8; background: #f8fbff; }
.sf-modal--staff .sf-field input:focus { border-color: #8ebae3; box-shadow: 0 0 0 4px rgba(61, 137, 210, .11); }
.sf-modal--staff .sf-field .sf-custom-select { z-index: auto; }
.sf-modal--staff .sf-custom-select__button {
  min-height: 46px;
  border-color: #d9e1e8;
  border-radius: 12px;
  background: #f8fbff;
}
.sf-modal--staff .sf-custom-select__menu {
  position: static;
  gap: 5px;
  width: 100%;
  margin-top: 0;
  padding: 0;
  border-width: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
  box-shadow: none;
}
.sf-modal--staff .sf-custom-select.is-open .sf-custom-select__menu {
  max-height: 210px;
  margin-top: 8px;
  padding: 7px;
  border-width: 1px;
  border-color: #d9e1e8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 22px rgba(40, 69, 99, .08);
}
.sf-modal--staff .sf-custom-select__option {
  min-height: 35px;
  gap: 8px;
  padding: 0 10px;
  border-radius: 9px;
  font-weight: 750;
}
.sf-modal--staff .sf-custom-select__option::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b9fd0;
  box-shadow: 0 0 0 3px rgba(107, 159, 208, .12);
}
.sf-modal--staff .sf-custom-select__option:nth-child(2)::before { background: #2fa277; box-shadow: 0 0 0 3px rgba(47, 162, 119, .12); }
.sf-modal--staff .sf-custom-select__option:nth-child(3)::before { background: #c48a38; box-shadow: 0 0 0 3px rgba(196, 138, 56, .12); }
.sf-modal--staff .sf-custom-select__option:nth-child(4)::before { background: #8267c1; box-shadow: 0 0 0 3px rgba(130, 103, 193, .12); }
.sf-modal--staff .sf-custom-select__option:hover,
.sf-modal--staff .sf-custom-select__option:focus-visible { background: #e9f3ff; color: #245d97; transform: translateX(2px); }
.sf-modal--staff .sf-custom-select__option.is-selected { background: #dfefff; color: #1e5e9c; }

/* Attendance: soft shift lanes with stronger status hierarchy. */
.sf-attendance-section--pagi {
  border-left: 4px solid #3f8fde;
  background: linear-gradient(180deg, #f2f8ff 0%, #eaf4ff 100%);
}
.sf-attendance-section--malam {
  border-left: 4px solid #263b55;
  background: linear-gradient(180deg, #f0f3f8 0%, #e8eef6 100%);
}
.sf-attendance-section--pagi .sf-attendance-shift-title {
  background: linear-gradient(180deg, #e8f3ff 0%, #dcecff 100%);
}
.sf-attendance-section--malam .sf-attendance-shift-title {
  background: linear-gradient(180deg, #e9eef5 0%, #dfe7f1 100%);
}
.sf-attendance-table-wrap,
.sf-attendance-table { background: transparent; }
.sf-attendance-table tbody tr { background: rgba(255, 255, 255, .38); }
.sf-attendance-section--malam .sf-attendance-table tbody tr { background: rgba(255, 255, 255, .3); }
.sf-attendance-table tbody tr:hover { background: rgba(255, 255, 255, .72); }

.sf-checkin-status {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #d9e2ec;
  border-radius: 11px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef3f8 100%);
  box-shadow: 0 4px 12px rgba(44, 67, 91, .06);
  font-size: 11px;
}
.sf-checkin-status.is-checked {
  border-color: #8bd8c1;
  background: linear-gradient(135deg, #e6fbf2 0%, #d9f2ec 100%);
  color: #087f66;
  box-shadow: 0 6px 16px rgba(8, 127, 102, .12);
}
.sf-checkin-status.is-checked i { color: #0b9b76; font-size: 14px; }
.sf-checkin-status small { font-size: 10px; font-weight: 800; color: #277c70; }

.sf-attendance-status {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #dce4ec;
  border-radius: 11px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef3f8 100%);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(44, 67, 91, .06);
}
.sf-attendance-status.is-present {
  border-color: #8bd8c1;
  background: linear-gradient(135deg, #e6fbf2 0%, #d9f2ec 100%);
  color: #087f66;
  box-shadow: 0 6px 16px rgba(8, 127, 102, .12);
}
.sf-attendance-status.is-present strong { color: #087f66; font-size: 12px; }
.sf-attendance-status.is-present small { color: #277c70; font-size: 10px; }
.sf-attendance-status.is-late {
  border-color: #f0a6ad;
  background: linear-gradient(135deg, #fff0f1 0%, #ffe2e5 100%);
  color: #bd3344;
  box-shadow: 0 6px 16px rgba(189, 51, 68, .11);
}
.sf-attendance-status.is-late strong { color: #bd3344; }
.sf-attendance-status.is-late small { color: #a45662; }

.sf-location-link {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #b9d5fb;
  border-radius: 9px;
  background: linear-gradient(135deg, #eef6ff 0%, #e2efff 100%);
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(33, 102, 197, .08);
}
.sf-location-link:hover { background: #d8eaff; }

/* Attendance refinement: keep lane color on the list and make checked rows clear. */
.sf-attendance-section--pagi,
.sf-attendance-section--malam {
  border-left: 0;
  background: #fff;
}
.sf-attendance-section--pagi .sf-attendance-shift-title,
.sf-attendance-section--malam .sf-attendance-shift-title {
  background: #fff;
}
.sf-attendance-section--pagi .sf-attendance-table-wrap {
  background: #f3f8ff;
}
.sf-attendance-section--malam .sf-attendance-table-wrap {
  background: #f2f5f9;
}
.sf-attendance-table tbody tr {
  background: transparent;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.sf-attendance-section--pagi .sf-attendance-table tbody tr,
.sf-attendance-section--pagi .sf-attendance-table tbody tr:hover {
  background: rgba(63, 143, 222, .08);
  box-shadow: none;
}
.sf-attendance-section--malam .sf-attendance-table tbody tr,
.sf-attendance-section--malam .sf-attendance-table tbody tr:hover {
  background: rgba(38, 59, 85, .07);
  box-shadow: none;
}
.sf-attendance-section--pagi .sf-attendance-table tbody tr.is-attendance-checked,
.sf-attendance-section--pagi .sf-attendance-table tbody tr.is-attendance-checked:hover,
.sf-attendance-section--malam .sf-attendance-table tbody tr.is-attendance-checked,
.sf-attendance-section--malam .sf-attendance-table tbody tr.is-attendance-checked:hover {
  background: linear-gradient(90deg, #e7f8ef 0%, #dff3eb 100%);
  box-shadow: inset 4px 0 0 #2fa277;
}
.sf-attendance-status,
.sf-attendance-status.is-present,
.sf-attendance-status.is-present:hover,
.sf-attendance-status.is-late {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sf-attendance-status.is-present { color: #16805b; }
.sf-attendance-status.is-present strong { color: #16805b; font-size: 11px; }
.sf-attendance-status.is-present small { color: #468273; font-size: 10px; }
.sf-attendance-status.is-late { color: #c93645; }
.sf-attendance-status.is-late strong { color: #c93645; }
.sf-attendance-status.is-late small { color: #a45662; }

/* Keep attendance lanes neutral and move verification details into Crosscheck. */
.sf-attendance-section--pagi,
.sf-attendance-section--malam,
.sf-attendance-section--pagi .sf-attendance-shift-title,
.sf-attendance-section--malam .sf-attendance-shift-title,
.sf-attendance-section--pagi .sf-attendance-table-wrap,
.sf-attendance-section--malam .sf-attendance-table-wrap {
  border-left: 0;
  background: #fff;
}
.sf-attendance-section--pagi .sf-attendance-table tbody tr,
.sf-attendance-section--pagi .sf-attendance-table tbody tr:hover,
.sf-attendance-section--malam .sf-attendance-table tbody tr,
.sf-attendance-section--malam .sf-attendance-table tbody tr:hover,
.sf-attendance-section--pagi .sf-attendance-table tbody tr.is-attendance-checked,
.sf-attendance-section--pagi .sf-attendance-table tbody tr.is-attendance-checked:hover,
.sf-attendance-section--malam .sf-attendance-table tbody tr.is-attendance-checked,
.sf-attendance-section--malam .sf-attendance-table tbody tr.is-attendance-checked:hover {
  background: transparent;
  box-shadow: none;
}
.sf-crosscheck-btn > span {
  display: grid;
  gap: 2px;
  text-align: left;
  line-height: 1.15;
}
.sf-crosscheck-btn > span strong { font-size: 11px; font-weight: 800; }
.sf-crosscheck-btn > span small { font-size: 9px; font-weight: 700; white-space: nowrap; }
.sf-attendance-status > span { text-align: left; }

/* Center the multi-line operational values as one visual unit. */
.sf-attendance-table td:nth-child(n+6) {
  text-align: center;
}
.sf-checkin-status,
.sf-location-link,
.sf-crosscheck-btn,
.sf-attendance-status {
  margin-inline: auto;
}
.sf-crosscheck-btn > span,
.sf-attendance-status > span {
  text-align: center;
}
.sf-location-meta {
  display: block;
  text-align: center;
}

/* Crosscheck confirmation: roomier, clearer and more vibrant than the compact default dialog. */
.sf-confirm--verify {
  width: min(520px, 100%);
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  padding: 28px 30px 24px;
  border: 1px solid #c9d9f2;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(116, 91, 214, .16), transparent 36%),
    radial-gradient(circle at 0% 100%, rgba(33, 174, 190, .13), transparent 42%),
    linear-gradient(145deg, #ffffff 0%, #f4f8ff 58%, #f8f5ff 100%);
  box-shadow: 0 28px 70px rgba(31, 56, 96, .24), 0 8px 22px rgba(67, 106, 170, .10);
}

.sf-confirm--verify::before {
  top: -92px;
  right: -64px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(103, 123, 235, .24) 0%, rgba(103, 123, 235, 0) 70%);
}

.sf-confirm--verify .sf-confirm__icon {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, #2f83d5 0%, #6357c9 100%);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 12px 22px rgba(72, 105, 190, .28);
}

.sf-confirm--verify .sf-confirm__icon::after {
  inset: 6px;
  border-color: rgba(255, 255, 255, .26);
  border-radius: 13px;
}

.sf-confirm--verify .sf-confirm__copy {
  align-self: center;
  padding-top: 0;
}

.sf-confirm--verify .sf-confirm__copy h3 {
  color: #182a45;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.sf-confirm--verify .sf-confirm__copy p {
  max-width: 360px;
  margin-top: 8px;
  color: #5f7189;
  font-size: 14px;
  line-height: 1.55;
}

.sf-confirm--verify .sf-confirm__actions {
  gap: 12px;
  margin-top: 8px;
  padding-top: 18px;
}

.sf-confirm--verify .sf-confirm__actions::before {
  border-top: 1px solid rgba(121, 151, 196, .24);
}

.sf-confirm--verify .sf-confirm__actions .sf-btn {
  min-width: 132px;
  min-height: 44px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
}

.sf-confirm--verify .sf-confirm__actions .sf-btn:not(.sf-btn--primary) {
  border-color: #d5dfeb;
  background: rgba(255, 255, 255, .78);
  color: #5c6d83;
}

.sf-confirm--verify .sf-confirm__actions .sf-btn:not(.sf-btn--primary):hover,
.sf-confirm--verify .sf-confirm__actions .sf-btn:not(.sf-btn--primary):focus-visible {
  border-color: #a9c3e3;
  background: #edf5ff;
  color: #2c66a4;
  box-shadow: 0 8px 18px rgba(57, 101, 159, .12);
}

.sf-confirm--verify .sf-btn--primary {
  border-color: #286db6;
  background: linear-gradient(135deg, #2e85d5 0%, #5360cf 100%);
  box-shadow: 0 10px 20px rgba(55, 101, 188, .24);
}

.sf-confirm--verify .sf-btn--primary:hover,
.sf-confirm--verify .sf-btn--primary:focus-visible {
  border-color: #245ca4;
  background: linear-gradient(135deg, #3796e5 0%, #645bd8 100%);
  box-shadow: 0 12px 24px rgba(55, 101, 188, .31);
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .sf-confirm--verify {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    padding: 22px 20px 19px;
    border-radius: 20px;
  }

  .sf-confirm--verify .sf-confirm__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 19px;
  }

  .sf-confirm--verify .sf-confirm__copy h3 { font-size: 17px; }
  .sf-confirm--verify .sf-confirm__copy p { font-size: 12px; }
  .sf-confirm--verify .sf-confirm__actions .sf-btn { min-width: 0; flex: 1; }
}

/* Schedule display preferences */
.sf-modal--display-settings {
  width: min(560px, calc(100vw - 32px));
  border-radius: 20px;
}

.sf-modal--display-settings .sf-modal__head {
  padding: 20px 22px 16px;
  background: linear-gradient(135deg, #f4f9ff 0%, #ffffff 62%);
}

.sf-modal--display-settings .sf-modal__head h3 { font-size: 18px; font-weight: 850; }
.sf-modal--display-settings .sf-modal__head p { margin-top: 5px; color: #718096; font-size: 11px; }
.sf-display-settings__body { gap: 16px; padding: 18px 22px 20px; background: #fbfcfe; }
.sf-display-preview-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid #d7e3f0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f7ff 100%);
  color: #243247;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-display-preview-link:hover,
.sf-display-preview-link:focus-visible { border-color: #8db8eb; box-shadow: 0 10px 22px rgba(53, 116, 190, .12); outline: 0; transform: translateY(-1px); }
.sf-display-preview-link__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #e5f0ff; color: #2f79c9; font-size: 15px; }
.sf-display-preview-link > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.sf-display-preview-link strong { font-size: 12px; font-weight: 850; }
.sf-display-preview-link em { color: #7c8999; font-size: 10px; font-style: normal; font-weight: 650; }
.sf-display-preview-link > i { color: #8091a3; font-size: 11px; }
.sf-display-settings__fieldset { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.sf-display-settings__fieldset legend { margin-bottom: 1px; color: #425166; font-size: 11px; font-weight: 850; }
.sf-display-option { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) 22px; align-items: center; gap: 12px; min-height: 62px; padding: 9px 11px; border: 1px solid #dce4ec; border-radius: 14px; background: #fff; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.sf-display-option:hover { border-color: #a8bfd8; box-shadow: 0 8px 18px rgba(39, 69, 101, .08); transform: translateY(-1px); }
.sf-display-option input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.sf-display-option:has(input:checked) { border-color: #2f7fd3; background: linear-gradient(135deg, #f1f7ff 0%, #ffffff 100%); box-shadow: 0 0 0 2px rgba(47, 127, 211, .12); }
.sf-display-option__visual { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 9px; border-radius: 10px; background: #f3f6f9; color: #2d78c7; font-size: 12px; }
.sf-display-option__visual i:nth-child(2n) { color: #283e58; }
.sf-display-option__visual--pagi i { color: #2d82d2; }
.sf-display-option__visual--pagi i:nth-child(n+3) { color: #283e58; }
.sf-display-option__visual--malam i { color: #283e58; }
.sf-display-option__visual--malam i:nth-child(n+3) { color: #2d82d2; }
.sf-display-option__copy { display: grid; gap: 3px; min-width: 0; }
.sf-display-option__copy strong { color: #2b3a4d; font-size: 11px; font-weight: 850; }
.sf-display-option__copy em { color: #8290a0; font-size: 9.5px; font-style: normal; font-weight: 650; }
.sf-display-option__check { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #cbd7e2; border-radius: 50%; color: transparent; font-size: 10px; }
.sf-display-option:has(input:checked) .sf-display-option__check { border-color: #2f7fd3; background: #2f7fd3; color: #fff; }
.sf-modal--display-settings .sf-modal__foot { padding: 14px 22px 18px; background: #fff; }
.sf-modal--display-settings .sf-modal__foot .sf-btn { min-width: 118px; }

@media (max-width: 560px) {
  .sf-display-option { grid-template-columns: 96px minmax(0, 1fr) 20px; gap: 9px; padding-inline: 9px; }
  .sf-display-option__visual { gap: 5px; padding-inline: 5px; }
  .sf-display-option__copy strong { font-size: 10.5px; }
}

.sf-modal--change-shift .sf-change-reset-btn {
  margin-right: auto;
  border-color: #f0c4ca;
  background: #fff5f6;
  color: #c04455;
}
.sf-modal--change-shift .sf-change-reset-btn:hover:not(:disabled),
.sf-modal--change-shift .sf-change-reset-btn:focus-visible:not(:disabled) {
  border-color: #e79aa5;
  background: #ffe9ec;
  color: #a92f42;
  box-shadow: 0 8px 18px rgba(192, 68, 85, .12);
}
.sf-modal--change-shift .sf-change-reset-btn:disabled { opacity: .55; cursor: wait; }

@media (max-width: 620px) {
  .sf-modal--change-shift .sf-modal__foot { flex-wrap: wrap; }
  .sf-modal--change-shift .sf-change-reset-btn { width: 100%; margin-right: 0; }
  .sf-modal--change-shift .sf-modal__foot > .sf-btn:not(.sf-change-reset-btn) { flex: 1 1 0; }
}

/* Final schedule palette: keep the lanes vivid while softening date separators. */
.sf-schedule-table .sf-shift-cell {
  border-right-color: rgba(100, 116, 139, 0.16);
  border-bottom-color: rgba(100, 116, 139, 0.16);
}

.sf-schedule-table .sf-shift-card.sf-shift-card--lane {
  background: #1688e4;
}

.sf-schedule-table .sf-lane-cell--malam .sf-shift-card.sf-shift-card--lane {
  background: #142b45;
}

.sf-schedule-table .sf-shift-card--change_malam.sf-shift-card--quiet {
  border-color: #087256;
  background: #19a77c;
  color: #ffffff;
}

.sf-schedule-table .sf-shift-card--off_change_pagi.sf-shift-card--quiet {
  border-color: #5d3ca4;
  background: #8658d4;
  color: #ffffff;
}

.sf-schedule-table .sf-shift-card--cuti.sf-shift-card--quiet {
  border-color: #c18400;
  background: #e9ad16;
  color: #241c00;
}

.sf-schedule-table .sf-shift-card--off_day.sf-shift-card--quiet {
  border-color: #a83240;
  background: #df4f5d;
  color: #ffffff;
}

.sf-schedule-table .sf-shift-card--cuti.sf-shift-card--quiet .sf-shift-label { color: #241c00; }
.sf-schedule-table .sf-shift-card--off_day.sf-shift-card--quiet .sf-shift-label { color: #ffffff; }

/* Preview uses the same vivid palette and the same hairline date separators. */
.sf-modal--month-preview .sf-month-preview-table th,
.sf-modal--month-preview .sf-month-preview-table td {
  /* Preview columns are very narrow. Remove the collapsed-table border and
     draw the join below so the browser cannot round it back to a full pixel. */
  position: relative;
  border-right: 0;
  border-bottom: 0.5px solid rgba(100, 116, 139, 0.16);
}

.sf-modal--month-preview .sf-month-preview-table th:not(:last-child)::after,
.sf-modal--month-preview .sf-month-preview-table td:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(100, 116, 139, 0.48);
  transform: scaleX(.5);
  transform-origin: right center;
  pointer-events: none;
}

.sf-modal--month-preview .sf-month-badge--pagi { background: #1688e4; color: #ffffff; }
.sf-modal--month-preview .sf-month-badge--malam { background: #142b45; color: #ffffff; }
.sf-modal--month-preview .sf-month-badge--change_malam { background: #19a77c; color: #ffffff; }
.sf-modal--month-preview .sf-month-badge--off_change_pagi { background: #8658d4; color: #ffffff; }
.sf-modal--month-preview .sf-month-badge--cuti { background: #e9ad16; color: #241c00; }
.sf-modal--month-preview .sf-month-badge--off_day { background: #df4f5d; color: #ffffff; }

/* Match the homepage lane geometry: date badges touch the cell edges, so
   the separator is a hairline instead of a wide padding gap. */
.sf-modal--month-preview .sf-month-preview-table thead th:nth-child(n + 3),
.sf-modal--month-preview .sf-month-preview-table tbody td:nth-child(n + 3) {
  padding-left: 0;
  padding-right: 0;
}

/* Date separators: one consistent, low-contrast device pixel.  A 0.5px
   border is anti-aliased differently depending on each column's x-position,
   which made adjacent dates look like they had different line weights. */
.sf-schedule-table .sf-day-head,
.sf-schedule-table .sf-shift-cell,
.sf-schedule-table .sf-total-count {
  border-right: 1px solid rgba(100, 116, 139, 0.12);
}

/* Do not draw a second separator on the first cell after a lane starts.
   The table cell already owns the date boundary; this inset shadow was the
   reason the 1→2 join looked heavier than the following joins. */
.sf-schedule-table .sf-lane-cell.is-run-start + .sf-lane-cell .sf-shift-card.sf-shift-card--lane {
  box-shadow: none;
}

/* Date grid joins are rendered above lane buttons instead of relying on the
   cell border (lane buttons fill the cell and can visually cover that border).
   One explicit pixel per join keeps 1→2 identical to every later date. */
.sf-schedule-table .sf-day-head,
.sf-schedule-table .sf-shift-cell,
.sf-schedule-table .sf-total-count {
  border-right: 0;
}

.sf-schedule-table .sf-shift-cell,
.sf-schedule-table .sf-total-count {
  position: relative;
}

.sf-schedule-table .sf-day-head:not(:last-child)::after,
.sf-schedule-table .sf-shift-cell:not(:last-child)::after,
.sf-schedule-table .sf-total-count:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(100, 116, 139, 0.46);
  pointer-events: none;
}

/* =========================================================
   Global light / dark theme
   Keep this block last: it intentionally normalizes legacy,
   component-specific colors through one shared theme system.
   ========================================================= */
html {
  color-scheme: light;
  background: var(--bg);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07101d;
  --surface: #0d1827;
  --panel: #111e2f;
  --line: #2b3d52;
  --line-soft: #1d2c3f;
  --text: #edf4fd;
  --muted: #9bacc0;
  --muted-2: #71849b;
  --primary: #e7eef8;
  --primary-soft: #172538;
  --primary-line: #354b64;
  --accent: #67a8ff;
  --accent-soft: #132842;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #07101d;
  color: var(--text);
}

body,
.sf-app,
.sf-shell,
.sf-sidebar,
.sf-content,
.sf-topbar,
.sf-main,
.sf-page,
.sf-toolbar,
.sf-table-panel,
.sf-table-wrap,
.sf-modal,
.sf-modal__head,
.sf-modal__body,
.sf-modal__foot,
.sf-action-menu__panel,
.sf-staff-status-filter__menu,
.sf-custom-select__menu,
.sf-date-menu__panel,
.sf-confirm {
  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.sf-theme-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sf-theme-toggle::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(57, 142, 255, .14), rgba(255, 193, 7, .14));
  transform: scale(0);
  transition: transform .22s ease;
}

.sf-theme-toggle:hover::before {
  transform: scale(1);
}

.sf-theme-toggle i {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), color .22s ease;
}

.sf-theme-toggle:hover i {
  transform: rotate(-18deg) scale(1.08);
}

html[data-theme="dark"] .sf-theme-toggle {
  color: #ffd166;
  border-color: #3b536e;
  background: #142238;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 209, 102, .05);
}

html[data-theme="dark"] .sf-theme-toggle::before {
  background: radial-gradient(circle, rgba(255, 209, 102, .24), transparent 70%);
}

html[data-theme="dark"] :where(.sf-app, .sf-shell, .sf-content, .sf-main, .sf-page) {
  background: #07101d;
  color: var(--text);
}

html[data-theme="dark"] .sf-sidebar {
  background: #091421;
  border-color: #223247;
  box-shadow: 10px 0 35px rgba(0, 0, 0, .08);
}

html[data-theme="dark"] :where(.sf-brand__text strong, .sf-user__text strong, .sf-profile-mini span, .sf-topbar__title strong, .sf-period__text strong, .sf-title-block h1) {
  color: #f4f8fd;
}

html[data-theme="dark"] :where(.sf-brand__text span, .sf-user__text small, .sf-period__text span, .sf-nav__group, .sf-muted) {
  color: #8396ad;
}

html[data-theme="dark"] .sf-brand__mark {
  background: linear-gradient(145deg, #243a56, #327bc8);
  color: #fff;
  box-shadow: 0 10px 24px rgba(35, 116, 201, .25);
}

html[data-theme="dark"] :where(.sf-nav__item, .sf-nav-sub__item) {
  color: #aebed0;
  background: transparent;
}

html[data-theme="dark"] :where(.sf-nav__item:hover, .sf-nav-sub__item:hover) {
  color: #f0f6ff;
  background: #132238;
}

html[data-theme="dark"] :where(.sf-nav__item.is-active, .sf-nav-sub__item.is-active) {
  color: #f6f9fd;
  background: linear-gradient(100deg, #17283d, #142235);
  box-shadow: inset 3px 0 0 #4e9dff;
}

html[data-theme="dark"] .sf-user {
  border-color: #213247;
}

html[data-theme="dark"] .sf-user__logout {
  background: #111f31;
  color: #a9b9cc;
}

html[data-theme="dark"] .sf-user__logout:hover,
html[data-theme="dark"] .sf-user__logout:focus-visible {
  background: #2a1822;
  color: #ff9cab;
}

html[data-theme="dark"] :where(.sf-user__avatar, .sf-profile-mini__avatar, .sf-avatar) {
  color: #dce9f8;
  background: #17263a;
  border-color: #30465f;
}

html[data-theme="dark"] .sf-profile-menu__panel {
  border-color: #2d4258;
  background: #101d2d;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .sf-profile-menu__panel::before {
  border-color: #2d4258;
  background: #101d2d;
}

html[data-theme="dark"] .sf-profile-menu__identity {
  border-color: #26394e;
}

html[data-theme="dark"] .sf-profile-menu__identity strong {
  color: #edf4fc;
}

html[data-theme="dark"] .sf-profile-menu__identity small {
  color: #91a5bc;
}

html[data-theme="dark"] .sf-profile-menu__logout {
  color: #b7c5d6;
}

html[data-theme="dark"] .sf-profile-menu__logout:hover,
html[data-theme="dark"] .sf-profile-menu__logout:focus-visible {
  background: #2a1822;
  color: #ff9cab;
}

html[data-theme="dark"] .sf-topbar {
  color: #d9e5f3;
  background: rgba(10, 21, 35, .96);
  border-color: #233449;
}

html[data-theme="dark"] .sf-summary {
  border-color: #27394f;
}

html[data-theme="dark"] .sf-summary__item {
  color: #9eb0c5;
}

html[data-theme="dark"] :where(.sf-toolbar, .sf-tabs, .sf-table-panel, .sf-staff-panel, .sf-attendance-panel) {
  color: var(--text);
  background: #0d1827;
  border-color: #26384d;
}

html[data-theme="dark"] .sf-toolbar {
  box-shadow: 0 1px 0 #22354a;
}

html[data-theme="dark"] :where(.sf-period__btn, .sf-icon-btn, .sf-action-menu__trigger, .sf-mini-btn, .sf-date-menu__trigger, .sf-attendance-date-control) {
  color: #b9c9da;
  background: #111f31;
  border-color: #30445b;
}

html[data-theme="dark"] :where(.sf-period__btn:hover, .sf-icon-btn:hover, .sf-action-menu__trigger:hover, .sf-mini-btn:hover) {
  color: #fff;
  background: #192b42;
  border-color: #46617f;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .sf-search {
  color: #8da2b9;
  background: #111e2e;
  border-color: #2c4057;
}

html[data-theme="dark"] .sf-search:focus-within {
  border-color: #4b91e6;
  box-shadow: 0 0 0 3px rgba(75, 145, 230, .14);
}

html[data-theme="dark"] :where(input, select, textarea) {
  color: #eef4fc;
  background: #0c1726;
  border-color: #30445b;
}

html[data-theme="dark"] :where(input, select, textarea)::placeholder {
  color: #71849b;
}

html[data-theme="dark"] :where(input, select, textarea):focus {
  outline: none;
  border-color: #4a91e7;
  box-shadow: 0 0 0 3px rgba(74, 145, 231, .14);
}

html[data-theme="dark"] :where(.sf-action-menu__panel, .sf-shift-action-menu, .sf-staff-status-filter__menu, .sf-custom-select__menu, .sf-date-menu__panel) {
  color: #dbe6f3;
  background: #101c2c;
  border-color: #30445b;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] :where(.sf-action-menu__item, .sf-staff-status-filter__option, .sf-custom-select__option, .sf-date-menu__item) {
  color: #b9c9da;
  background: transparent;
}

html[data-theme="dark"] :where(.sf-action-menu__item:hover, .sf-staff-status-filter__option:hover, .sf-custom-select__option:hover, .sf-date-menu__item:hover) {
  color: #f7faff;
  background: #1a2b42;
}

html[data-theme="dark"] :where(.sf-staff-status-filter__option.is-selected, .sf-custom-select__option.is-selected) {
  color: #8fc2ff;
  background: #152943;
}

html[data-theme="dark"] .sf-tab {
  color: #91a5bc;
}

html[data-theme="dark"] .sf-tab:hover {
  color: #dfeafa;
}

html[data-theme="dark"] .sf-tab.is-active {
  color: #f2f7fd;
  border-color: #6daeff;
}

html[data-theme="dark"] :where(.sf-schedule-table, .sf-staff-table, .sf-attendance-table, .sf-month-preview-table) {
  color: #e8f0fa;
  background: #0b1624;
}

html[data-theme="dark"] :where(.sf-schedule-table th, .sf-staff-table th, .sf-attendance-table th, .sf-month-preview-table th) {
  color: #91a5bc;
  background: #111d2b;
  border-color: #2a3c51;
}

html[data-theme="dark"] :where(.sf-schedule-table td, .sf-staff-table td, .sf-attendance-table td, .sf-month-preview-table td) {
  border-color: #23364b;
}

html[data-theme="dark"] :where(.sf-role-cell, .sf-name-cell, .sf-role-head, .sf-name-head, .sf-total-label, .sf-total-sticky-blank) {
  color: #dfe8f4;
  background: #0e1a29;
  border-color: #2a3c50;
}

html[data-theme="dark"] .sf-role-cell {
  color: #8fa9c5;
}

html[data-theme="dark"] .sf-schedule-table tbody tr:hover :where(.sf-role-cell, .sf-name-cell) {
  color: #fff;
  background: #17283d;
}

html[data-theme="dark"] :where(.sf-empty-cell, .sf-total-count) {
  color: #6f849c;
  background: #0b1624;
  border-color: #26394f;
}

html[data-theme="dark"] :where(.sf-total-row .sf-total-count, .sf-total-row .sf-total-label, .sf-total-row .sf-total-sticky-blank) {
  background: #111e2d;
}

html[data-theme="dark"] .sf-day-head.is-active-day {
  color: #eaf3ff;
  background: #1a2a3d;
  box-shadow: inset 0 -2px 0 #65a8ff;
}

html[data-theme="dark"] .sf-schedule-table .sf-day-head:not(:last-child)::after,
html[data-theme="dark"] .sf-schedule-table .sf-shift-cell:not(:last-child)::after,
html[data-theme="dark"] .sf-schedule-table .sf-total-count:not(:last-child)::after {
  background: rgba(154, 174, 198, .34);
}

html[data-theme="dark"] :where(.sf-staff-table tbody tr, .sf-attendance-table tbody tr) {
  color: #dce7f4;
  background: #0d1827;
}

html[data-theme="dark"] :where(.sf-staff-table tbody tr:hover, .sf-attendance-table tbody tr:hover) {
  background: #14243a;
}

html[data-theme="dark"] .sf-attendance-table tbody tr.is-checked {
  background: rgba(18, 146, 104, .13);
}

html[data-theme="dark"] :where(.sf-list-toolbar, .sf-attendance-toolbar, .sf-attendance-section__head) {
  color: #dfe9f5;
  background: #0f1b2a;
  border-color: #273a50;
}

html[data-theme="dark"] .sf-attendance-hero {
  color: #eaf2fc;
  background:
    radial-gradient(circle at 25% 0, rgba(39, 124, 199, .18), transparent 42%),
    linear-gradient(145deg, #0d1b2b, #101d2c);
  border-color: #2a3f57;
}

html[data-theme="dark"] :where(.sf-attendance-shift-title, .sf-attendance-hero__title) {
  color: #f1f6fc;
}

html[data-theme="dark"] :where(.sf-attendance-pill, .sf-checkin-status, .sf-attendance-status, .sf-location-link, .sf-crosscheck-btn) {
  border-color: #30465e;
  box-shadow: none;
}

html[data-theme="dark"] .sf-modal-backdrop {
  background: rgba(2, 7, 15, .78);
  backdrop-filter: blur(10px);
}

html[data-theme="dark"] .sf-modal {
  color: #eaf1fa;
  background: #0d1827;
  border: 1px solid #2b4058;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .52);
}

html[data-theme="dark"] :where(.sf-modal__head, .sf-modal__body, .sf-modal__foot) {
  background: #0d1827;
  border-color: #293c52;
}

html[data-theme="dark"] .sf-modal__head h2,
html[data-theme="dark"] .sf-modal__head strong {
  color: #f4f8fd;
}

html[data-theme="dark"] .sf-modal__close {
  color: #9db0c6;
  background: transparent;
}

html[data-theme="dark"] .sf-modal__close:hover {
  color: #fff;
  background: #1a2a3e;
}

html[data-theme="dark"] :where(
  .sf-staff-check,
  .sf-bulk-staff,
  .sf-duration-picker,
  .sf-duration-choice,
  .sf-shift-choice__card,
  .sf-fixed-field,
  .sf-flow-builder__item,
  .sf-display-option,
  .sf-display-preview-link,
  .sf-manage-shift__option,
  .sf-change-date-field,
  .sf-leave-range,
  .sf-share-card,
  .sf-share-date-card,
  .sf-share-feed__item,
  .sf-share-format,
  .sf-share-brief,
  .sf-rhythm-card
) {
  color: #dce7f3;
  background: #111e2e;
  border-color: #2e435b;
}

html[data-theme="dark"] :where(.sf-staff-check:hover, .sf-flow-builder__item:hover, .sf-display-option:hover, .sf-manage-shift__option:hover) {
  background: #17283d;
  border-color: #46627f;
}

html[data-theme="dark"] :where(.sf-field label, .sf-fixed-field label, .sf-staff-check__copy small, .sf-display-option__copy span, .sf-manage-shift__intro, .sf-share-feed__empty) {
  color: #91a4bb;
}

html[data-theme="dark"] :where(.sf-control, .sf-custom-select__button, .sf-staff-status-filter__trigger, .sf-fixed-value) {
  color: #e4edf8;
  background: #0d1928;
  border-color: #31465e;
}

html[data-theme="dark"] :where(.sf-date-menu__day, .sf-date-menu__blank) {
  color: #b8c7d8;
  background: #132134;
}

html[data-theme="dark"] .sf-date-menu__day:hover {
  color: #fff;
  background: #1d3551;
}

html[data-theme="dark"] .sf-date-menu__day.is-selected {
  color: #fff;
  background: #356fae;
}

html[data-theme="dark"] :where(.sf-month-preview__head, .sf-month-preview__body, .sf-month-preview__table-wrap) {
  color: #e4edf8;
  background: #0d1827;
  border-color: #2a3c52;
}

html[data-theme="dark"] :where(.sf-month-role, .sf-month-name, .sf-month-group-row) {
  color: #dbe6f3;
  background-color: #101c2b;
  border-color: #293b50;
}

html[data-theme="dark"] :where(.sf-share-hero, .sf-share-summary, .sf-share-feed, .sf-share-brief__content) {
  color: #e4edf8;
  background: #101d2e;
  border-color: #2c4057;
}

html[data-theme="dark"] .sf-confirm-layer {
  background: rgba(2, 8, 16, .74);
  backdrop-filter: blur(9px);
}

html[data-theme="dark"] .sf-confirm {
  color: #e9f1fb;
  background: #0f1b2b;
  border-color: #2f455e;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .sf-confirm__copy strong {
  color: #f4f8fd;
}

html[data-theme="dark"] .sf-confirm__copy p {
  color: #97a9bd;
}

html[data-theme="dark"] :where(.sf-btn--ghost, .sf-btn--soft, .sf-btn:not(.sf-btn--primary):not(.sf-btn--danger):not(.sf-btn--danger-soft)) {
  color: #c7d5e5;
  background: #111f31;
  border-color: #31465e;
}

html[data-theme="dark"] :where(.sf-btn--ghost, .sf-btn--soft):hover {
  color: #fff;
  background: #1a2b42;
  border-color: #46627f;
}

html[data-theme="dark"] .sf-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #3f88df, #2f67b4);
  border-color: #4b91e6;
  box-shadow: 0 10px 24px rgba(47, 103, 180, .24);
}

html[data-theme="dark"] .sf-loading,
html[data-theme="dark"] .sf-empty-state {
  color: #91a5bc;
  background: #0d1827;
}

/* High-specificity guards for legacy component rules that use !important. */
html[data-theme="dark"] .sf-modal.sf-modal--change-shift,
html[data-theme="dark"] .sf-modal.sf-modal--month-preview,
html[data-theme="dark"] .sf-modal.sf-modal--staff {
  background: #0d1827 !important;
  border-color: #2b4058 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__head,
html[data-theme="dark"] .sf-modal--staff .sf-modal__head,
html[data-theme="dark"] .sf-modal--staff .sf-modal__body,
html[data-theme="dark"] .sf-modal--staff .sf-modal__foot,
html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-modal__body,
html[data-theme="dark"] .sf-modal.sf-modal--share .sf-modal__foot--share,
html[data-theme="dark"] .sf-modal--display-settings .sf-modal__foot {
  background: #0d1827 !important;
  border-color: #293c52 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item:hover {
  color: #dce7f3 !important;
  background: #111e2e !important;
  border-color: #2e435b !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__index {
  background: #152438 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__actions,
html[data-theme="dark"] .sf-share-feed__node {
  background: #132135 !important;
  border-color: #314860 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__text strong,
html[data-theme="dark"] :where(.sf-share-hero__date strong, .sf-share-brief__head strong, .sf-share-feed__head strong, .sf-share-feed__empty strong),
html[data-theme="dark"] :where(.sf-manage-shift__option strong, .sf-display-option__copy strong, .sf-staff-summary strong) {
  color: #eaf2fc !important;
}

html[data-theme="dark"] :where(.sf-share-brief__section, .sf-share-format, .sf-modal.sf-modal--share .sf-share-format) {
  color: #dce7f3;
  background: #101d2d !important;
  border-color: #2c4158 !important;
}

html[data-theme="dark"] :where(.sf-share-brief li, .sf-share-feed li, .sf-share-format summary) {
  color: #a9bacd;
}

html[data-theme="dark"] .sf-manage-shift__options,
html[data-theme="dark"] .sf-manage-shift__option {
  color: #dce7f3;
  background: #101d2d !important;
  border-color: #2a3f56 !important;
}

html[data-theme="dark"] .sf-manage-shift__option:hover {
  background: #17283d !important;
}

html[data-theme="dark"] .sf-schedule-table .sf-shift-cell.sf-lane-cell,
html[data-theme="dark"] .sf-schedule-table .sf-shift-cell.sf-exception-cell {
  background: #0b1624 !important;
}

html[data-theme="dark"] .sf-schedule-table :where(.sf-shift-cell.sf-lane-cell, .sf-shift-cell.sf-exception-cell).is-active-col,
html[data-theme="dark"] .sf-schedule-table :where(.sf-shift-cell.sf-lane-cell, .sf-shift-cell.sf-exception-cell).is-hovered-col.is-hovered-row {
  background: #111f31 !important;
}

html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody td {
  background: #0b1624 !important;
}

html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody td.sf-month-role,
html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody td.sf-month-name {
  background: #101c2b !important;
}

html[data-theme="dark"] .sf-page--staff :where(.sf-list-toolbar, .sf-staff-table-wrap, .sf-staff-table) {
  background: #0d1827 !important;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table th {
  color: #91a5bc;
  background: #111d2b !important;
}

html[data-theme="dark"] .sf-page--staff .sf-mini-btn {
  color: #a9bdd3;
  background: #111f31 !important;
  border-color: #30465e;
}

html[data-theme="dark"] :where(
  .sf-attendance-section--pagi,
  .sf-attendance-section--malam,
  .sf-attendance-section--pagi .sf-attendance-shift-title,
  .sf-attendance-section--malam .sf-attendance-shift-title,
  .sf-attendance-section--pagi .sf-attendance-table-wrap,
  .sf-attendance-section--malam .sf-attendance-table-wrap
) {
  color: #e5eef9;
  background: #0d1827 !important;
}

html[data-theme="dark"] :where(
  .sf-attendance-section--pagi .sf-attendance-table tbody tr,
  .sf-attendance-section--malam .sf-attendance-table tbody tr
) {
  background: transparent !important;
}

html[data-theme="dark"] .sf-display-option:has(input:checked) {
  color: #eaf2fc;
  background: linear-gradient(135deg, #162b44, #101d2e) !important;
  border-color: #4b91e6;
}

html[data-theme="dark"] .sf-display-option__visual {
  background: #16253a;
}

html[data-theme="dark"] .sf-confirm--verify .sf-confirm__actions .sf-btn:not(.sf-btn--primary) {
  color: #c2d1e1;
  background: #132134;
  border-color: #344a62;
}

@media (max-width: 800px) {
  html[data-theme="dark"] .sf-sidebar {
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .28);
  }
}

/* Second screenshot audit: targeted component corrections. */
html[data-theme="dark"] .sf-nav-sub__item.is-active {
  color: #f4f8fd !important;
  background: #1a314d !important;
  box-shadow: inset 3px 0 0 #4da3f4;
}

html[data-theme="dark"] .sf-nav-sub__item:hover,
html[data-theme="dark"] .sf-nav-sub__item:focus-visible {
  color: #eef5fd !important;
  background: #142840 !important;
}

.sf-page--attendance {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.sf-attendance-hero {
  gap: 9px;
  padding: 16px 24px 12px;
}

.sf-attendance-hero__title {
  gap: 9px;
  padding-bottom: 7px;
}

.sf-attendance-hero__title span {
  width: 30px;
  height: 30px;
}

.sf-attendance-hero__title h1 {
  font-size: clamp(22px, 1.65vw, 28px);
  letter-spacing: -.015em;
}

.sf-attendance-hero__stats {
  gap: 10px;
}

.sf-attendance-toolbar,
.sf-attendance-toolbar--clean {
  min-height: 62px;
}

.sf-attendance-shift-title {
  min-height: 54px;
  padding: 13px 18px 12px;
}

.sf-attendance-shift-title h2 {
  font-size: clamp(21px, 1.55vw, 27px);
}

.sf-attendance-shift-title h2::after {
  bottom: -9px;
  width: 72px;
}

.sf-attendance-table th,
.sf-attendance-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

html[data-theme="dark"] .sf-attendance-step {
  color: #dce8f6;
  background: #132338;
  border-color: #304861;
}

html[data-theme="dark"] .sf-attendance-step:disabled {
  color: #7890aa;
  background: #101d2d;
  border-color: #26394d;
  opacity: 1;
}

/* Restore form wrappers as layout primitives, not painted controls. */
html[data-theme="dark"] body .sf-modal :where(
  .sf-field,
  .sf-fixed-field,
  .sf-duration-picker,
  .sf-bulk-staff
) {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-field > label,
  .sf-fixed-field > label,
  .sf-duration-picker > label,
  .sf-bulk-staff__head > label,
  .sf-shift-picker > label,
  .sf-change-flow__head strong,
  .sf-display-settings__fieldset legend
) {
  color: #b9c9db !important;
}

.sf-modal--staff .sf-modal__body {
  gap: 13px;
}

.sf-modal--staff .sf-field {
  gap: 6px;
  padding: 0;
}

html[data-theme="dark"] .sf-modal--staff .sf-field {
  background: transparent !important;
}

html[data-theme="dark"] .sf-modal--staff .sf-custom-select__button,
html[data-theme="dark"] .sf-modal--staff .sf-field input {
  color: #edf4fd !important;
  background: #132338 !important;
  border-color: #304861 !important;
}

/* Let the create form use its content height; retain scrolling at short viewports. */
.sf-modal.sf-modal--shift.is-create {
  height: auto;
  max-height: calc(100dvh - 32px);
}

.sf-modal.sf-modal--shift.is-create .sf-modal__body {
  gap: 13px;
}

.sf-modal.sf-modal--shift.is-create .sf-bulk-staff__list {
  max-height: 188px;
}

.sf-modal.sf-modal--shift .sf-shift-picker {
  padding: 12px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-picker {
  background: #101f31 !important;
  border-color: #2d435a !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice__copy strong,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__copy strong {
  color: #f3f8fe !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice__copy em,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__copy em {
  color: #9fb2c7 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card {
  background: #1b4d7d !important;
  border-color: #48a3f5 !important;
  box-shadow: 0 0 0 2px rgba(72, 163, 245, .16) !important;
}

.sf-modal--change-shift .sf-change-flow {
  gap: 9px;
}

.sf-modal--change-shift .sf-modal__foot {
  gap: 8px;
}

.sf-modal.sf-modal--shift.sf-modal--manage-shift .sf-modal__body {
  padding: 14px 20px;
}

.sf-modal.sf-modal--shift.sf-modal--manage-shift .sf-modal__foot {
  padding: 14px 20px 16px;
}

.sf-modal.sf-modal--share .sf-share-modal__body {
  padding-bottom: 18px;
}

.sf-modal.sf-modal--share .sf-modal__foot--share {
  min-height: 68px;
  align-items: center;
}

@media (max-width: 720px) {
  .sf-attendance-hero {
    padding: 14px 14px 11px;
  }

  .sf-attendance-toolbar,
  .sf-attendance-toolbar--clean {
    min-height: 0;
  }

  .sf-attendance-shift-title {
    min-height: 50px;
  }

  .sf-modal--month-preview {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-width: none;
    max-height: none;
  }

  .sf-modal--month-preview .sf-month-preview__head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .sf-modal--month-preview .sf-month-legend {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    flex-wrap: wrap;
  }

  .sf-modal--month-preview .sf-month-preview__head > .sf-modal__close {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Dark theme visual audit
   Keep this final layer after legacy component styles so every nested view
   uses the same dark surfaces, readable text, and control states. */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .sf-app,
html[data-theme="dark"] .sf-main,
html[data-theme="dark"] .sf-page {
  color: #edf4fd !important;
  background: #07101d !important;
}

html[data-theme="dark"] :where(
  .sf-topbar,
  .sf-sidebar,
  .sf-toolbar,
  .sf-tabs,
  .sf-list-toolbar
) {
  color: #dce7f4 !important;
  background: #0b1726 !important;
  border-color: #27394d !important;
}

html[data-theme="dark"] :where(
  .sf-sidebar__link,
  .sf-sidebar__sublink,
  .sf-tabs__item,
  .sf-toolbar button
) {
  color: #afbed0 !important;
}

html[data-theme="dark"] :where(
  .sf-sidebar__link.is-active,
  .sf-sidebar__sublink.is-active,
  .sf-tabs__item.is-active
) {
  color: #f5f9ff !important;
}

html[data-theme="dark"] .sf-schedule-table {
  color: #eaf2fc !important;
  background: #0a1624 !important;
  border-color: #2b3e53 !important;
}

html[data-theme="dark"] .sf-schedule-table :where(th, td) {
  border-color: #2a4058 !important;
}

html[data-theme="dark"] .sf-schedule-table :where(
  thead th,
  .sf-day-head
) {
  color: #dce7f4 !important;
  background: #111f30 !important;
  border-color: #2c4259 !important;
}

html[data-theme="dark"] .sf-schedule-table :where(
  thead th span,
  thead th strong,
  thead th small,
  .sf-day-head span,
  .sf-day-head strong,
  .sf-day-head small
) {
  color: inherit !important;
}

html[data-theme="dark"] .sf-schedule-table :where(
  .sf-role-cell,
  .sf-name-cell
) {
  background: #0c1928 !important;
  border-color: #2a4058 !important;
}

html[data-theme="dark"] .sf-schedule-table .sf-role-cell {
  color: #8fb9e4 !important;
}

html[data-theme="dark"] .sf-schedule-table .sf-name-cell,
html[data-theme="dark"] .sf-schedule-table .sf-name-cell :where(
  strong,
  span,
  a
) {
  color: #f1f6fc !important;
}

html[data-theme="dark"] .sf-schedule-table :where(
  .sf-total-row th,
  .sf-total-row td,
  .sf-total-count,
  .sf-total-label,
  .sf-total-sticky-blank
) {
  color: #dce8f6 !important;
  background: #111f30 !important;
  border-color: #2c4259 !important;
}

html[data-theme="dark"] :where(
  .sf-attendance-hero,
  .sf-attendance-nav,
  .sf-attendance-section,
  .sf-attendance-section--pagi,
  .sf-attendance-section--malam,
  .sf-attendance-shift-title,
  .sf-attendance-table-wrap
) {
  color: #eaf2fc !important;
  background: #0c1928 !important;
  border-color: #2a3e54 !important;
}

html[data-theme="dark"] :where(
  .sf-attendance-hero__title,
  .sf-attendance-hero__title h1,
  .sf-attendance-hero__title h2,
  .sf-attendance-shift-title,
  .sf-attendance-shift-title h1,
  .sf-attendance-shift-title h2
) {
  color: #f5f9ff !important;
}

html[data-theme="dark"] .sf-attendance-table {
  color: #eaf2fc !important;
  background: #0b1725 !important;
}

html[data-theme="dark"] .sf-attendance-table :where(th, td) {
  border-color: #293d52 !important;
}

html[data-theme="dark"] .sf-attendance-table thead th {
  color: #f2f7fd !important;
  background: #17283c !important;
}

html[data-theme="dark"] .sf-attendance-table tbody tr {
  background: #0c1928 !important;
}

html[data-theme="dark"] .sf-attendance-table tbody tr:hover {
  background: #112239 !important;
}

html[data-theme="dark"] .sf-attendance-table tbody :where(
  td,
  strong,
  span,
  small
) {
  color: #e7f0fa !important;
}

html[data-theme="dark"] :where(
  .sf-attendance-date-control,
  .sf-attendance-nav__button
) {
  color: #e6f0fb !important;
  background: #132338 !important;
  border-color: #304861 !important;
}

html[data-theme="dark"] .sf-crosscheck-btn {
  color: #63a8ff !important;
}

html[data-theme="dark"] .sf-page--staff {
  color: #eaf2fc !important;
  background: #081421 !important;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table {
  color: #eaf2fc !important;
  background: #0b1725 !important;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table :where(th, td) {
  border-color: #293d52 !important;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table thead th {
  color: #9eb8d4 !important;
  background: #111f30 !important;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table tbody tr {
  background: #0c1928 !important;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table tbody tr:hover {
  background: #112239 !important;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table tbody :where(
  td,
  strong,
  span,
  a
) {
  color: #edf4fd !important;
}

html[data-theme="dark"] .sf-page--staff :where(
  input[type="search"],
  input[type="text"],
  .sf-search-box,
  .sf-staff-status-filter__trigger
) {
  color: #edf4fd !important;
  background: #122237 !important;
  border-color: #304861 !important;
}

html[data-theme="dark"] body .sf-modal,
html[data-theme="dark"] body .sf-modal .sf-modal__head,
html[data-theme="dark"] body .sf-modal .sf-modal__body,
html[data-theme="dark"] body .sf-modal .sf-modal__foot {
  color: #eaf2fc !important;
  background: #0d1a2a !important;
  border-color: #2b4057 !important;
}

html[data-theme="dark"] body .sf-modal {
  box-shadow: 0 28px 80px rgba(0, 0, 0, .52) !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-modal__head h1,
  .sf-modal__head h2,
  .sf-modal__head h3,
  .sf-modal__title,
  .sf-field label,
  .sf-section-label,
  legend
) {
  color: #f4f8fe !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-modal__head p,
  .sf-modal__subtitle,
  .sf-field-help
) {
  color: #9eb0c5 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .sf-field,
  .sf-control,
  .sf-fixed-value,
  .sf-custom-select__button,
  .sf-staff-status-filter__trigger,
  .sf-date-menu__trigger,
  .sf-change-date-field
) {
  color: #edf4fd !important;
  background: #122237 !important;
  border-color: #304861 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  input,
  textarea
)::placeholder {
  color: #7f94ac !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body .sf-modal option {
  color: #edf4fd !important;
  background: #122237 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-custom-select__menu,
  .sf-staff-status-filter__menu,
  .sf-date-menu__popover,
  .sf-date-popover
) {
  color: #eaf2fc !important;
  background: #101f32 !important;
  border-color: #304861 !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .4) !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-staff-picker,
  .sf-staff-picker__list,
  .sf-bulk-staff,
  .sf-staff-check
) {
  color: #e9f2fc !important;
  background: #101f31 !important;
  border-color: #2b4159 !important;
}

html[data-theme="dark"] body .sf-modal .sf-staff-check:hover {
  background: #152941 !important;
  border-color: #4278aa !important;
}

html[data-theme="dark"] body .sf-modal .sf-staff-check__copy :where(
  strong,
  span
) {
  color: #edf4fd !important;
}

html[data-theme="dark"] body .sf-modal .sf-staff-check__copy :where(
  small,
  em
) {
  color: #95a9bf !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-duration-choice,
  .sf-shift-choice__card,
  .sf-display-option,
  .sf-flow-builder__item,
  .sf-manage-shift__option,
  .sf-share-brief,
  .sf-share-feed,
  .sf-share-summary,
  .sf-share-format
) {
  color: #eaf2fc !important;
  background: #122237 !important;
  border-color: #304861 !important;
}

html[data-theme="dark"] body .sf-modal .sf-shift-choice__card.is-selected {
  color: #f7fbff !important;
  background: #12345c !important;
  border-color: #469bf0 !important;
  box-shadow: 0 0 0 2px rgba(70, 155, 240, .18) !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-display-option__copy strong,
  .sf-flow-builder__text strong,
  .sf-manage-shift__option strong,
  .sf-share-brief__content strong,
  .sf-share-feed strong,
  .sf-share-summary strong
) {
  color: #f1f6fc !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-display-option__copy em,
  .sf-flow-builder__text small,
  .sf-manage-shift__option small,
  .sf-share-brief__content small,
  .sf-share-feed small
) {
  color: #96a9bf !important;
}

html[data-theme="dark"] body .sf-modal--share :where(
  .sf-share-hero,
  .sf-share-brief__content
) {
  color: #edf4fd !important;
  background: linear-gradient(135deg, #132a43, #102236) !important;
  border-color: #31506d !important;
}

html[data-theme="dark"] body .sf-modal--share .sf-share-hero :where(
  strong,
  span,
  small
) {
  color: #edf4fd !important;
}

html[data-theme="dark"] body .sf-modal--change-shift :where(
  .sf-change-shift__body,
  .sf-change-shift__content,
  .sf-flow-builder
) {
  color: #eaf2fc !important;
  background: #0d1a2a !important;
}

html[data-theme="dark"] body .sf-modal--change-shift .sf-flow-builder__item {
  background: #13243a !important;
}

html[data-theme="dark"] body .sf-modal--display-settings .sf-display-option:has(input:checked) {
  color: #f5f9ff !important;
  background: linear-gradient(135deg, #17385f, #11263f) !important;
  border-color: #469bf0 !important;
}

html[data-theme="dark"] body .sf-modal--month-preview {
  color: #eaf2fc !important;
  background: #0a1624 !important;
}

html[data-theme="dark"] body .sf-modal--month-preview :where(
  table,
  thead,
  tbody,
  tr,
  th,
  td
) {
  border-color: #2a4058 !important;
}

html[data-theme="dark"] body .sf-modal .sf-btn:not(
  .sf-btn--primary
):not(
  .sf-btn--danger
) {
  color: #dce8f6 !important;
  background: #132338 !important;
  border-color: #304861 !important;
}

html[data-theme="dark"] body .sf-modal .sf-btn--primary {
  color: #fff !important;
  background: linear-gradient(135deg, #317fd5, #2368b6) !important;
  border-color: #4597e9 !important;
}

/* Screenshot audit: containment, table rhythm, and modal consistency.
   This layer intentionally adjusts layout only; component behavior stays intact. */
.sf-main,
.sf-content,
.sf-page,
.sf-table-panel,
.sf-staff-panel,
.sf-attendance-panel,
.sf-table-wrap,
.sf-staff-table-wrap,
.sf-attendance-table-wrap {
  min-width: 0;
}

.sf-toolbar__left,
.sf-toolbar__right,
.sf-title-block,
.sf-search {
  min-width: 0;
}

.sf-search input,
.sf-control,
.sf-custom-select,
.sf-custom-select__button,
.sf-date-menu,
.sf-date-menu__trigger {
  max-width: 100%;
}

.sf-schedule-table :where(.sf-role-head, .sf-name-head, .sf-role-cell, .sf-name-cell),
.sf-staff-table :where(th, td),
.sf-attendance-table :where(th, td) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-schedule-table .sf-name-cell strong,
.sf-staff-table td strong,
.sf-attendance-table td strong {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-staff-table-wrap,
.sf-attendance-table-wrap {
  overscroll-behavior-inline: contain;
}

.sf-modal-backdrop {
  overflow: auto;
}

.sf-modal {
  min-width: 0;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}

.sf-modal__head,
.sf-modal__foot {
  min-width: 0;
}

.sf-modal__head > :first-child,
.sf-modal__body,
.sf-field,
.sf-fixed-field,
.sf-bulk-staff,
.sf-duration-picker,
.sf-shift-picker,
.sf-change-flow {
  min-width: 0;
}

.sf-modal__body {
  overflow-x: hidden;
  overflow-y: auto;
}

.sf-modal :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .sf-control,
  .sf-custom-select__button,
  .sf-date-menu__trigger,
  .sf-fixed-value
) {
  width: 100%;
  max-width: 100%;
}

.sf-modal__foot {
  gap: 10px;
}

html[data-theme="dark"] :where(
  .sf-brand strong,
  .sf-title-block h1,
  .sf-title-block h2,
  .sf-list-toolbar h2,
  .sf-page-kicker,
  .sf-summary strong,
  .sf-summary span
) {
  color: #edf4fd !important;
}

html[data-theme="dark"] :where(
  .sf-schedule-table .sf-name-cell strong,
  .sf-staff-table td strong,
  .sf-attendance-table td strong,
  .sf-attendance-table td,
  .sf-staff-table td
) {
  color: #edf4fd !important;
}

html[data-theme="dark"] body .sf-modal :where(
  h1,
  h2,
  h3,
  h4,
  label,
  legend,
  strong,
  b
) {
  color: #eef5fd;
}

html[data-theme="dark"] body .sf-modal :where(
  p,
  small,
  em,
  .sf-muted,
  .sf-field-help
) {
  color: #9fb1c6;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-modal__head,
  .sf-modal__body,
  .sf-modal__foot,
  .sf-display-settings__body,
  .sf-share-modal__body
) {
  background: #0d1a2a !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-display-preview-link,
  .sf-shift-picker,
  .sf-manage-shift__options,
  .sf-staff-filters,
  .sf-duration-options,
  .sf-share-format
) {
  background-color: #101f31 !important;
  border-color: #2c4259 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-display-preview-link,
  .sf-manage-shift__option,
  .sf-duration-choice span,
  .sf-shift-choice__card,
  .sf-staff-check
) {
  color: #eaf2fc !important;
  background: #122237 !important;
  border-color: #304861 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-display-preview-link:hover,
  .sf-manage-shift__option:hover,
  .sf-duration-choice span:hover,
  .sf-shift-choice__card:hover,
  .sf-staff-check:hover
) {
  background: #172b43 !important;
  border-color: #466784 !important;
}

html[data-theme="dark"] body .sf-modal .sf-duration-choice input:checked + span,
html[data-theme="dark"] body .sf-modal .sf-staff-check:has(input:checked) {
  color: #dffbf4 !important;
  background: #123a38 !important;
  border-color: #3fae98 !important;
}

html[data-theme="dark"] body .sf-modal .sf-shift-choice input:checked + .sf-shift-choice__card {
  color: #f7fbff !important;
  background: #17375a !important;
  border-color: #469bf0 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-custom-select__menu,
  .sf-date-menu__panel,
  .sf-shift-date-menu .sf-date-menu__panel
) {
  color: #eaf2fc !important;
  background: #101f31 !important;
  border-color: #304861 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-custom-select__option,
  .sf-date-menu__day
) {
  color: #dce8f6 !important;
  background: #132338 !important;
}

html[data-theme="dark"] body .sf-modal :where(
  .sf-custom-select__option:hover,
  .sf-custom-select__option:focus-visible,
  .sf-date-menu__day:hover,
  .sf-date-menu__day:focus-visible
) {
  color: #fff !important;
  background: #1b3552 !important;
}

@media (max-width: 980px) {
  .sf-page--staff .sf-toolbar {
    align-items: stretch;
  }

  .sf-page--staff .sf-toolbar__right {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    width: 100%;
  }

  .sf-page--staff .sf-search {
    width: auto;
  }
}

@media (max-width: 720px) {
  html,
  body,
  .sf-app,
  .sf-shell {
    min-width: 0;
  }

  .sf-topbar {
    min-width: 0;
  }

  .sf-toolbar,
  .sf-page--staff .sf-toolbar {
    gap: 12px;
    padding: 12px 14px;
  }

  .sf-toolbar__left,
  .sf-toolbar__right {
    align-items: stretch;
  }

  .sf-page--staff {
    height: calc(100dvh - var(--topbar));
  }

  .sf-page--staff .sf-toolbar__right {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sf-list-toolbar {
    min-height: 44px;
    padding-inline: 14px;
  }

  .sf-staff-table {
    width: max-content;
    min-width: 720px;
  }

  .sf-staff-table th,
  .sf-staff-table td {
    padding: 10px 12px;
  }

  .sf-staff-table th:nth-child(1),
  .sf-staff-table td:nth-child(1) { width: 72px; }
  .sf-staff-table th:nth-child(2),
  .sf-staff-table td:nth-child(2) { width: 240px; }
  .sf-staff-table th:nth-child(3),
  .sf-staff-table td:nth-child(3) { width: 130px; }
  .sf-staff-table th:nth-child(4),
  .sf-staff-table td:nth-child(4) { width: 130px; }
  .sf-staff-table th:nth-child(5),
  .sf-staff-table td:nth-child(5) { width: 120px; }

  .sf-attendance-table {
    width: max-content;
    min-width: 1040px;
  }

  .sf-attendance-table th,
  .sf-attendance-table td {
    padding: 11px 12px;
    white-space: nowrap;
  }

  .sf-modal-backdrop {
    place-items: center;
    padding: 12px;
  }

  .sf-modal,
  .sf-modal--shift,
  .sf-modal--change-shift,
  .sf-modal--display-settings,
  .sf-modal.sf-modal--shift.sf-modal--manage-shift {
    width: 100%;
    max-width: 560px;
    max-height: calc(100dvh - 24px);
  }

  .sf-modal__head,
  .sf-modal--staff .sf-modal__head {
    padding: 16px;
  }

  .sf-modal__body,
  .sf-modal--staff .sf-modal__body,
  .sf-display-settings__body,
  .sf-modal.sf-modal--share .sf-share-modal__body {
    padding: 14px 16px;
  }

  .sf-modal__foot,
  .sf-modal--staff .sf-modal__foot,
  .sf-modal.sf-modal--share .sf-modal__foot--share {
    padding: 12px 16px;
  }
}

@media (max-width: 520px) {
  .sf-modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .sf-modal,
  .sf-modal--shift,
  .sf-modal--change-shift,
  .sf-modal--display-settings,
  .sf-modal.sf-modal--shift.sf-modal--manage-shift {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 8px);
    border-radius: 18px 18px 0 0;
  }

  .sf-bulk-staff__list,
  .sf-duration-options,
  .sf-shift-options,
  .sf-display-option {
    grid-template-columns: 1fr;
  }

  .sf-display-option {
    gap: 8px;
  }

  .sf-display-option__check {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .sf-modal__foot {
    flex-wrap: wrap;
  }

  .sf-modal__foot .sf-btn {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
  }
}

/* Final Share Shift color cleanup. */
html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed__item {
  background: transparent !important;
  border-color: #273e55 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed__node {
  width: 34px;
  height: 34px;
  color: #62d5b9 !important;
  background: rgba(34, 169, 133, .08) !important;
  border-color: #2b6f63 !important;
  border-radius: 50%;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed__head strong {
  color: #eef5fd !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed__head span {
  color: #91a7bd !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed li {
  color: #b7c8d9 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed__head em {
  color: #7ee0c6 !important;
  background: rgba(34, 169, 133, .12) !important;
  border: 1px solid rgba(77, 197, 166, .22);
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format,
html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format:hover,
html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format[open] {
  color: #c5d3e1 !important;
  background: #0f1e2f !important;
  border-color: #2d455e !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format summary {
  color: #c5d3e1 !important;
  background: transparent !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format summary span i {
  color: #58cdb0 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format summary > i {
  color: #8fa8c1 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-format pre {
  max-height: 220px;
  margin: 0;
  padding: 12px 13px 14px;
  border-top: 1px solid #293f56;
  color: #bdccda !important;
  background: #0a1726 !important;
  font-size: 10px;
  line-height: 1.65;
  white-space: pre-wrap;
}

html[data-theme="dark"] .sf-modal.sf-modal--share .sf-share-feed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Premium dark treatment for Display Settings. */
html[data-theme="dark"] .sf-modal.sf-modal--display-settings {
  overflow: hidden;
  background: #111f30 !important;
  border-color: #36506a !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-modal__head {
  padding: 19px 22px 17px;
  background:
    radial-gradient(circle at 12% 0, rgba(74, 145, 231, .14), transparent 38%),
    linear-gradient(135deg, #162a3f, #122235) !important;
  border-color: #314961 !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-modal__head h3 {
  color: #f4f8fd !important;
  letter-spacing: -.015em;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-modal__head p {
  color: #a8bdd2 !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-settings__body {
  gap: 15px;
  padding: 18px 22px 20px;
  background: #111f30 !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-preview-link {
  min-height: 60px;
  border-color: #3a5773 !important;
  background: linear-gradient(135deg, #1a3048, #162a40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 8px 20px rgba(2, 8, 16, .12);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-preview-link:hover,
html[data-theme="dark"] .sf-modal--display-settings .sf-display-preview-link:focus-visible {
  border-color: #5a82aa !important;
  background: linear-gradient(135deg, #1d3855, #193049) !important;
  box-shadow:
    0 0 0 3px rgba(75, 145, 230, .10),
    0 12px 26px rgba(2, 8, 16, .18) !important;
  transform: translateY(-1px);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-preview-link__icon {
  color: #6fb1f5 !important;
  background: #e9f3ff !important;
  box-shadow: 0 4px 12px rgba(3, 10, 20, .18);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-preview-link strong {
  color: #eef5fd !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-preview-link em,
html[data-theme="dark"] .sf-modal--display-settings .sf-display-preview-link > i {
  color: #9db2c8 !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-settings__fieldset {
  gap: 9px;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-settings__fieldset legend {
  margin-bottom: 2px;
  color: #bed0e1 !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option {
  min-height: 64px;
  border-color: #304b65 !important;
  background: linear-gradient(135deg, #172b41, #15283c) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transform: none;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option:hover {
  border-color: #496d8e !important;
  background: linear-gradient(135deg, #1a324b, #172d44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 8px 20px rgba(2, 8, 16, .14) !important;
  transform: none;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option:has(input:checked) {
  border-color: #559de5 !important;
  background:
    linear-gradient(135deg, rgba(51, 123, 196, .35), rgba(28, 69, 110, .42)),
    #18334f !important;
  box-shadow:
    0 0 0 2px rgba(75, 145, 230, .12),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__visual {
  color: #63aaf2 !important;
  background: rgba(9, 24, 39, .38) !important;
  border: 1px solid rgba(96, 137, 177, .12);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__visual i:nth-child(2n),
html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__visual--pagi i:nth-child(n + 3),
html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__visual--malam i {
  color: #7890aa !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__visual--malam i:nth-child(n + 3) {
  color: #63aaf2 !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__copy strong {
  color: #eef5fd !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__copy em {
  color: #9fb2c6 !important;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__check {
  border-color: #7890a8 !important;
  background: rgba(8, 20, 33, .24);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option:has(input:checked) .sf-display-option__check {
  color: #fff !important;
  background: #3f91e5 !important;
  border-color: #71b2f1 !important;
  box-shadow: 0 0 0 4px rgba(63, 145, 229, .10);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-modal__foot {
  padding: 14px 22px 18px;
  background: linear-gradient(180deg, #101e2e, #0e1b2a) !important;
  border-color: #314961 !important;
}

/* Month preview: keep staff identity legible and use square schedule cells. */
html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody .sf-month-name {
  color: #e7f0fb !important;
  background: #101c2b !important;
  opacity: 1;
}

html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody .sf-month-role {
  color: #8fb7df !important;
  opacity: 1;
}

.sf-modal--month-preview .sf-month-badge,
.sf-modal--month-preview .sf-month-badge--lane,
.sf-modal--month-preview .sf-month-badge--lane.is-run-start,
.sf-modal--month-preview .sf-month-badge--lane.is-run-end,
.sf-modal--month-preview .sf-month-badge--lane.is-run-start.is-run-end,
.sf-modal--month-preview .sf-month-badge.is-month-end {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  border-radius: 0;
}

/* Month preview: square table frame and keep every date readable. */
.sf-modal--month-preview .sf-month-preview__table-wrap {
  border-radius: 0 !important;
}

.sf-modal--month-preview .sf-month-preview-table thead th {
  color: #60758d !important;
}

.sf-modal--month-preview .sf-month-preview-table thead span {
  color: #60758d !important;
  opacity: 1;
}

.sf-modal--month-preview .sf-month-preview-table thead strong {
  color: #172b43 !important;
  opacity: 1;
}

.sf-modal--month-preview .sf-month-preview-table thead th.is-today,
.sf-modal--month-preview .sf-month-preview-table thead th.is-today span,
.sf-modal--month-preview .sf-month-preview-table thead th.is-today strong {
  color: #17324d !important;
}

/* Change Shift: unified dark surfaces and a compact, scroll-free calendar state. */
html[data-theme="dark"] .sf-modal.sf-modal--change-shift {
  width: min(590px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  color: #e7f0fa;
  background: #101d2d !important;
  border-color: #30475f !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .44);
  transition: width .22s cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift:has(.sf-change-date-menu[open]) {
  width: min(820px, calc(100vw - 32px));
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__head {
  padding: 18px 22px;
  background: #101d2d !important;
  border-color: #2d4359 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__head h3 {
  color: #f4f8fd;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__body {
  gap: 16px;
  padding: 18px 22px 20px;
  overflow: visible;
  background: #101d2d !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift:has(.sf-change-date-menu[open]) .sf-modal__body {
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  align-items: start;
  min-height: 0;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-field,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-flow,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__actions {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-field {
  gap: 7px;
  padding: 0 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-field > label,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-flow__head span {
  color: #b8c9da !important;
  font-size: 11px;
  font-weight: 800;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-flow__head span::before {
  display: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:hover,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:focus-visible,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger {
  min-height: 48px;
  color: #edf4fc !important;
  background: #14263a !important;
  border-color: #36516b !important;
  border-radius: 12px;
  box-shadow: none !important;
  transform: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:hover,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:focus-visible,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger {
  border-color: #4c7796 !important;
  background: #172c43 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger i:first-child {
  color: #55cbb5 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger i:last-child {
  color: #89a1ba !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__panel {
  display: none;
  position: static;
  width: 100%;
  max-width: none;
  margin-top: 10px;
  padding: 14px;
  background: #111f31 !important;
  border-color: #314a63 !important;
  border-radius: 14px;
  box-shadow: none !important;
  transform-origin: top center;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__panel,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu.is-open .sf-date-menu__panel {
  display: grid;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift:has(.sf-change-date-menu[open]) .sf-change-flow {
  margin-top: 0;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__head {
  padding: 2px 2px 10px;
  background: transparent !important;
  border-radius: 0;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__head span,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__weekdays span {
  color: #8298ae !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__head strong {
  color: #e7eff9 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__blank {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day {
  min-height: 36px;
  color: #cad7e5 !important;
  background: #16273a !important;
  border: 1px solid #354c64 !important;
  border-radius: 9px;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day:hover,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day:focus-visible {
  color: #fff !important;
  background: #1c344e !important;
  border-color: #5682a6 !important;
  box-shadow: none !important;
  transform: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-today:not(.is-active) {
  color: #7edbc8 !important;
  background: #142b3a !important;
  border-color: #367b72 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__day.is-active {
  color: #fff !important;
  background: #337fc2 !important;
  border-color: #62a8e7 !important;
  box-shadow: 0 6px 16px rgba(35, 103, 163, .24) !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-flow {
  gap: 8px;
  margin-top: 0;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder {
  gap: 7px;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item:hover {
  min-height: 61px;
  padding: 9px 10px;
  overflow: visible;
  background: #142438 !important;
  border-color: #304a63 !important;
  border-radius: 12px;
  box-shadow: none !important;
  transform: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item::before {
  display: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__index {
  width: 38px;
  height: 38px;
  background: #172b42 !important;
  border: 1px solid var(--flow-accent);
  border-radius: 50%;
  box-shadow: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__text em {
  color: #91a5b9 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__actions {
  gap: 3px;
  padding: 0;
  border: 0 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__move {
  width: 30px;
  height: 30px;
  color: #9bb0c5;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__move:hover:not(:disabled),
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__move:focus-visible:not(:disabled) {
  color: #fff;
  background: #203953;
  box-shadow: none;
  transform: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__foot {
  padding: 14px 22px 18px;
  background: #0e1a29 !important;
  border-color: #2d4359 !important;
}

@media (max-width: 720px) {
  html[data-theme="dark"] .sf-modal.sf-modal--change-shift:has(.sf-change-date-menu[open]) {
    width: min(590px, calc(100vw - 24px));
  }

  html[data-theme="dark"] .sf-modal.sf-modal--change-shift:has(.sf-change-date-menu[open]) .sf-modal__body {
    display: grid;
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

/* Shift forms: one premium dark visual system for add, leave, and delete. */
html[data-theme="dark"] .sf-modal.sf-modal--shift:not(.sf-modal--manage-shift) {
  width: min(520px, calc(100vw - 32px));
  color: #e8f1fb;
  background: #101d2d !important;
  border-color: #30475f !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .44);
}

html[data-theme="dark"] .sf-modal.sf-modal--shift.is-create,
html[data-theme="dark"] .sf-modal.sf-modal--shift.is-edit,
html[data-theme="dark"] .sf-modal.sf-modal--shift.sf-modal--delete-shifts {
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 32px);
  grid-template-rows: auto minmax(0, auto) auto;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift:not(.sf-modal--manage-shift) .sf-modal__head {
  padding: 18px 22px 16px;
  background: #101d2d !important;
  border-color: #2d4359 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift:not(.sf-modal--manage-shift) .sf-modal__head h3 {
  color: #f4f8fd !important;
  letter-spacing: -.01em;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift:not(.sf-modal--manage-shift) .sf-modal__head p {
  margin-top: 4px;
  color: #8ebbe6 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift:not(.sf-modal--manage-shift) .sf-modal__body {
  gap: 14px;
  padding: 12px 22px 16px;
  background: #101d2d !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift:not(.sf-modal--manage-shift) :where(
  .sf-bulk-staff,
  .sf-duration-picker,
  .sf-duration-options,
  .sf-duration-date,
  .sf-leave-range,
  .sf-shift-picker,
  .sf-shift-options
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff {
  gap: 8px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__head {
  min-height: 26px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift :where(
  .sf-bulk-staff__head > label,
  .sf-duration-picker > label,
  .sf-duration-date > label,
  .sf-leave-range .sf-field > span,
  .sf-shift-picker > label
) {
  color: #bdccdc !important;
  font-size: 11px;
  font-weight: 800;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__head span {
  color: #91a5bb !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__head span.has-selection {
  color: #6fd6bc !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-select-all-btn {
  color: #8edbc8 !important;
  background: #142b36 !important;
  border-color: #326a64 !important;
  box-shadow: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-select-all-btn:hover,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-select-all-btn:focus-visible,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-select-all-btn.is-selected {
  color: #dffbf4 !important;
  background: #174039 !important;
  border-color: #4bb69d !important;
  transform: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-filters {
  min-height: 31px;
  padding: 0 2px;
  background: transparent !important;
  border-color: #2c435a !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-filters button {
  color: #8298ae !important;
  background: transparent !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-filters button:hover,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-filters button:focus-visible {
  color: #d7e4f1 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-filters button.is-active {
  color: #69d4bb !important;
  box-shadow: inset 0 -2px 0 #36b99c;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__list {
  max-height: 184px;
  gap: 7px;
  padding: 7px;
  overflow-y: auto;
  color: #e8f1fb !important;
  background: #0c1827 !important;
  border: 1px solid #2c435a !important;
  border-radius: 12px;
  scrollbar-color: #49647f #0c1827;
  scrollbar-width: thin;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__list::-webkit-scrollbar {
  width: 7px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__list::-webkit-scrollbar-track {
  background: #0c1827;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__list::-webkit-scrollbar-thumb {
  border: 2px solid #0c1827;
  border-radius: 999px;
  background: #49647f;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__list::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-check,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-check:hover {
  min-height: 44px;
  color: #eaf2fc !important;
  background: #14263a !important;
  border-color: #2c455e !important;
  border-radius: 10px;
  box-shadow: none !important;
  transform: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-check:hover {
  background: #182e46 !important;
  border-color: #426989 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-check:has(input:checked) {
  background: #143a38 !important;
  border-color: #3cab95 !important;
  box-shadow: inset 3px 0 0 #46c0a4 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-check__mark {
  background: #101d2d;
  border-color: #7890a8;
  border-radius: 6px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-check__copy strong {
  color: #f0f6fd !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-staff-check__copy em {
  color: #86a2bd !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-duration-options {
  gap: 8px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-duration-choice span,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-duration-choice span:hover {
  min-height: 40px;
  color: #c3d1df !important;
  background: #14263a !important;
  border-color: #304a63 !important;
  border-radius: 11px;
  box-shadow: none !important;
  transform: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-duration-choice span:hover {
  color: #edf5fd !important;
  background: #192f47 !important;
  border-color: #496e8e !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-duration-choice input:checked + span {
  color: #dffbf4 !important;
  background: #143b38 !important;
  border-color: #3eb297 !important;
  box-shadow: inset 0 0 0 1px rgba(91, 210, 182, .08) !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-duration-choice input:checked + span i {
  color: #67d4ba !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-leave-range {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift :where(
  .sf-duration-date,
  .sf-leave-range .sf-field
) {
  gap: 6px;
  padding: 0 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-date-menu .sf-date-menu__trigger,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-date-menu[open] .sf-date-menu__trigger {
  min-height: 45px;
  color: #edf4fc !important;
  background: #14263a !important;
  border-color: #34506a !important;
  border-radius: 11px;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-date-menu .sf-date-menu__trigger:hover,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-date-menu .sf-date-menu__trigger:focus-visible {
  background: #192f47 !important;
  border-color: #4b7394 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-date-menu .sf-date-menu__trigger i:first-child {
  color: #56cbb5 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-date-menu .sf-date-menu__trigger i:last-child {
  color: #7f99b2 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-picker {
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-options {
  gap: 8px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice__card,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice:hover .sf-shift-choice__card {
  min-height: 60px;
  padding: 9px 10px;
  color: #e7f0fa !important;
  background: #14263a !important;
  border-color: #34506a !important;
  border-radius: 12px;
  box-shadow: none !important;
  transform: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice:hover .sf-shift-choice__card {
  background: #192f47 !important;
  border-color: #4b7394 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card {
  color: #f7fbff !important;
  background: #1b4b77 !important;
  border-color: #55a8ed !important;
  box-shadow: 0 0 0 2px rgba(75, 157, 229, .15) !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice__icon {
  background: #eef5fd !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice__copy strong,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__copy strong {
  color: #f1f6fc !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice__copy em,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__copy em {
  color: #a0b3c7 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice__selected {
  background: #f8fbff !important;
  border-color: #c8d6e5 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__selected {
  color: #fff !important;
  background: #3f94df !important;
  border-color: #65b1f1 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--cuti input:checked + .sf-shift-choice__card {
  background: #4a3d20 !important;
  border-color: #d7a62e !important;
  box-shadow: 0 0 0 2px rgba(215, 166, 46, .13) !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--cuti input:checked + .sf-shift-choice__card .sf-shift-choice__selected {
  background: #d9a421 !important;
  border-color: #efc359 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift:not(.sf-modal--manage-shift) .sf-modal__foot {
  gap: 10px;
  padding: 14px 22px 18px;
  background: #0e1a29 !important;
  border-color: #2d4359 !important;
  box-shadow: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift:not(.sf-modal--manage-shift) .sf-modal__foot .sf-btn {
  min-height: 40px;
}

html[data-theme="dark"] .sf-modal.sf-modal--delete-shifts .sf-modal__foot .sf-btn:first-child {
  flex: 1 1 auto;
}

@media (max-width: 560px) {
  html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-bulk-staff__list,
  html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-leave-range {
    grid-template-columns: 1fr;
  }
}

/* Attendance: remove painted layout wrappers and keep only meaningful controls. */
html[data-theme="dark"] .sf-page--attendance {
  color: #e7f0fa;
  background: #0c1928 !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-hero {
  background: #0c1928 !important;
  border-color: #2a3e54 !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-hero__title {
  border-color: #30465d;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-hero__title > span {
  width: auto;
  height: auto;
  color: #8fc5f4 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-toolbar,
html[data-theme="dark"] .sf-page--attendance .sf-attendance-toolbar--clean {
  color: #dce8f5;
  background: #0c1928 !important;
  border-color: #2a3e54 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-toolbar .sf-toolbar__right {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-date-control {
  padding: 0;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-step {
  color: #bfd0e2;
  background: transparent !important;
  border-color: #34506a;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-step::before {
  display: none;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-step:hover,
html[data-theme="dark"] .sf-page--attendance .sf-attendance-step:focus-visible {
  color: #f3f8fe;
  background: #14263a !important;
  border-color: #4c7394;
  box-shadow: none !important;
  transform: none;
}

html[data-theme="dark"] .sf-page--attendance .sf-date-menu__trigger {
  color: #e8f1fb;
  background: #14263a !important;
  border-color: #36516b;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-panel {
  color: #e7f0fa;
  background: #0c1928 !important;
  border: 0 !important;
}

html[data-theme="dark"] .sf-page--attendance :where(
  .sf-attendance-section,
  .sf-attendance-section--pagi,
  .sf-attendance-section--malam,
  .sf-attendance-shift-title,
  .sf-attendance-table-wrap
) {
  background: transparent !important;
  border-color: #293d52 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-section + .sf-attendance-section {
  margin-top: 12px;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-shift-title {
  min-height: 54px;
  padding: 13px 18px 12px;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-table {
  color: #e8f1fb !important;
  background: transparent !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-table thead th {
  color: #dfeaf6 !important;
  background: #17283c !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-table tbody tr,
html[data-theme="dark"] .sf-page--attendance .sf-attendance-table tbody tr:hover {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-shift {
  gap: 7px;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-shift > i {
  display: inline-block;
  width: auto;
  height: auto;
  color: #67adf0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-shift--malam > i {
  color: #a7b9cd !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-shift strong {
  color: #edf4fc !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-shift small {
  color: #91a5bb !important;
}

html[data-theme="dark"] .sf-page--attendance :where(
  .sf-checkin-status,
  .sf-checkin-status.is-checked,
  .sf-attendance-status,
  .sf-attendance-status.is-present,
  .sf-attendance-status.is-late,
  .sf-location-link,
  .sf-crosscheck-btn,
  .sf-crosscheck-btn.is-checked
) {
  min-height: 0;
  padding: 3px 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-checkin-status {
  color: #91a5bb !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-checkin-status i {
  color: #70869e !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-crosscheck-btn {
  color: #72b4f2 !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-crosscheck-btn:hover,
html[data-theme="dark"] .sf-page--attendance .sf-crosscheck-btn:focus-visible {
  color: #a6d2fb !important;
  background: transparent !important;
  transform: none;
}

html[data-theme="dark"] .sf-page--attendance .sf-location-empty,
html[data-theme="dark"] .sf-page--attendance .sf-attendance-status:not(.is-present):not(.is-late) {
  color: #879bb1 !important;
}

/* Pagi/Malam: a cohesive segmented shift selector. */
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-options:has(.sf-shift-choice--pagi) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  background: #0b1725 !important;
  border: 1px solid #293f56 !important;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02) !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-options:has(.sf-shift-choice--pagi) .sf-shift-choice__card {
  min-height: 62px;
  padding: 9px 10px;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-options:has(.sf-shift-choice--pagi) .sf-shift-choice:hover .sf-shift-choice__card {
  background: #122338 !important;
  border-color: #2f4a64 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--pagi .sf-shift-choice__icon,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--malam .sf-shift-choice__icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid transparent;
  border-radius: 50%;
  box-shadow: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--pagi .sf-shift-choice__icon {
  color: #69b9ff !important;
  background: rgba(55, 145, 224, .13) !important;
  border-color: rgba(83, 164, 235, .22);
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--malam .sf-shift-choice__icon {
  color: #b7c8e6 !important;
  background: rgba(120, 143, 181, .12) !important;
  border-color: rgba(139, 160, 194, .20);
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--pagi .sf-shift-choice__copy strong,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--malam .sf-shift-choice__copy strong {
  color: #edf4fc !important;
  font-size: 12px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--pagi .sf-shift-choice__copy em,
html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--malam .sf-shift-choice__copy em {
  color: #8fa4ba !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-options:has(.sf-shift-choice--pagi) .sf-shift-choice__selected {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: transparent !important;
  background: transparent !important;
  border: 1px solid #71869d !important;
  border-radius: 50%;
  box-shadow: none;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-options:has(.sf-shift-choice--pagi) .sf-shift-choice__selected i {
  font-size: 8px;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--pagi input:checked + .sf-shift-choice__card {
  background: linear-gradient(135deg, #173b5e, #142f4b) !important;
  border-color: #3b8fd5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--malam input:checked + .sf-shift-choice__card {
  background: linear-gradient(135deg, #253d5a, #1c3049) !important;
  border-color: #5e87b4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--pagi input:checked + .sf-shift-choice__card .sf-shift-choice__icon {
  color: #8acaff !important;
  background: rgba(54, 143, 219, .18) !important;
  border-color: rgba(104, 185, 249, .32);
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-choice--malam input:checked + .sf-shift-choice__card .sf-shift-choice__icon {
  color: #d2dff3 !important;
  background: rgba(129, 154, 194, .18) !important;
  border-color: rgba(161, 184, 219, .30);
}

html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-options:has(.sf-shift-choice--pagi) .sf-shift-choice input:checked + .sf-shift-choice__card .sf-shift-choice__selected {
  color: #fff !important;
  background: #489be1 !important;
  border-color: #6eb6f1 !important;
  box-shadow: 0 0 0 3px rgba(72, 155, 225, .10);
}

@media (max-width: 440px) {
  html[data-theme="dark"] .sf-modal.sf-modal--shift .sf-shift-options:has(.sf-shift-choice--pagi) {
    grid-template-columns: 1fr;
  }
}

/* Change Shift: stronger hierarchy and more substantial controls. */
html[data-theme="dark"] .sf-modal.sf-modal--change-shift {
  border-color: #3a5874 !important;
  box-shadow:
    0 30px 76px rgba(0, 0, 0, .48),
    inset 0 0 0 1px rgba(126, 166, 204, .05);
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__head {
  border-color: #36516b !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__head h3 {
  font-size: 17px;
  font-weight: 900;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-field > label,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-flow__head span {
  color: #c8d6e5 !important;
  font-size: 12px;
  font-weight: 900;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:hover,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu .sf-date-menu__trigger:focus-visible,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-change-date-menu[open] .sf-date-menu__trigger {
  min-height: 49px;
  border-color: #42627f !important;
  box-shadow: inset 0 0 0 1px rgba(129, 165, 200, .055) !important;
  font-weight: 900;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item,
html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item:hover {
  min-height: 64px;
  background: #16293e !important;
  border: 1px solid #3a5873 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item:hover {
  background: #1a3048 !important;
  border-color: #4b7191 !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__item::after {
  width: 2px;
  background: var(--flow-accent);
  opacity: .78;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__index {
  width: 39px;
  height: 39px;
  border-width: 2px;
  background: #172b42 !important;
  box-shadow: 0 0 0 3px rgba(8, 19, 31, .72);
  font-size: 13px;
  font-weight: 900;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__text {
  gap: 4px;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__text strong {
  color: #f0f6fd !important;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .005em;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__text em {
  color: #a2b4c7 !important;
  font-size: 10.5px;
  font-weight: 750;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__move {
  color: #a9bdd1;
  font-size: 12px;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-flow-builder__move:not(:disabled) {
  color: #c9d8e7;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__foot {
  border-color: #36516b !important;
}

html[data-theme="dark"] .sf-modal.sf-modal--change-shift .sf-modal__foot .sf-btn {
  min-height: 39px;
  font-weight: 850;
}

/* Period navigation: icon-only controls without dark square tiles. */
html[data-theme="dark"] .sf-toolbar .sf-period__btn,
html[data-theme="dark"] .sf-toolbar .sf-period__btn:hover,
html[data-theme="dark"] .sf-toolbar .sf-period__btn:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-toolbar .sf-period__btn:hover {
  color: #76b6f5;
  transform: translateY(-1px);
}

html[data-theme="dark"] .sf-toolbar .sf-period__btn:focus-visible {
  color: #8fc6ff;
  outline: 2px solid #4b91e6;
  outline-offset: 2px;
}

/* Crosscheck feedback: complete icon ring and persistent verified row. */
.sf-toast__icon {
  overflow: visible;
}

.sf-toast__icon::after {
  border-right-color: currentColor;
}

.sf-page--attendance .sf-attendance-table tbody tr.is-attendance-checked > td,
.sf-page--attendance .sf-attendance-table tbody tr.is-attendance-checked:hover > td {
  background: linear-gradient(90deg, #e8f8ef 0%, #def3e9 100%) !important;
  border-bottom-color: #b9dfcd !important;
}

.sf-page--attendance .sf-attendance-table tbody tr.is-attendance-checked > td:first-child {
  box-shadow: inset 4px 0 0 #26956e;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-table tbody tr.is-attendance-checked > td,
html[data-theme="dark"] .sf-page--attendance .sf-attendance-table tbody tr.is-attendance-checked:hover > td {
  background: linear-gradient(90deg, rgba(24, 117, 87, .30), rgba(18, 91, 70, .22)) !important;
  border-bottom-color: #285b4a !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-table tbody tr.is-attendance-checked > td:first-child {
  box-shadow: inset 4px 0 0 #35b889 !important;
}

/* Attendance manual check-in: balanced toolbar and focused staff form. */
.sf-attendance-toolbar__layout {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 18px;
  width: 100%;
}

.sf-attendance-toolbar__action { justify-self: start; }
.sf-attendance-toolbar__date { justify-self: center; }
.sf-attendance-toolbar__balance { min-width: 190px; }

.sf-btn--manual-checkin {
  min-height: 40px;
  padding-inline: 17px;
  color: #fff;
  border-color: #326cba;
  background: linear-gradient(135deg, #3d82d1 0%, #5964c8 100%);
  box-shadow: 0 8px 20px rgba(55, 99, 180, .20);
  font-weight: 850;
}

.sf-btn--manual-checkin:hover,
.sf-btn--manual-checkin:focus-visible {
  color: #fff;
  border-color: #285fa9;
  background: linear-gradient(135deg, #4894e2 0%, #665ed1 100%);
  box-shadow: 0 10px 24px rgba(55, 99, 180, .28);
  transform: translateY(-1px);
}

.sf-modal--manual-checkin {
  width: min(610px, calc(100vw - 30px));
  border-color: #cad9e9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 35, 61, .25);
}

.sf-modal--manual-checkin .sf-modal__head {
  padding: 20px 22px;
  background: linear-gradient(135deg, #f5f9ff 0%, #fff 70%);
}

.sf-manual-checkin__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-manual-checkin__heading-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border-radius: 13px;
  background: linear-gradient(145deg, #348bd7, #5b60ce);
  box-shadow: 0 9px 18px rgba(59, 107, 194, .23);
}

.sf-modal--manual-checkin .sf-modal__head h3 {
  font-size: 18px;
  font-weight: 900;
}

.sf-modal--manual-checkin .sf-modal__head p {
  margin-top: 3px;
  color: #6e7f94;
  font-size: 11px;
}

.sf-manual-checkin__body {
  display: grid;
  gap: 16px;
  padding: 20px 22px 22px;
  background: #fbfdff;
}

.sf-manual-checkin__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  color: #48627f;
  border: 1px solid #cce0f3;
  border-radius: 12px;
  background: #eef7ff;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}

.sf-manual-checkin__notice i { margin-top: 2px; color: #3788d0; }
.sf-manual-checkin__notice p { margin: 0; }

.sf-manual-checkin__field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #52667e;
  font-size: 11px;
  font-weight: 850;
}

.sf-manual-checkin__control {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  min-height: 47px;
  padding: 0 13px;
  color: #47709c;
  border: 1px solid #c5d6e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.sf-manual-checkin__control:focus-within {
  border-color: #4b91df;
  box-shadow: 0 0 0 3px rgba(71, 139, 214, .12);
}

.sf-manual-checkin__control select,
.sf-manual-checkin__control input {
  width: 100%;
  min-width: 0;
  height: 45px;
  padding: 0;
  color: #162c45;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.sf-manual-checkin__control select {
  appearance: none;
  cursor: pointer;
}

.sf-manual-checkin__control.is-readonly {
  color: #71859c;
  background: #f3f7fb;
}

.sf-manual-checkin__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  color: #1d3b5c;
  border: 1px solid #bdd5ed;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0f8ff, #f7f4ff);
}

.sf-manual-checkin__shift-icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #357fc5;
  border: 1px solid #c7dcf1;
  border-radius: 12px;
  background: #fff;
}

.sf-manual-checkin__summary > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sf-manual-checkin__summary strong {
  overflow: hidden;
  color: #172d47;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-manual-checkin__summary small {
  color: #6f8197;
  font-size: 10px;
  font-weight: 700;
}

.sf-manual-checkin__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sf-modal--manual-checkin .sf-modal__foot {
  gap: 10px;
  padding: 14px 22px;
  background: #f7fafe;
}

.sf-modal--manual-checkin .sf-modal__foot .sf-btn {
  min-width: 145px;
  min-height: 41px;
}

.sf-location-empty--manual {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #287c63;
  font-weight: 750;
}

html[data-theme="dark"] .sf-btn--manual-checkin {
  border-color: #497fbd !important;
  background: linear-gradient(135deg, #286da9 0%, #5255ad 100%) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin {
  border-color: #35516c !important;
  background: #0e1c2b !important;
  box-shadow: 0 32px 85px rgba(0, 0, 0, .52) !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-modal__head,
html[data-theme="dark"] .sf-modal--manual-checkin .sf-modal__foot {
  border-color: #2d455d !important;
  background: #0f1e2e !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-modal__head h3 { color: #f3f7fc !important; }
html[data-theme="dark"] .sf-modal--manual-checkin .sf-modal__head p { color: #91a6bc !important; }
html[data-theme="dark"] .sf-manual-checkin__body { background: #0d1b2a !important; }

html[data-theme="dark"] .sf-manual-checkin__notice {
  color: #a9bfd4 !important;
  border-color: #2e506e !important;
  background: #122a40 !important;
}

html[data-theme="dark"] .sf-manual-checkin__field { color: #b8c8d9 !important; }

html[data-theme="dark"] .sf-manual-checkin__control,
html[data-theme="dark"] .sf-manual-checkin__control.is-readonly {
  color: #79afe1 !important;
  border-color: #36546f !important;
  background: #14263a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html[data-theme="dark"] .sf-manual-checkin__control:focus-within {
  border-color: #569ee4 !important;
  box-shadow: 0 0 0 3px rgba(66, 145, 222, .13) !important;
}

html[data-theme="dark"] .sf-manual-checkin__control select,
html[data-theme="dark"] .sf-manual-checkin__control input {
  color: #edf4fc !important;
  color-scheme: dark;
}

html[data-theme="dark"] .sf-manual-checkin__control option {
  color: #edf4fc;
  background: #14263a;
}

html[data-theme="dark"] .sf-manual-checkin__summary {
  color: #c7dbed !important;
  border-color: #395b78 !important;
  background: linear-gradient(135deg, #152b41, #182840) !important;
}

html[data-theme="dark"] .sf-manual-checkin__shift-icon {
  color: #78b9f2 !important;
  border-color: #3a5a77 !important;
  background: #102237 !important;
}

html[data-theme="dark"] .sf-manual-checkin__summary strong { color: #f1f6fc !important; }
html[data-theme="dark"] .sf-manual-checkin__summary small { color: #9aafc4 !important; }
html[data-theme="dark"] .sf-location-empty--manual { color: #6ad4b0 !important; }

/* Crosscheck confirmation: reference layout with theme-native color and motion. */
.sf-confirm--verify {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
  width: min(520px, 100%);
  padding: 34px 36px 28px;
  text-align: center;
  border-color: #c9d9ed;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(90, 93, 207, .13), transparent 38%),
    linear-gradient(145deg, #fff, #f6f9ff);
}

.sf-confirm--verify::before { display: none; }

.sf-confirm--verify .sf-confirm__icon {
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  color: #427fc1;
  border: 4px solid #82aac9;
  border-radius: 50%;
  background: rgba(240, 248, 255, .72);
  box-shadow: 0 12px 26px rgba(56, 104, 163, .16);
  font-size: 38px;
  animation: sf-crosscheck-question-in .46s cubic-bezier(.16, 1, .3, 1) both;
}

.sf-confirm--verify .sf-confirm__icon::after {
  inset: -10px;
  border: 1px solid rgba(66, 127, 193, .20);
  border-radius: 50%;
  animation: sf-crosscheck-question-pulse 1.8s ease-out .4s infinite;
}

.sf-confirm--verify .sf-confirm__copy {
  width: 100%;
  padding: 0;
  animation: sf-crosscheck-copy-in .34s ease .10s both;
}

.sf-confirm--verify .sf-confirm__copy h3 {
  max-width: 430px;
  margin-inline: auto;
  color: #35217b;
  font-size: clamp(24px, 4vw, 31px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.sf-confirm--verify .sf-confirm__copy p {
  max-width: 410px;
  margin: 18px auto 0;
  color: #667387;
  font-size: 14px;
  line-height: 1.6;
}

.sf-confirm--verify .sf-confirm__actions {
  display: flex;
  grid-column: 1;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 26px;
  padding-top: 0;
  animation: sf-crosscheck-copy-in .34s ease .18s both;
}

.sf-confirm--verify .sf-confirm__actions::before { display: none; }

.sf-confirm--verify .sf-confirm__actions .sf-btn {
  min-width: 132px;
  min-height: 42px;
  border-radius: 8px;
}

html[data-theme="dark"] .sf-confirm--verify {
  border-color: #3a5670 !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(76, 91, 190, .18), transparent 40%),
    linear-gradient(145deg, #122438, #0f1d2d) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .52) !important;
}

html[data-theme="dark"] .sf-confirm--verify .sf-confirm__icon {
  color: #8cc9f2 !important;
  border-color: #5e91b8 !important;
  background: #142f48 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .30) !important;
}

html[data-theme="dark"] .sf-confirm--verify .sf-confirm__copy h3 { color: #eef5fd !important; }
html[data-theme="dark"] .sf-confirm--verify .sf-confirm__copy p { color: #a8bacd !important; }

html[data-theme="dark"] .sf-confirm--verify .sf-confirm__actions .sf-btn:not(.sf-btn--primary) {
  color: #c5d3e2 !important;
  border-color: #3b5872 !important;
  background: #14263a !important;
}

@keyframes sf-crosscheck-question-in {
  0% { opacity: 0; transform: translateY(-14px) scale(.70) rotate(-8deg); }
  65% { opacity: 1; transform: translateY(2px) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes sf-crosscheck-question-pulse {
  0% { opacity: .55; transform: scale(.82); }
  70%, 100% { opacity: 0; transform: scale(1.22); }
}

@keyframes sf-crosscheck-copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .sf-attendance-toolbar__layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 10px;
  }

  .sf-attendance-toolbar__action,
  .sf-attendance-toolbar__date { justify-self: stretch; }

  .sf-attendance-toolbar__action .sf-btn { width: 100%; }
  .sf-attendance-toolbar__balance { display: none; }
  .sf-manual-checkin__grid { grid-template-columns: 1fr; }
  .sf-confirm--verify { padding: 28px 20px 22px; }

  .sf-confirm--verify .sf-confirm__icon {
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
    font-size: 31px;
  }

  .sf-confirm--verify .sf-confirm__copy h3 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-confirm--verify .sf-confirm__icon,
  .sf-confirm--verify .sf-confirm__icon::after,
  .sf-confirm--verify .sf-confirm__copy,
  .sf-confirm--verify .sf-confirm__actions {
    animation: none !important;
  }
}

/* Manual check-in compact layout; custom select replaces the native browser menu. */
.sf-modal--manual-checkin {
  width: min(440px, calc(100vw - 28px));
  overflow: visible;
  border-radius: 18px;
}

.sf-modal--manual-checkin .sf-modal__head {
  min-height: 54px;
  padding: 0 18px;
  border-radius: 18px 18px 0 0;
  background: #fff;
}

.sf-modal--manual-checkin .sf-modal__head h3 {
  font-size: 14px;
  font-weight: 900;
}

.sf-manual-checkin__body {
  gap: 12px;
  padding: 18px;
  border-radius: 0 0 18px 18px;
  background: #f8fafc;
}

.sf-manual-checkin__hero {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 2px 8px 8px;
  text-align: center;
}

.sf-manual-checkin__hero > span {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #348bd7, #5a60cc);
  box-shadow: 0 9px 20px rgba(53, 105, 194, .24);
}

.sf-manual-checkin__hero > strong {
  color: #2878c4;
  font-size: 12px;
  font-weight: 850;
}

.sf-manual-checkin__hero h4 {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #17283e;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-manual-checkin__hero small {
  color: #718197;
  font-size: 10px;
  font-weight: 700;
}

.sf-manual-checkin__staff {
  position: relative;
  z-index: 5;
}

.sf-modal--manual-checkin .sf-custom-select {
  position: relative;
  width: 100%;
}

.sf-modal--manual-checkin .sf-custom-select__button {
  min-height: 46px;
  padding: 0 13px;
  color: #20364f;
  border: 1px solid #b9cde1;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
}

.sf-modal--manual-checkin .sf-custom-select__button:hover,
.sf-modal--manual-checkin .sf-custom-select__button:focus-visible,
.sf-modal--manual-checkin .sf-custom-select.is-open .sf-custom-select__button {
  color: #174f84;
  border-color: #3f8fd8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(60, 139, 211, .12);
}

.sf-modal--manual-checkin .sf-custom-select__menu {
  z-index: 20;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  max-height: 220px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #bdd0e3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(29, 55, 87, .20);
  scrollbar-color: #9db7cf transparent;
  scrollbar-width: thin;
}

.sf-modal--manual-checkin .sf-custom-select__option {
  min-height: 38px;
  padding: 8px 10px;
  color: #334a63;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 10.5px;
  font-weight: 750;
  text-align: left;
}

.sf-modal--manual-checkin .sf-custom-select__option:hover,
.sf-modal--manual-checkin .sf-custom-select__option:focus-visible {
  color: #1f68aa;
  border-color: #d7e7f6;
  background: #edf6ff;
}

.sf-modal--manual-checkin .sf-custom-select__option.is-selected {
  color: #fff;
  border-color: #347fca;
  background: linear-gradient(135deg, #338bd9, #5564c9);
}

.sf-modal--manual-checkin .sf-manual-checkin__grid {
  gap: 8px;
}

.sf-modal--manual-checkin .sf-manual-checkin__control {
  min-height: 43px;
  border-radius: 10px;
}

.sf-modal--manual-checkin .sf-manual-checkin__control input {
  height: 41px;
}

.sf-manual-checkin__submit,
.sf-manual-checkin__cancel {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  font-weight: 900;
}

.sf-manual-checkin__submit {
  margin-top: 2px;
  border-color: #2878c4;
  background: linear-gradient(135deg, #318bd8, #5264c8);
}

.sf-manual-checkin__cancel {
  color: #5f6f83;
  border-color: #d3deea;
  background: #eef2f6;
}

.sf-manual-checkin__cancel:hover,
.sf-manual-checkin__cancel:focus-visible {
  color: #35485f;
  border-color: #bdccda;
  background: #e4ebf2;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-modal__head {
  background: #0f1e2e !important;
}

html[data-theme="dark"] .sf-manual-checkin__body {
  background: #0d1a28 !important;
}

html[data-theme="dark"] .sf-manual-checkin__hero h4 {
  color: #f1f6fc !important;
}

html[data-theme="dark"] .sf-manual-checkin__hero > strong {
  color: #68b7f2 !important;
}

html[data-theme="dark"] .sf-manual-checkin__hero small {
  color: #8fa5bb !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__button {
  color: #edf4fc !important;
  border-color: #395872 !important;
  background: #14273b !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__button:hover,
html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__button:focus-visible,
html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select.is-open .sf-custom-select__button {
  color: #fff !important;
  border-color: #559de0 !important;
  background: #172d43 !important;
  box-shadow: 0 0 0 3px rgba(76, 151, 218, .13) !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__menu {
  border-color: #3a5873 !important;
  background: #102033 !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .44) !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__option {
  color: #b8c9da !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__option:hover,
html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__option:focus-visible {
  color: #f2f7fc !important;
  border-color: #345773 !important;
  background: #193149 !important;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__option.is-selected {
  color: #fff !important;
  border-color: #4e92d2 !important;
  background: linear-gradient(135deg, #276fa9, #4e57ad) !important;
}

html[data-theme="dark"] .sf-manual-checkin__cancel {
  color: #c2d0df !important;
  border-color: #334d65 !important;
  background: #14263a !important;
}

@media (max-width: 520px) {
  .sf-modal--manual-checkin .sf-manual-checkin__grid {
    grid-template-columns: 1fr;
  }

  .sf-manual-checkin__hero h4 {
    font-size: 16px;
  }
}

/* Attendance actions and states stay quiet, rectangular, and content-led. */
.sf-page--attendance .sf-btn--manual-checkin {
  min-height: 38px;
  padding: 0 14px;
  color: #245f98;
  border: 1px solid #b8cce0;
  border-radius: 8px;
  background: #f8fbfe;
  box-shadow: none;
  font-weight: 800;
}

.sf-page--attendance .sf-btn--manual-checkin:hover,
.sf-page--attendance .sf-btn--manual-checkin:focus-visible {
  color: #174f84;
  border-color: #76a7d5;
  background: #edf5fc;
  box-shadow: none;
  transform: none;
}

.sf-page--attendance .sf-checkin-status,
.sf-page--attendance .sf-checkin-status.is-checked {
  min-height: 0;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sf-page--attendance .sf-attendance-table tbody tr.is-attendance-checked > td:first-child,
html[data-theme="dark"] .sf-page--attendance .sf-attendance-table tbody tr.is-attendance-checked > td:first-child {
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-btn--manual-checkin {
  color: #9dccf5 !important;
  border-color: #3c5a76 !important;
  background: #13263a !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-btn--manual-checkin:hover,
html[data-theme="dark"] .sf-page--attendance .sf-btn--manual-checkin:focus-visible {
  color: #d7ebfc !important;
  border-color: #5c8ab3 !important;
  background: #193149 !important;
}

.sf-page--attendance .sf-checkin-status.is-manual {
  font: inherit;
  color: #13795d;
  cursor: pointer;
  transition: color .16s ease, transform .16s ease;
}

.sf-page--attendance .sf-checkin-status.is-manual:hover,
.sf-page--attendance .sf-checkin-status.is-manual:focus-visible {
  color: #075d45;
  outline: 0;
  transform: translateY(-1px);
}

.sf-page--attendance .sf-checkin-status.is-manual small {
  color: #5e7d73;
}

.sf-modal--manual-detail {
  width: min(410px, calc(100vw - 28px));
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(25, 47, 72, .22);
}

.sf-modal--manual-detail .sf-modal__head {
  padding: 17px 19px;
}

.sf-modal--manual-detail .sf-modal__head h3 {
  color: #182b40;
  font-size: 15px;
  font-weight: 900;
}

.sf-modal--manual-detail .sf-modal__head p {
  margin-top: 3px;
  color: #728399;
  font-size: 10.5px;
}

.sf-manual-detail {
  gap: 0;
  padding: 0 19px 18px;
  overflow: visible;
}

.sf-manual-detail__staff {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 0;
}

.sf-manual-detail__staff > i {
  color: #258166;
  font-size: 20px;
}

.sf-manual-detail__staff > span {
  display: grid;
  gap: 3px;
}

.sf-manual-detail__staff strong {
  color: #172a40;
  font-size: 14px;
  font-weight: 900;
}

.sf-manual-detail__staff small {
  color: #728399;
  font-size: 10.5px;
  font-weight: 700;
}

.sf-manual-detail__list {
  margin: 0;
  border-top: 1px solid #d9e3ed;
}

.sf-manual-detail__list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 43px;
  border-bottom: 1px solid #e5ebf1;
}

.sf-manual-detail__list dt,
.sf-manual-detail__list dd {
  margin: 0;
  font-size: 11px;
}

.sf-manual-detail__list dt {
  color: #75869a;
  font-weight: 700;
}

.sf-manual-detail__list dd {
  color: #20364f;
  font-weight: 850;
  text-align: right;
}

.sf-manual-detail__actor dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #13795d;
}

html[data-theme="dark"] .sf-page--attendance .sf-checkin-status.is-manual {
  color: #69c7a8 !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-checkin-status.is-manual small {
  color: #8faea4 !important;
}

html[data-theme="dark"] .sf-modal--manual-detail .sf-modal__head h3,
html[data-theme="dark"] .sf-manual-detail__staff strong,
html[data-theme="dark"] .sf-manual-detail__list dd {
  color: #edf4fc !important;
}

html[data-theme="dark"] .sf-modal--manual-detail .sf-modal__head p,
html[data-theme="dark"] .sf-manual-detail__staff small,
html[data-theme="dark"] .sf-manual-detail__list dt {
  color: #91a6bc !important;
}

html[data-theme="dark"] .sf-manual-detail__list {
  border-top-color: #31475d;
}

html[data-theme="dark"] .sf-manual-detail__list > div {
  border-bottom-color: #293e53;
}

html[data-theme="dark"] .sf-manual-detail__staff > i,
html[data-theme="dark"] .sf-manual-detail__actor dd {
  color: #69c7a8 !important;
}

/* Cuti and offday share one compact informational attendance section. */
.sf-attendance-shift-title--away h2::after {
  background: linear-gradient(90deg, #d69a22 0 50%, #d94a5c 50% 100%);
}

.sf-attendance-away-table {
  min-width: 700px;
}

.sf-attendance-away-table .sf-away-col--number { width: 6%; }
.sf-attendance-away-table .sf-away-col--staff { width: 32%; }
.sf-attendance-away-table .sf-away-col--role { width: 18%; }
.sf-attendance-away-table .sf-away-col--date { width: 20%; }
.sf-attendance-away-table .sf-away-col--status { width: 24%; }

.sf-attendance-away-table th:nth-child(2),
.sf-attendance-away-table td:nth-child(2) {
  text-align: left;
}

.sf-away-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #526377;
}

.sf-away-status > i {
  font-size: 14px;
}

.sf-away-status > span {
  display: grid;
  gap: 2px;
  text-align: left;
}

.sf-away-status strong {
  color: inherit !important;
  font-size: 11px;
  font-weight: 850;
}

.sf-away-status small {
  color: #8290a0;
  font-size: 9.5px;
  font-weight: 700;
}

.sf-away-status--cuti {
  color: #a66d08;
}

.sf-away-status--off_day {
  color: #c83247;
}

.sf-empty-state--away {
  min-height: 150px;
}

html[data-theme="dark"] .sf-away-status--cuti {
  color: #efbd59 !important;
}

html[data-theme="dark"] .sf-away-status--off_day {
  color: #f0808c !important;
}

html[data-theme="dark"] .sf-away-status small {
  color: #8499ae !important;
}

@media (max-width: 720px) {
  .sf-attendance-away-table {
    min-width: 620px;
  }
}

/* Manual attendance motion stays subtle on repeated daily use. */
.sf-modal-backdrop:has(.sf-modal--manual-checkin) {
  background: rgba(232, 237, 241, .58);
  -webkit-backdrop-filter: blur(6px) saturate(92%);
  backdrop-filter: blur(6px) saturate(92%);
  animation-duration: .14s;
}

.sf-modal--manual-checkin {
  box-shadow: 0 18px 44px rgba(26, 48, 72, .18);
  animation-duration: .16s;
}

.sf-manual-checkin__hero > span {
  box-shadow: 0 6px 14px rgba(53, 105, 194, .18);
}

.sf-modal--manual-checkin .sf-custom-select__button,
.sf-manual-checkin__submit,
.sf-manual-checkin__cancel {
  transition:
    color .14s ease,
    border-color .14s ease,
    background-color .14s ease,
    box-shadow .14s ease;
}

.sf-modal--manual-checkin .sf-custom-select.is-open .sf-custom-select__menu {
  animation-duration: .14s;
}

html[data-theme="dark"] .sf-modal-backdrop:has(.sf-modal--manual-checkin) {
  background: rgba(2, 8, 16, .68);
  -webkit-backdrop-filter: blur(6px) saturate(90%);
  backdrop-filter: blur(6px) saturate(90%);
}

html[data-theme="dark"] .sf-modal--manual-checkin {
  box-shadow: 0 20px 48px rgba(0, 0, 0, .38) !important;
}

@media (prefers-reduced-motion: reduce) {
  .sf-modal-backdrop:has(.sf-modal--manual-checkin),
  .sf-modal--manual-checkin,
  .sf-modal--manual-checkin .sf-custom-select__menu {
    animation: none !important;
    transition: none !important;
  }
}

/* The combined table stays neutral; each row carries its own status color. */
.sf-attendance-section--away .sf-attendance-shift-title {
  border-color: var(--line);
  background: linear-gradient(180deg, #fff 0%, #fafbf9 100%);
}

.sf-attendance-section--away .sf-attendance-shift-title h2 {
  color: #172033;
}

.sf-attendance-section--away .sf-attendance-away-table thead th {
  background: #3f4854;
}

.sf-attendance-section--away .sf-away-row--cuti td {
  border-bottom-color: #ecdcae;
  background: #fffaf0;
}

.sf-attendance-section--away .sf-away-row--off_day td {
  border-bottom-color: #efcdd1;
  background: #fff5f6;
}

.sf-attendance-section--away .sf-away-row--cuti td:nth-child(2) strong {
  color: #9a6400;
}

.sf-attendance-section--away .sf-away-row--off_day td:nth-child(2) strong {
  color: #c83247;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-section--away .sf-attendance-shift-title {
  border-color: #293d52 !important;
  background: transparent !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-section--away .sf-attendance-shift-title h2 {
  color: #e7f0fa !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-section--away .sf-attendance-away-table thead th {
  background: #17283c !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-section--away .sf-away-row--cuti td {
  border-bottom-color: #4b3e25 !important;
  background: #1d1a13 !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-section--away .sf-away-row--off_day td {
  border-bottom-color: #553039 !important;
  background: #211519 !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-section--away .sf-away-row--cuti td:nth-child(2) strong {
  color: #f2c55f !important;
}

html[data-theme="dark"] .sf-page--attendance .sf-attendance-section--away .sf-away-row--off_day td:nth-child(2) strong {
  color: #f0808c !important;
}

/* Keep search visible while only the staff results scroll. */
.sf-modal--manual-checkin .sf-custom-select__menu,
.sf-modal--manual-checkin .sf-custom-select.is-open .sf-custom-select__menu {
  max-height: none;
  overflow: hidden;
}

.sf-modal--manual-checkin .sf-custom-select__search {
  position: static;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 11px;
  color: #73869a;
  border: 1px solid #c8d9e8;
  border-radius: 8px;
  background: #f7fafc;
}

.sf-modal--manual-checkin .sf-custom-select__options {
  display: grid;
  gap: 4px;
  max-height: 142px;
  padding-inline: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sf-modal--manual-checkin .sf-custom-select__options::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sf-modal--manual-checkin .sf-custom-select__option {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  transform: none;
}

.sf-modal--manual-checkin .sf-custom-select__option:hover,
.sf-modal--manual-checkin .sf-custom-select__option:focus-visible {
  transform: none;
}

.sf-modal--manual-checkin .sf-custom-select__option[hidden],
.sf-modal--manual-checkin .sf-custom-select__empty[hidden] {
  display: none !important;
}

.sf-modal--manual-checkin .sf-custom-select__empty {
  padding: 18px 10px;
  color: #7a8da1;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.sf-modal--manual-checkin .sf-custom-select__search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  color: #20364f;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
}

.sf-modal--manual-checkin .sf-custom-select__search input::placeholder {
  color: #91a1b2;
}

.sf-modal--manual-checkin .sf-custom-select__search input::-webkit-search-cancel-button {
  display: none;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__search {
  color: #86a6c2;
  border-color: #35536d;
  background: #14283c;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__search input {
  color: #edf5fc;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__search input::placeholder {
  color: #7890a7;
}

html[data-theme="dark"] .sf-modal--manual-checkin .sf-custom-select__empty {
  color: #8ca2b8;
}

@media (max-height: 620px) {
  .sf-modal--manual-checkin .sf-custom-select__options {
    max-height: 110px;
  }
}

/* Crosscheck cancellation keeps the verify dialog layout with a destructive accent. */
.sf-confirm--verify.sf-confirm--action-danger {
  border-color: #efc8cf;
  background:
    radial-gradient(circle at 100% 0%, rgba(224, 66, 84, .12), transparent 38%),
    linear-gradient(145deg, #fff, #fff7f8);
}

.sf-confirm--verify.sf-confirm--action-danger .sf-confirm__icon {
  color: #d94255;
  border-color: #e99aa5;
  background: #fff2f4;
  box-shadow: 0 12px 26px rgba(185, 49, 67, .15);
}

.sf-confirm--verify.sf-confirm--action-danger .sf-confirm__icon::after {
  border-color: rgba(217, 66, 85, .22);
}

.sf-confirm--verify.sf-confirm--action-danger .sf-confirm__copy h3 {
  color: #8f2634;
}

html[data-theme="dark"] .sf-confirm--verify.sf-confirm--action-danger {
  border-color: #70404a !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(211, 61, 80, .17), transparent 40%),
    linear-gradient(145deg, #281820, #171521) !important;
}

html[data-theme="dark"] .sf-confirm--verify.sf-confirm--action-danger .sf-confirm__icon {
  color: #ff9eaa !important;
  border-color: #a85765 !important;
  background: #321b24 !important;
}

html[data-theme="dark"] .sf-confirm--verify.sf-confirm--action-danger .sf-confirm__copy h3 {
  color: #ffdce1 !important;
}

.sf-confirm--staff-delete .sf-confirm__actions .sf-btn--danger {
  color: #fff !important;
  border-color: #c93448 !important;
  background: linear-gradient(135deg, #e34d61, #bd2c40) !important;
  box-shadow: 0 9px 18px rgba(190, 44, 64, .22) !important;
}

.sf-confirm--staff-delete .sf-confirm__actions .sf-btn--danger:hover,
.sf-confirm--staff-delete .sf-confirm__actions .sf-btn--danger:focus-visible {
  color: #fff !important;
  border-color: #ad2336 !important;
  background: linear-gradient(135deg, #e9586a, #ad2336) !important;
  box-shadow: 0 11px 21px rgba(174, 35, 54, .28) !important;
}

html[data-theme="dark"] .sf-confirm--staff-delete .sf-confirm__actions .sf-btn--danger {
  color: #fff !important;
  border-color: #cf5365 !important;
  background: linear-gradient(135deg, #d94d61, #a92a3b) !important;
}

/* Sidebar navigation uses full-width hover and active states. */
.sf-sidebar .sf-nav {
  gap: 2px;
  margin-inline: -12px;
}

.sf-sidebar .sf-nav__group {
  margin: 4px 0 8px;
  padding-inline: 22px;
}

.sf-sidebar .sf-nav__item {
  width: 100%;
  height: 44px;
  padding-inline: 22px;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.sf-sidebar .sf-nav__item:hover,
.sf-sidebar .sf-nav__item:focus-visible {
  color: #26364b;
  background: #f2f6fa;
  box-shadow: none;
  transform: none;
}

.sf-sidebar .sf-nav__item.is-active {
  color: #155e9c;
  background: #e8f2fc;
  box-shadow: none;
}

.sf-sidebar .sf-nav-tree {
  gap: 0;
}

.sf-sidebar .sf-nav-sub {
  gap: 0;
  margin: 0;
  padding-left: 0;
  border-left: 0;
  max-height: 80px;
}

.sf-sidebar .sf-nav-tree:not(.is-open) .sf-nav-sub {
  margin: 0;
}

.sf-sidebar .sf-nav-sub__item {
  width: 100%;
  height: 38px;
  padding: 0 22px 0 50px;
  border-radius: 0;
  box-shadow: none;
}

.sf-sidebar .sf-nav-sub__item:hover,
.sf-sidebar .sf-nav-sub__item:focus-visible {
  color: #26364b;
  background: #f2f6fa;
  box-shadow: none;
}

.sf-sidebar .sf-nav-sub__item.is-active {
  color: #155e9c;
  background: #e8f2fc;
  box-shadow: none;
}

html[data-theme="dark"] .sf-sidebar :where(.sf-nav__item:hover, .sf-nav__item:focus-visible, .sf-nav-sub__item:hover, .sf-nav-sub__item:focus-visible) {
  color: #f0f6ff !important;
  background: #132840 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sf-sidebar :where(.sf-nav__item.is-active, .sf-nav-sub__item.is-active) {
  color: #f5f9ff !important;
  background: #19334f !important;
  box-shadow: none !important;
}

@media (max-width: 980px) and (min-width: 801px) {
  .sf-sidebar .sf-nav {
    margin-inline: -10px;
  }

  .sf-sidebar .sf-nav__item {
    justify-content: center;
    padding-inline: 0;
  }
}

/* Schedule polish: scoped to the schedule page to avoid changing other views. */
.sf-page--schedule {
  --sf-pagi: #2f7fbd;
  --sf-malam: #182a3d;
  --sf-change-malam: #2e8b70;
  --sf-off-change-pagi: #8055c7;
  --sf-cuti: #d8a51d;
  --sf-offday: #d95463;
  --sf-schedule-line: #dbe3ea;
  --sf-schedule-header: #f7f9fb;
  --sf-schedule-hover: #f8fafc;
}

.sf-page--schedule .sf-toolbar__right {
  align-items: center;
}

.sf-page--schedule .sf-search,
.sf-page--schedule .sf-action-menu__trigger {
  height: 40px;
  border: 1px solid #d6dee7;
  border-radius: 8px;
  box-shadow: none;
}

.sf-page--schedule .sf-search {
  min-width: 230px;
  background: #fff;
}

.sf-page--schedule .sf-search:focus-within {
  border-color: #9db5ca;
  box-shadow: none;
}

.sf-page--schedule .sf-search input {
  min-width: 0;
  height: 100%;
  font-size: 13px;
}

.sf-page--schedule .sf-action-menu__trigger {
  width: 40px;
  min-width: 40px;
  background: #fff;
}

.sf-page--schedule .sf-action-menu__trigger:hover,
.sf-page--schedule .sf-action-menu__trigger:focus-visible {
  transform: none;
  border-color: #9db5ca;
  background: #f7f9fb;
  box-shadow: none;
}

.sf-page--schedule .sf-table-wrap {
  background: #fff;
}

.sf-page--schedule .sf-schedule-table {
  border-collapse: separate;
  border-spacing: 0;
}

.sf-page--schedule .sf-schedule-table th,
.sf-page--schedule .sf-schedule-table td {
  border-right: 1px solid var(--sf-schedule-line);
  border-bottom: 1px solid var(--sf-schedule-line);
}

.sf-page--schedule .sf-schedule-table thead th {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--sf-schedule-header);
  border-top: 0;
  color: #536579;
}

.sf-page--schedule .sf-schedule-table tbody tr:hover > td,
.sf-page--schedule .sf-schedule-table tbody tr:hover > th {
  background: var(--sf-schedule-hover);
}

.sf-page--schedule .sf-sticky-role,
.sf-page--schedule .sf-sticky-name {
  position: sticky;
  background: #fff;
}

.sf-page--schedule .sf-sticky-role {
  left: 0;
  z-index: 10;
}

.sf-page--schedule .sf-sticky-name {
  left: var(--role-col-width);
  z-index: 11;
  box-shadow: 1px 0 0 var(--sf-schedule-line);
}

.sf-page--schedule .sf-schedule-table thead th.sf-sticky-role {
  left: 0;
  z-index: 20;
  background: var(--sf-schedule-header);
}

.sf-page--schedule .sf-schedule-table thead th.sf-sticky-name {
  left: var(--role-col-width);
  z-index: 21;
  background: var(--sf-schedule-header);
}

.sf-page--schedule .sf-schedule-table tbody tr:hover .sf-sticky-role,
.sf-page--schedule .sf-schedule-table tbody tr:hover .sf-sticky-name {
  background: var(--sf-schedule-hover);
}

.sf-page--schedule .sf-role-cell {
  color: #52677c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sf-page--schedule .sf-name-cell {
  min-width: 0;
}

.sf-page--schedule .sf-name-cell strong {
  display: block;
  overflow: hidden;
  color: #10243a;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-page--schedule .sf-shift-card {
  border-radius: 4px;
  background-image: none !important;
  font-size: 11px;
}

.sf-page--schedule .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-shift-card--pagi {
  background: #2f7fbd !important;
}

.sf-page--schedule .sf-lane-cell--malam .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-shift-card--malam {
  background: #182a3d !important;
}

.sf-page--schedule .sf-shift-card--change_malam {
  background: #2e8b70 !important;
}

.sf-page--schedule .sf-shift-card--off_change_pagi {
  background: #8055c7 !important;
}

.sf-page--schedule .sf-shift-card--cuti {
  background: #d8a51d !important;
}

.sf-page--schedule .sf-shift-card--off_day {
  background: #d95463 !important;
}

html[data-theme="dark"] .sf-page--schedule {
  --sf-schedule-line: #2b4054;
  --sf-schedule-header: #132436;
  --sf-schedule-hover: #14283b;
}

html[data-theme="dark"] .sf-page--schedule .sf-search,
html[data-theme="dark"] .sf-page--schedule .sf-action-menu__trigger,
html[data-theme="dark"] .sf-page--schedule .sf-table-wrap {
  background: #0e1d2c;
  border-color: #30465b;
}

html[data-theme="dark"] .sf-page--schedule .sf-sticky-role,
html[data-theme="dark"] .sf-page--schedule .sf-sticky-name {
  background: #0e1d2c;
}

html[data-theme="dark"] .sf-page--schedule thead .sf-sticky-role,
html[data-theme="dark"] .sf-page--schedule thead .sf-sticky-name {
  background: var(--sf-schedule-header);
}

html[data-theme="dark"] .sf-page--schedule .sf-name-cell strong {
  color: #eef5fb;
}

html[data-theme="dark"] .sf-page--schedule .sf-role-cell,
html[data-theme="dark"] .sf-page--schedule .sf-schedule-table thead th {
  color: #aebfd0;
}

/* Schedule preview shortcut and display settings refinement */
.sf-page--schedule .sf-period-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 76px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid #d7e0ea;
  border-radius: 9px;
  background: #f7f9fc;
  color: #25425f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.sf-page--schedule .sf-period-preview:hover {
  background: #edf5fc;
  border-color: #a9c5df;
  color: #236ba7;
  transform: translateY(-1px);
}

.sf-page--schedule .sf-period-preview:focus-visible {
  outline: 2px solid rgba(47, 127, 189, .28);
  outline-offset: 2px;
}

.sf-modal--display-settings {
  width: min(530px, calc(100vw - 28px));
  border: 1px solid #d8e2eb;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 35, 55, .18);
  overflow: hidden;
}

.sf-modal--display-settings .sf-modal__head {
  padding: 18px 20px;
  background: #fff;
  border-bottom: 1px solid #e1e8ef;
}

.sf-display-settings__title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sf-display-settings__title-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  border-radius: 10px;
  background: #eaf3fb;
  color: #2f7fbd;
  font-size: 15px;
}

.sf-modal--display-settings .sf-display-settings__title h3 {
  margin: 0;
  color: #14283c;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
}

.sf-display-settings__title p {
  margin: 4px 0 0;
  color: #728399;
  font-size: 11px;
  font-weight: 600;
}

.sf-modal--display-settings .sf-display-settings__body {
  padding: 18px 20px 20px;
  background: #f7f9fc;
  gap: 12px;
}

.sf-modal--display-settings .sf-display-settings__fieldset {
  gap: 10px;
}

.sf-modal--display-settings .sf-display-settings__fieldset legend {
  padding: 0 0 8px;
  color: #607286;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.sf-modal--display-settings .sf-display-option {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid #dbe4ed;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sf-modal--display-settings .sf-display-option:hover {
  background: #fbfdff;
  border-color: #aec6db;
  box-shadow: 0 5px 12px rgba(32, 67, 100, .06);
  transform: translateY(-1px);
}

.sf-modal--display-settings .sf-display-option:has(input:checked) {
  background: #eef6fc;
  border-color: #2f7fbd;
  box-shadow: 0 0 0 2px rgba(47, 127, 189, .12);
}

.sf-modal--display-settings .sf-display-option__visual {
  min-height: 44px;
  border: 1px solid #e2eaf2;
  border-radius: 8px;
  background: #f5f8fb;
}

.sf-modal--display-settings .sf-display-option__copy strong {
  color: #1b3147;
  font-size: 12px;
  font-weight: 800;
}

.sf-modal--display-settings .sf-display-option__copy em {
  margin-top: 4px;
  color: #75869a;
  font-size: 10px;
  font-weight: 600;
}

.sf-modal--display-settings .sf-display-option__check {
  width: 20px;
  height: 20px;
  border-color: #c7d4e1;
  background: #fff;
}

.sf-modal--display-settings .sf-display-option:has(input:checked) .sf-display-option__check {
  border-color: #2f7fbd;
  background: #2f7fbd;
  color: #fff;
}

.sf-modal--display-settings .sf-modal__footer {
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid #e1e8ef;
}

html[data-theme="dark"] .sf-page--schedule .sf-period-preview {
  background: #13263a;
  border-color: #34506a;
  color: #d9e9f7;
}

html[data-theme="dark"] .sf-page--schedule .sf-period-preview:hover {
  background: #183149;
  border-color: #4b7395;
  color: #fff;
}

html[data-theme="dark"] .sf-modal--display-settings {
  border-color: #34506a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-modal__head,
html[data-theme="dark"] .sf-modal--display-settings .sf-modal__footer {
  background: #0f1f30;
  border-color: #2d4358;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-settings__body {
  background: #0c1a29;
}

html[data-theme="dark"] .sf-display-settings__title-icon {
  background: #173754;
  color: #72b9ed;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-settings__title h3 {
  color: #f2f7fb;
}

html[data-theme="dark"] .sf-display-settings__title p,
html[data-theme="dark"] .sf-modal--display-settings .sf-display-settings__fieldset legend {
  color: #91a5b8;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option {
  background: #13283c;
  border-color: #35506a;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option:hover {
  background: #173047;
  border-color: #4b7395;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option:has(input:checked) {
  background: #173754;
  border-color: #4b9bd4;
  box-shadow: 0 0 0 2px rgba(75, 155, 212, .14);
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__visual {
  background: #0e2235;
  border-color: #2f4961;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__copy strong {
  color: #eef5fb;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__copy em {
  color: #91a5b8;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option__check {
  background: #0e2235;
  border-color: #4a6680;
}

html[data-theme="dark"] .sf-modal--display-settings .sf-display-option:has(input:checked) .sf-display-option__check {
  background: #4b9bd4;
  border-color: #4b9bd4;
}

@media (max-width: 560px) {
  .sf-page--schedule .sf-period-preview {
    min-width: 68px;
    height: 34px;
    padding: 0 10px;
  }

  .sf-modal--display-settings .sf-modal__head,
  .sf-modal--display-settings .sf-display-settings__body {
    padding: 16px;
  }

  .sf-modal--display-settings .sf-display-option {
    grid-template-columns: 88px minmax(0, 1fr) 22px;
    min-height: 66px;
    padding: 9px;
  }

  .sf-modal--display-settings .sf-modal__footer {
    padding: 12px 16px;
  }
}

/* Compact monthly roster: keep role data intact while matching the lighter
   employee/date grid and discrete daily status pills. */
.sf-page--schedule {
  --date-col-width: 78px;
  --sf-roster-border: #e2e8f0;
  --sf-roster-header: #f8fafc;
}

.sf-page--schedule .sf-table-wrap {
  border: 1px solid var(--sf-roster-border);
  border-radius: 14px 14px 0 0;
}

.sf-page--schedule .sf-schedule-table {
  background: #fff;
}

.sf-page--schedule .sf-schedule-table th,
.sf-page--schedule .sf-schedule-table td {
  border-color: var(--sf-roster-border);
}

.sf-page--schedule .sf-schedule-table thead th {
  height: 52px;
  background: var(--sf-roster-header);
}

.sf-page--schedule .sf-role-head,
.sf-page--schedule .sf-name-head {
  color: #718096;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.sf-page--schedule .sf-day-tab {
  min-height: 51px;
  gap: 3px;
  padding: 5px 2px;
  border-radius: 0;
}

.sf-page--schedule .sf-day-tab span {
  color: #64748b;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.sf-page--schedule .sf-day-tab strong {
  display: grid;
  width: 23px;
  height: 23px;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #0f2742;
  font-size: 12px;
  font-weight: 700;
}

.sf-page--schedule .sf-day-head.is-active-day .sf-day-tab strong,
.sf-page--schedule .sf-day-head.is-today .sf-day-tab strong,
.sf-page--schedule .sf-day-head.is-active-day.is-today .sf-day-tab strong {
  background: #3b82f6;
  color: #fff;
}

.sf-page--schedule .sf-role-cell,
.sf-page--schedule .sf-name-cell {
  height: 44px;
}

.sf-page--schedule .sf-role-cell {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.sf-page--schedule .sf-name-cell {
  padding: 5px 10px;
}

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

.sf-page--schedule .sf-schedule-person strong {
  min-width: 0;
  color: #10243a;
  font-size: 11.5px;
  font-weight: 700;
}

.sf-page--schedule .sf-schedule-avatar {
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 9px;
  font-weight: 800;
}

.sf-page--schedule .sf-schedule-avatar--1 { background: #fef3c7; color: #a16207; }
.sf-page--schedule .sf-schedule-avatar--2 { background: #dcfce7; color: #15803d; }
.sf-page--schedule .sf-schedule-avatar--3 { background: #e0e7ff; color: #4338ca; }
.sf-page--schedule .sf-schedule-avatar--4 { background: #fce7f3; color: #be185d; }
.sf-page--schedule .sf-schedule-avatar--5 { background: #cffafe; color: #0e7490; }

.sf-page--schedule .sf-shift-cell,
.sf-page--schedule .sf-shift-cell.sf-lane-cell,
.sf-page--schedule .sf-shift-cell.sf-exception-cell {
  padding: 0 !important;
  background: #fff !important;
}

.sf-page--schedule .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-lane-cell.is-run-end .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-lane-cell.is-run-start.is-run-end .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-lane-cell.is-run-start + .sf-lane-cell .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) {
  width: calc(100% - 8px) !important;
  min-width: 0 !important;
  min-height: 25px !important;
  margin: 4px !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.sf-page--schedule .sf-shift-card strong,
.sf-page--schedule .sf-lane-cell:not(.is-run-start) .sf-shift-card.sf-shift-card--lane strong,
.sf-page--schedule .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane strong {
  display: flex !important;
  min-width: 0;
  align-items: center;
  justify-content: center !important;
  padding: 0 4px !important;
}

.sf-page--schedule .sf-shift-card strong i,
.sf-page--schedule .sf-shift-card .sf-shift-code {
  display: none !important;
}

.sf-page--schedule .sf-shift-card .sf-shift-label,
.sf-page--schedule .sf-lane-cell:not(.is-run-start) .sf-shift-card.sf-shift-card--lane .sf-shift-label,
.sf-page--schedule .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane .sf-shift-label {
  display: block !important;
  overflow: hidden;
  color: inherit !important;
  font-size: 8px !important;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-page--schedule .sf-shift-card--pagi,
.sf-page--schedule .sf-shift-card--pagi.sf-shift-card--lane {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}

.sf-page--schedule .sf-shift-card--pagi strong,
.sf-page--schedule .sf-shift-card--pagi .sf-shift-label {
  color: #1d4ed8 !important;
}

.sf-page--schedule .sf-shift-card--malam,
.sf-page--schedule .sf-lane-cell--malam .sf-shift-card.sf-shift-card--lane {
  background: #111827 !important;
  color: #fff !important;
}

.sf-page--schedule .sf-shift-card--malam strong,
.sf-page--schedule .sf-shift-card--malam .sf-shift-label {
  color: #fff !important;
}

.sf-page--schedule .sf-shift-card--change_malam.sf-shift-card--quiet {
  background: #dcfce7 !important;
  color: #15803d !important;
}

.sf-page--schedule .sf-shift-card--change_malam.sf-shift-card--quiet strong,
.sf-page--schedule .sf-shift-card--change_malam.sf-shift-card--quiet .sf-shift-label {
  color: #15803d !important;
}

.sf-page--schedule .sf-shift-card--off_change_pagi.sf-shift-card--quiet {
  background: #ede9fe !important;
  color: #6d28d9 !important;
}

.sf-page--schedule .sf-shift-card--off_change_pagi.sf-shift-card--quiet strong,
.sf-page--schedule .sf-shift-card--off_change_pagi.sf-shift-card--quiet .sf-shift-label {
  color: #6d28d9 !important;
}

.sf-page--schedule .sf-shift-card--off_day.sf-shift-card--quiet {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.sf-page--schedule .sf-shift-card--off_day.sf-shift-card--quiet strong,
.sf-page--schedule .sf-shift-card--off_day.sf-shift-card--quiet .sf-shift-label {
  color: #dc2626 !important;
}

html[data-theme="dark"] .sf-page--schedule {
  --sf-roster-border: #2b4054;
  --sf-roster-header: #132436;
}

html[data-theme="dark"] .sf-page--schedule .sf-schedule-table,
html[data-theme="dark"] .sf-page--schedule .sf-shift-cell,
html[data-theme="dark"] .sf-page--schedule .sf-shift-cell.sf-lane-cell,
html[data-theme="dark"] .sf-page--schedule .sf-shift-cell.sf-exception-cell {
  background: #0e1d2c !important;
}

html[data-theme="dark"] .sf-page--schedule .sf-day-tab strong,
html[data-theme="dark"] .sf-page--schedule .sf-schedule-person strong {
  color: #eef5fb;
}

/* Final roster proportions: denser month overview, softer separators and
   clearer hierarchy while preserving the separate role and staff columns. */
.sf-page--schedule {
  --role-col-width: 64px;
  --name-col-width: 210px;
  --date-col-width: 46px;
  --sf-roster-border: #e7edf4;
}

.sf-page--schedule .sf-table-wrap {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

.sf-page--schedule .sf-schedule-table th,
.sf-page--schedule .sf-schedule-table td {
  border-right-color: #edf2f7;
  border-bottom-color: #e7edf4;
}

.sf-page--schedule .sf-schedule-table .sf-day-head:not(:last-child)::after,
.sf-page--schedule .sf-schedule-table .sf-shift-cell:not(:last-child)::after {
  background: #edf2f7;
  opacity: .55;
}

.sf-page--schedule .sf-schedule-table thead th {
  height: 56px;
}

.sf-page--schedule .sf-role-head,
.sf-page--schedule .sf-name-head {
  padding-inline: 12px;
  background: #f9fbfd;
}

.sf-page--schedule .sf-day-tab {
  min-height: 55px;
  padding: 6px 1px;
}

.sf-page--schedule .sf-day-tab span {
  font-size: 8.5px;
}

.sf-page--schedule .sf-day-tab strong {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.sf-page--schedule .sf-day-head.is-weekend:not(.is-active-day):not(.is-today) .sf-day-tab span,
.sf-page--schedule .sf-day-head.is-weekend:not(.is-active-day):not(.is-today) .sf-day-tab strong {
  color: #94a3b8;
}

.sf-page--schedule .sf-role-cell,
.sf-page--schedule .sf-name-cell {
  height: 46px;
}

.sf-page--schedule .sf-role-cell {
  padding-inline: 8px;
  font-size: 9px;
  text-align: center;
}

.sf-page--schedule .sf-name-cell {
  padding-inline: 9px;
}

.sf-page--schedule .sf-schedule-person {
  gap: 8px;
}

.sf-page--schedule .sf-schedule-person strong {
  font-size: 10.5px;
}

.sf-page--schedule .sf-schedule-avatar {
  width: 28px;
  min-width: 28px;
  height: 28px;
  font-size: 8.5px;
}

.sf-page--schedule .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-lane-cell.is-run-end .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-lane-cell.is-run-start.is-run-end .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-lane-cell.is-run-start + .sf-lane-cell .sf-shift-card.sf-shift-card--lane,
.sf-page--schedule .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) {
  width: calc(100% - 6px) !important;
  min-height: 24px !important;
  margin: 3px !important;
  border-radius: 5px !important;
}

.sf-page--schedule .sf-shift-card .sf-shift-label,
.sf-page--schedule .sf-lane-cell:not(.is-run-start) .sf-shift-card.sf-shift-card--lane .sf-shift-label,
.sf-page--schedule .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane .sf-shift-label {
  font-size: 7.5px !important;
  letter-spacing: -.01em;
}

.sf-page--schedule .sf-shift-card--quiet:is(.sf-shift-card--change_malam, .sf-shift-card--off_change_pagi, .sf-shift-card--cuti, .sf-shift-card--off_day) .sf-shift-label {
  font-size: 6.8px !important;
}

.sf-page--schedule .sf-shift-cell.is-active-col {
  background: #f2f8ff !important;
}

.sf-page--schedule .sf-schedule-table tbody tr:hover .sf-shift-cell {
  background: #f8fbff !important;
}

.sf-page--schedule .sf-schedule-table tbody tr:hover .sf-shift-cell.is-active-col {
  background: #ebf5ff !important;
}

html[data-theme="dark"] .sf-page--schedule {
  --sf-roster-border: #2b4054;
}

html[data-theme="dark"] .sf-page--schedule .sf-schedule-table th,
html[data-theme="dark"] .sf-page--schedule .sf-schedule-table td {
  border-right-color: #253b50;
  border-bottom-color: #2b4054;
}

html[data-theme="dark"] .sf-page--schedule .sf-shift-cell.is-active-col {
  background: #132b41 !important;
}

/* Schedule toolbar and cell alignment finishing pass. */
.sf-page--schedule .sf-toolbar__left {
  gap: 12px;
}

.sf-page--schedule .sf-period {
  gap: 8px;
  padding-right: 0;
  border-right: 0;
}

.sf-page--schedule .sf-month-nav,
.sf-page--schedule .sf-month-current {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.sf-page--schedule .sf-month-nav {
  gap: 9px;
  min-width: 112px;
  padding: 0 13px;
  border: 1px solid #dbe3ed;
  background: #fff;
  color: #263b55;
}

.sf-page--schedule .sf-month-nav:hover,
.sf-page--schedule .sf-month-nav:focus-visible {
  border-color: #aebdce;
  background: #f8fafc;
  color: #10243a;
}

.sf-page--schedule .sf-month-current {
  min-width: 92px;
  padding: 0 14px;
  border: 1px solid #111c30;
  background: #111c30;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.sf-page--schedule .sf-search {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sf-page--schedule .sf-search:focus-within {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sf-page--schedule .sf-search input {
  border: 1px solid #d6dee7;
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: none;
}

.sf-page--schedule .sf-search input:focus {
  border-color: #9db5ca;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .08);
}

.sf-page--schedule .sf-shift-card strong,
.sf-page--schedule .sf-lane-cell.is-run-start .sf-shift-card.sf-shift-card--lane strong,
.sf-page--schedule .sf-lane-cell:not(.is-run-start) .sf-shift-card.sf-shift-card--lane strong {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  transform: none !important;
}

.sf-page--schedule .sf-shift-card .sf-shift-label {
  width: 100%;
  text-align: center;
}

html[data-theme="dark"] .sf-page--schedule .sf-month-nav {
  border-color: #34506a;
  background: #13283c;
  color: #d9e9f7;
}

html[data-theme="dark"] .sf-page--schedule .sf-month-nav:hover,
html[data-theme="dark"] .sf-page--schedule .sf-month-nav:focus-visible {
  border-color: #4b7395;
  background: #173047;
  color: #fff;
}

html[data-theme="dark"] .sf-page--schedule .sf-month-current {
  border-color: #4b9bd4;
  background: #173754;
}

.sf-page--schedule .sf-shift-card--change_malam.sf-shift-card--quiet,
.sf-page--schedule .sf-shift-card--change_malam.sf-shift-card--quiet strong,
.sf-page--schedule .sf-shift-card--change_malam.sf-shift-card--quiet .sf-shift-label {
  background: #111827 !important;
  color: #facc15 !important;
}

/* Full-month preview mirrors the compact home roster instead of using the
   legacy connected-lane canvas. */
.sf-modal--month-preview {
  --sf-preview-border: #e7edf4;
}

.sf-modal--month-preview .sf-month-preview__table-wrap {
  overflow-x: hidden;
  overflow-y: hidden;
  border: 1px solid var(--sf-preview-border);
  border-radius: 14px !important;
  background: #fff;
}

.sf-modal--month-preview .sf-month-preview-table {
  height: auto;
  table-layout: fixed;
  background: #fff;
}

.sf-modal--month-preview .sf-month-role-col {
  width: 64px;
}

.sf-modal--month-preview .sf-month-name-col {
  width: 210px;
}

.sf-modal--month-preview .sf-month-preview-table th,
.sf-modal--month-preview .sf-month-preview-table td {
  border-right-color: #edf2f7;
  border-bottom-color: var(--sf-preview-border);
}

.sf-modal--month-preview .sf-month-preview-table thead th {
  height: 48px;
  background: #f9fbfd;
}

.sf-modal--month-preview .sf-month-preview-table thead span {
  color: #64748b !important;
  font-size: 7.5px;
  font-weight: 500;
  text-transform: none;
}

.sf-modal--month-preview .sf-month-preview-table thead strong {
  display: grid;
  width: 21px;
  height: 21px;
  margin: 2px auto 0;
  place-items: center;
  border-radius: 50%;
  color: #0f2742 !important;
  font-size: 9px;
}

.sf-modal--month-preview .sf-month-preview-table thead th.is-weekend:not(.is-today) span,
.sf-modal--month-preview .sf-month-preview-table thead th.is-weekend:not(.is-today) strong {
  color: #94a3b8 !important;
}

.sf-modal--month-preview .sf-month-preview-table thead th.is-today {
  background: #eef6ff;
  box-shadow: none;
}

.sf-modal--month-preview .sf-month-preview-table thead th.is-today strong {
  background: #3b82f6;
  color: #fff !important;
}

.sf-modal--month-preview .sf-month-preview-table tbody tr,
.sf-modal--month-preview .sf-month-preview-table tbody td {
  height: var(--sf-month-preview-row-height, 40px);
  background: #fff !important;
}

.sf-modal--month-preview .sf-month-preview-table tbody td.sf-month-role,
.sf-modal--month-preview .sf-month-preview-table tbody td.sf-month-name {
  padding: 4px 7px;
  background: #fff !important;
}

.sf-modal--month-preview .sf-month-role {
  color: #64748b;
  font-size: 7.5px;
  font-weight: 700;
  text-align: center;
}

.sf-modal--month-preview .sf-month-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.sf-modal--month-preview .sf-month-person .sf-schedule-avatar {
  display: grid;
  width: clamp(12px, calc(var(--sf-month-preview-row-height, 40px) - 10px), 26px);
  min-width: clamp(12px, calc(var(--sf-month-preview-row-height, 40px) - 10px), 26px);
  height: clamp(12px, calc(var(--sf-month-preview-row-height, 40px) - 10px), 26px);
  place-items: center;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 8px;
  font-weight: 800;
}

.sf-modal--month-preview .sf-schedule-avatar--1 { background: #fef3c7; color: #a16207; }
.sf-modal--month-preview .sf-schedule-avatar--2 { background: #dcfce7; color: #15803d; }
.sf-modal--month-preview .sf-schedule-avatar--3 { background: #e0e7ff; color: #4338ca; }
.sf-modal--month-preview .sf-schedule-avatar--4 { background: #fce7f3; color: #be185d; }
.sf-modal--month-preview .sf-schedule-avatar--5 { background: #cffafe; color: #0e7490; }

.sf-modal--month-preview .sf-month-person strong {
  overflow: hidden;
  min-width: 0;
  color: #10243a;
  font-size: 9.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-modal--month-preview .sf-month-badge,
.sf-modal--month-preview .sf-month-badge--lane,
.sf-modal--month-preview .sf-month-badge--lane.is-run-start,
.sf-modal--month-preview .sf-month-badge--lane.is-run-end,
.sf-modal--month-preview .sf-month-badge--lane.is-run-start.is-run-end,
.sf-modal--month-preview .sf-month-badge.is-month-end {
  width: calc(100% - 4px);
  height: max(8px, calc(var(--sf-month-preview-row-height, 40px) - 6px));
  min-height: 0;
  margin: 2px;
  border-radius: 5px;
  font-size: 6.5px;
  box-shadow: none;
}

.sf-modal--month-preview .sf-month-badge span {
  display: block !important;
  overflow: hidden;
  width: 100%;
  padding: 0 1px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-preview-table tbody td.sf-month-role,
.sf-modal--month-preview.is-auto-condensed .sf-month-preview-table tbody td.sf-month-name {
  padding-top: 0;
  padding-bottom: 0;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-person {
  gap: 4px;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-person .sf-schedule-avatar {
  font-size: 6px;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-person strong {
  font-size: 7.5px;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-badge {
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 5.5px;
}

.sf-modal--month-preview .sf-month-badge--pagi {
  background: #dbeafe;
  color: #1d4ed8;
}

.sf-modal--month-preview .sf-month-badge--malam {
  background: #111827;
  color: #fff;
}

.sf-modal--month-preview .sf-month-badge--change_malam {
  background: #111827;
  color: #facc15;
}

.sf-modal--month-preview .sf-month-badge--off_change_pagi {
  background: #ede9fe;
  color: #6d28d9;
}

.sf-modal--month-preview .sf-month-badge--cuti {
  background: #fef3c7;
  color: #a16207;
}

.sf-modal--month-preview .sf-month-badge--off_day {
  background: #fee2e2;
  color: #dc2626;
}

html[data-theme="dark"] .sf-modal--month-preview {
  --sf-preview-border: #2b4054;
}

html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview__table-wrap,
html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table,
html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody tr,
html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody td,
html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody td.sf-month-role,
html[data-theme="dark"] .sf-modal--month-preview .sf-month-preview-table tbody td.sf-month-name {
  background: #0e1d2c !important;
}

html[data-theme="dark"] .sf-modal--month-preview .sf-month-person strong {
  color: #eef5fb;
}

/* Dense preview readability: spend the full viewport on data and keep text
   legible even when 40+ staff rows must fit without scrolling. */
.sf-modal-backdrop:has(.sf-modal--month-preview) {
  box-sizing: border-box;
  place-items: center;
  padding: 2px;
  overflow: hidden;
}

.sf-modal--month-preview {
  width: calc(100vw - 4px);
  height: calc(100dvh - 4px);
  max-width: none;
  max-height: calc(100dvh - 4px);
  border-radius: 12px;
}

.sf-modal--month-preview .sf-month-preview__head {
  gap: 10px;
  min-height: 46px;
  padding: 7px 14px;
}

.sf-modal--month-preview .sf-month-preview__head h3 {
  font-size: 15px;
}

.sf-modal--month-preview .sf-month-legend {
  gap: 4px 10px;
  font-size: 9px;
}

.sf-modal--month-preview .sf-month-preview__body {
  padding: 4px;
}

.sf-modal--month-preview .sf-month-preview__table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 9px !important;
}

.sf-modal--month-preview .sf-month-preview-table {
  width: 100%;
  max-width: 100%;
}

.sf-modal--month-preview .sf-month-role-col {
  width: 52px;
}

.sf-modal--month-preview .sf-month-name-col {
  width: 230px;
}

.sf-modal--month-preview .sf-month-preview-table thead th {
  height: 38px;
}

.sf-modal--month-preview .sf-month-preview-table thead span {
  font-size: 7.5px;
}

.sf-modal--month-preview .sf-month-preview-table thead strong {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-person .sf-schedule-avatar {
  display: none;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-person {
  gap: 0;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-person strong {
  font-size: 9.5px;
  line-height: 1;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-role {
  font-size: 7.5px;
  line-height: 1;
}

.sf-modal--month-preview.is-auto-condensed .sf-month-badge {
  height: max(10px, calc(var(--sf-month-preview-row-height, 40px) - 3px));
  margin: 1px 2px;
  font-size: 7.25px;
  line-height: 1;
}

@media (max-width: 760px) {
  .sf-page--schedule .sf-month-nav {
    min-width: 38px;
    width: 38px;
    padding: 0;
  }

  .sf-page--schedule .sf-month-nav span {
    display: none;
  }
}

/* Successful login reveal: the actual login card splits open before the app enters. */
body.sf-curtain-active {
  overflow: hidden;
}

.sf-login-curtain {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background:
    radial-gradient(circle at 12% 14%, rgba(47, 134, 216, .13), transparent 31%),
    radial-gradient(circle at 88% 84%, rgba(39, 196, 201, .1), transparent 29%),
    linear-gradient(145deg, #f3f7fb, #e8f3f8);
  pointer-events: all;
  transition: background-color .45s ease, opacity .42s ease .72s;
}

.sf-login-curtain__orbit {
  position: absolute;
  display: block;
  width: min(56vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(47, 134, 216, .14);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(47, 134, 216, .025),
    0 0 0 140px rgba(39, 196, 201, .018);
  pointer-events: none;
  transition: opacity .42s ease .42s, transform 1.05s cubic-bezier(.72, 0, .2, 1);
}

.sf-login-curtain__orbit--left {
  top: -35%;
  left: -20%;
}

.sf-login-curtain__orbit--right {
  right: -24%;
  bottom: -42%;
}

.sf-login-curtain__shell {
  position: relative;
  visibility: visible;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(400px, 1.1fr);
  width: min(880px, calc(100vw - 48px));
  min-height: 520px;
  border: 1px solid #d4e0ea;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(21, 55, 83, .18);
  isolation: isolate;
  transition: border-color .16s ease, background .16s ease, box-shadow .26s ease;
}

.sf-login-curtain__panel {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
  will-change: transform, opacity;
  transition:
    transform 1.08s cubic-bezier(.74, 0, .2, 1),
    opacity .45s ease .52s,
    box-shadow .7s ease;
}

.sf-login-curtain__panel--left {
  align-items: center;
  padding: 48px;
  border-radius: 21px 0 0 21px;
  color: #f4f9ff;
  background:
    radial-gradient(circle at 86% 10%, rgba(50, 204, 208, .18), transparent 34%),
    linear-gradient(135deg, #0d2236, #143a59);
  box-shadow: inset -1px 0 rgba(255, 255, 255, .04);
}

.sf-login-curtain__panel--right {
  flex-direction: column;
  justify-content: center;
  padding: 44px 56px;
  border-radius: 0 21px 21px 0;
  color: #0b1d33;
  background: #fff;
  box-shadow: inset 1px 0 rgba(12, 48, 76, .04);
}

.sf-login-curtain__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.sf-login-curtain__brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(158, 222, 235, .3);
  border-radius: 13px;
  color: #62e0e2;
  background: rgba(255, 255, 255, .08);
  font-size: 21px;
}

.sf-login-curtain__brand > span:last-child {
  display: grid;
  gap: 8px;
}

.sf-login-curtain__brand strong {
  color: #fff;
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1.05;
  letter-spacing: .035em;
}

.sf-login-curtain__brand small {
  color: #71dfe2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.sf-login-curtain__security {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d4e0ea;
  color: #70839a;
  font-size: 10px;
  font-weight: 650;
}

.sf-login-curtain__security span,
.sf-login-curtain__security strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sf-login-curtain__security strong {
  color: #2f86d8;
}

.sf-login-curtain__form-head {
  display: grid;
  justify-items: center;
  margin-bottom: 20px;
  text-align: center;
}

.sf-login-curtain__form-head > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #2f86d8, #536ed4);
  box-shadow: 0 12px 24px rgba(47, 134, 216, .22);
  font-size: 20px;
}

.sf-login-curtain__form-head strong {
  color: #0b1d33;
  font-size: 24px;
}

.sf-login-curtain__form-head small {
  margin-top: 6px;
  color: #70839a;
  font-size: 11px;
  font-weight: 500;
}

.sf-login-curtain__field {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.sf-login-curtain__field > small {
  color: #0b1d33;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .045em;
}

.sf-login-curtain__field > span {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid #d4e0ea;
  border-radius: 11px;
  color: #70839a;
  background: #f7faff;
  font-size: 12px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-login-curtain__field i {
  flex: 0 0 auto;
  color: #7f96ac;
}

.sf-login-curtain__success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  margin-top: 22px;
  border: 1px solid #54a2e8;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #2f86d8, #2473bd);
  box-shadow: 0 13px 26px rgba(47, 134, 216, .22);
  font-size: 12px;
  font-weight: 750;
}

.sf-login-curtain__success i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #2473bd;
  background: #fff;
  font-size: 9px;
}

.sf-login-curtain.is-opening {
  opacity: 0;
  background: transparent;
  pointer-events: none;
}

.sf-login-curtain.is-opening .sf-login-curtain__shell {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.sf-login-curtain.is-opening .sf-login-curtain__panel--left {
  opacity: 0;
  transform: translate3d(calc(-50vw - 110%), 0, 0) rotateY(-3deg);
  box-shadow: 30px 0 45px rgba(18, 49, 74, .2);
}

.sf-login-curtain.is-opening .sf-login-curtain__panel--right {
  opacity: 0;
  transform: translate3d(calc(50vw + 110%), 0, 0) rotateY(3deg);
  box-shadow: -30px 0 45px rgba(18, 49, 74, .16);
}

.sf-login-curtain.is-opening .sf-login-curtain__orbit--left {
  opacity: 0;
  transform: translate3d(-12vw, -4vh, 0) scale(1.08);
}

.sf-login-curtain.is-opening .sf-login-curtain__orbit--right {
  opacity: 0;
  transform: translate3d(12vw, 4vh, 0) scale(1.08);
}

body.sf-curtain-active .sf-sidebar,
body.sf-curtain-active .sf-topbar,
body.sf-curtain-active .sf-main {
  opacity: 0;
}

body.sf-curtain-active .sf-sidebar {
  transform: translate3d(-42px, 0, 0);
}

body.sf-curtain-active .sf-topbar {
  transform: translate3d(0, -24px, 0);
}

body.sf-curtain-active .sf-main {
  transform: translate3d(0, 18px, 0);
}

body.sf-curtain-active .sf-sidebar :where(.sf-brand, .sf-nav__group, .sf-nav__item, .sf-nav-tree) {
  opacity: 0;
  transform: translate3d(-18px, 0, 0);
}

body.sf-dashboard-revealing .sf-sidebar {
  animation: sf-login-reveal-sidebar .68s cubic-bezier(.2, .78, .2, 1) .1s both;
}

body.sf-dashboard-revealing .sf-topbar {
  animation: sf-login-reveal-topbar .58s cubic-bezier(.2, .78, .2, 1) .16s both;
}

body.sf-dashboard-revealing .sf-main {
  animation: sf-login-reveal-main .64s cubic-bezier(.2, .78, .2, 1) .2s both;
}

body.sf-dashboard-revealing .sf-sidebar .sf-brand {
  animation: sf-login-reveal-nav .46s ease .24s both;
}

body.sf-dashboard-revealing .sf-sidebar .sf-nav__group {
  animation: sf-login-reveal-nav .46s ease .3s both;
}

body.sf-dashboard-revealing .sf-sidebar .sf-nav > :where(.sf-nav__item, .sf-nav-tree) {
  animation: sf-login-reveal-nav .5s cubic-bezier(.2, .78, .2, 1) both;
}

body.sf-dashboard-revealing .sf-sidebar .sf-nav > :nth-child(2) { animation-delay: .36s; }
body.sf-dashboard-revealing .sf-sidebar .sf-nav > :nth-child(3) { animation-delay: .41s; }
body.sf-dashboard-revealing .sf-sidebar .sf-nav > :nth-child(4) { animation-delay: .46s; }
body.sf-dashboard-revealing .sf-sidebar .sf-nav > :nth-child(5) { animation-delay: .51s; }
body.sf-dashboard-revealing .sf-sidebar .sf-nav > :nth-child(6) { animation-delay: .56s; }
body.sf-dashboard-revealing .sf-sidebar .sf-nav > :nth-child(7) { animation-delay: .61s; }
body.sf-dashboard-revealing .sf-sidebar .sf-nav > :nth-child(8) { animation-delay: .66s; }
body.sf-dashboard-revealing .sf-sidebar .sf-nav > :nth-child(9) { animation-delay: .71s; }

body.sf-dashboard-revealing .sf-page--dashboard .sf-dashboard-hero {
  animation: sf-login-reveal-block .62s cubic-bezier(.2, .78, .2, 1) .28s both;
}

body.sf-dashboard-revealing .sf-page--dashboard .sf-dashboard-section-head {
  animation: sf-login-reveal-block .54s cubic-bezier(.2, .78, .2, 1) .38s both;
}

body.sf-dashboard-revealing .sf-page--dashboard .sf-dashboard-role-summary {
  animation: sf-login-reveal-block .54s cubic-bezier(.2, .78, .2, 1) .38s both;
}

body.sf-dashboard-revealing .sf-page--dashboard .sf-dashboard-role-card {
  animation: sf-login-reveal-card .55s cubic-bezier(.2, .78, .2, 1) both;
  animation-delay: calc(.46s + (var(--dashboard-order) * 70ms));
}

body.sf-dashboard-revealing .sf-page--dashboard .sf-dashboard-away {
  animation: sf-login-reveal-card .56s cubic-bezier(.2, .78, .2, 1) .72s both;
}

@keyframes sf-login-card-settle {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sf-login-reveal-sidebar {
  from { opacity: 0; transform: translate3d(-42px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sf-login-reveal-topbar {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sf-login-reveal-main {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sf-login-reveal-nav {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sf-login-reveal-block {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes sf-login-reveal-card {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

html[data-theme="dark"] .sf-login-curtain {
  background:
    radial-gradient(circle at 12% 14%, rgba(59, 147, 229, .15), transparent 31%),
    radial-gradient(circle at 88% 84%, rgba(50, 204, 208, .11), transparent 29%),
    linear-gradient(145deg, #071421, #0a1c2c);
}

html[data-theme="dark"] .sf-login-curtain__shell {
  border-color: #29445c;
  background: #0d1d2d;
}

html[data-theme="dark"] .sf-login-curtain__panel--right {
  color: #eef6ff;
  background: #0d1d2d;
}

html[data-theme="dark"] .sf-login-curtain__security,
html[data-theme="dark"] .sf-login-curtain__field > span {
  border-color: #29445c;
}

html[data-theme="dark"] .sf-login-curtain__form-head strong,
html[data-theme="dark"] .sf-login-curtain__field > small {
  color: #eef6ff;
}

html[data-theme="dark"] .sf-login-curtain__form-head small,
html[data-theme="dark"] .sf-login-curtain__field > span {
  color: #91a7bd;
}

html[data-theme="dark"] .sf-login-curtain__field > span {
  background: #11263a;
}

@media (max-width: 820px) {
  .sf-login-curtain__shell {
    grid-template-columns: minmax(260px, .82fr) minmax(360px, 1.18fr);
    width: min(740px, calc(100vw - 32px));
  }

  .sf-login-curtain__panel--left {
    padding: 34px;
  }

  .sf-login-curtain__panel--right {
    padding: 34px 36px;
  }
}

@media (max-width: 560px) {
  .sf-login-curtain {
    padding: 14px;
  }

  .sf-login-curtain__shell {
    display: block;
    width: min(470px, 100%);
    min-height: 0;
    border-radius: 18px;
  }

  .sf-login-curtain__panel {
    min-height: 0;
  }

  .sf-login-curtain__panel--left {
    justify-content: center;
    min-height: 116px;
    padding: 24px 18px;
    border-radius: 17px 17px 0 0;
  }

  .sf-login-curtain__brand {
    flex-direction: row;
    align-items: center;
    gap: 11px;
  }

  .sf-login-curtain__brand-mark {
    width: 42px;
    height: 42px;
  }

  .sf-login-curtain__brand strong {
    font-size: 21px;
  }

  .sf-login-curtain__panel--right {
    display: block;
    padding: 22px 18px 24px;
    border-radius: 0 0 17px 17px;
  }

  .sf-login-curtain__security {
    margin-bottom: 14px;
  }

  .sf-login-curtain__form-head > span {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
  }

  .sf-login-curtain__form-head strong {
    font-size: 21px;
  }

  .sf-login-curtain.is-opening .sf-login-curtain__panel--left {
    transform: translate3d(-115vw, -12vh, 0);
  }

  .sf-login-curtain.is-opening .sf-login-curtain__panel--right {
    transform: translate3d(115vw, 12vh, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-login-curtain {
    display: none;
  }

  body.sf-curtain-active .sf-sidebar,
  body.sf-curtain-active .sf-topbar,
  body.sf-curtain-active .sf-main,
  body.sf-curtain-active .sf-sidebar :where(.sf-brand, .sf-nav__group, .sf-nav__item, .sf-nav-tree) {
    opacity: 1;
    transform: none;
  }
}

/* Staff account management */
.sf-page--staff {
  display: block;
  height: calc(100dvh - var(--topbar));
  overflow: hidden;
  background: #f4f7fb;
}

.sf-staff-dashboard {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  gap: 14px;
  padding: 20px 24px 22px;
}

.sf-staff-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  gap: 20px;
}

.sf-staff-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #5680ac;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sf-staff-hero h1 {
  margin: 0;
  color: #14263d;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -.035em;
}

.sf-staff-hero p {
  margin: 5px 0 0;
  color: #728197;
  font-size: 12px;
}

.sf-page--staff .sf-staff-add {
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: 12px;
  background: #24364d;
  box-shadow: 0 8px 18px rgba(31, 50, 72, .18);
}

.sf-page--staff .sf-staff-add:hover,
.sf-page--staff .sf-staff-add:focus-visible {
  background: #182a41;
  transform: translateY(-1px);
}

.sf-staff-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.sf-staff-metric {
  --metric-color: #5278a3;
  --metric-soft: #eaf2fb;
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  min-width: 0;
  min-height: 76px;
  gap: 11px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid #e0e7ef;
  border-radius: 15px;
  background: #fff;
  color: #22364d;
  text-align: left;
  box-shadow: 0 3px 9px rgba(29, 49, 73, .045);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sf-staff-metric::after {
  content: '';
  position: absolute;
  right: -22px;
  bottom: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--metric-soft);
  opacity: .72;
}

.sf-staff-metric:hover,
.sf-staff-metric:focus-visible {
  border-color: color-mix(in srgb, var(--metric-color) 45%, #dbe4ee);
  box-shadow: 0 9px 20px rgba(32, 54, 80, .1);
  transform: translateY(-2px);
}

.sf-staff-metric.is-selected {
  border-color: var(--metric-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric-soft) 78%, transparent), 0 8px 18px rgba(32, 54, 80, .09);
}

.sf-staff-metric__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--metric-soft);
  color: var(--metric-color);
  font-size: 14px;
}

.sf-staff-metric__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sf-staff-metric__copy small {
  overflow: hidden;
  color: #738299;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-staff-metric__copy strong {
  color: #172b43;
  font-size: 21px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.03em;
}

.sf-staff-metric__arrow {
  position: relative;
  z-index: 1;
  color: var(--metric-color);
  font-size: 10px;
  opacity: .58;
}

.sf-staff-metric--line { --metric-color: #4f6ee8; --metric-soft: #eef1ff; }
.sf-staff-metric--chat { --metric-color: #149a77; --metric-soft: #e7f8f2; }
.sf-staff-metric--captain { --metric-color: #a66d21; --metric-soft: #fff3df; }
.sf-staff-metric--cashier { --metric-color: #8659bb; --metric-soft: #f4ebff; }

.sf-staff-controls {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 12px;
}

.sf-page--staff .sf-staff-controls .sf-search {
  flex: 0 1 310px;
  width: auto;
  min-width: 220px;
}

.sf-page--staff .sf-staff-controls .sf-search input {
  height: 42px;
  border-radius: 12px;
  background: #fff;
}

.sf-staff-role-filter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 4px;
  border: 1px solid #dde5ee;
  border-radius: 12px;
  background: #fff;
}

.sf-staff-role-filter__button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #67778c;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.sf-staff-role-filter__button:hover,
.sf-staff-role-filter__button:focus-visible {
  color: #294763;
  background: #edf3f9;
}

.sf-staff-role-filter__button.is-selected {
  color: #fff;
  background: #2b405a;
  box-shadow: 0 4px 10px rgba(35, 57, 82, .18);
}

.sf-staff-result-count {
  display: flex;
  align-items: baseline;
  margin-left: auto;
  gap: 5px;
  color: #7b899c;
  font-size: 11px;
  white-space: nowrap;
}

.sf-staff-result-count strong {
  color: #213851;
  font-size: 15px;
  font-weight: 850;
}

.sf-staff-table-card {
  min-height: 0;
  margin-right: -24px;
  margin-bottom: -22px;
  margin-left: -24px;
  overflow: hidden;
  border: 0;
  border-top: 1px solid #dfe6ee;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.sf-page--staff .sf-staff-table-wrap {
  height: 100%;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.sf-page--staff .sf-staff-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.sf-page--staff .sf-staff-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.sf-page--staff .sf-staff-table th {
  height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid #dfe6ee;
  background: #f7f9fc;
  color: #8290a5;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sf-page--staff .sf-staff-table td {
  height: 54px;
  padding: 7px 18px;
  border-bottom: 1px solid #edf1f5;
  color: #2b4058;
  font-size: 11px;
}

.sf-page--staff .sf-staff-table tbody tr {
  background: #fff;
  transition: background .15s ease;
}

.sf-page--staff .sf-staff-table tbody tr:nth-child(even) {
  background: #fbfcfe;
}

.sf-page--staff .sf-staff-table tbody tr:hover {
  background: #f2f7fc;
}

.sf-page--staff .sf-staff-table th:nth-child(1),
.sf-page--staff .sf-staff-table td:nth-child(1) { width: 82px; }
.sf-page--staff .sf-staff-table th:nth-child(2),
.sf-page--staff .sf-staff-table td:nth-child(2) { width: 32%; }
.sf-page--staff .sf-staff-table th:nth-child(3),
.sf-page--staff .sf-staff-table td:nth-child(3) { width: 23%; }
.sf-page--staff .sf-staff-table th:nth-child(4),
.sf-page--staff .sf-staff-table td:nth-child(4) { width: 18%; }
.sf-page--staff .sf-staff-table th:last-child,
.sf-page--staff .sf-staff-table td:last-child { width: 190px; }

.sf-page--staff .sf-avatar {
  width: 34px;
  height: 34px;
  border: 0;
  background: linear-gradient(135deg, #e4f2ff, #dff7f2);
  color: #26729b;
  font-size: 10px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px rgba(50, 116, 153, .05);
}

.sf-page--staff .sf-avatar.has-photo {
  overflow: hidden;
  padding: 0;
  background: #e9f2f8;
  box-shadow: inset 0 0 0 1px rgba(50, 116, 153, .12);
}

.sf-page--staff .sf-avatar.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-page--staff .sf-staff-table td strong {
  color: #172b43;
  font-size: 11px;
  font-weight: 850;
}

.sf-staff-username {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #61738a;
  font-size: 10px;
  font-weight: 700;
}

.sf-staff-username i {
  color: #88a0b8;
  font-size: 9px;
}

.sf-staff-no-account {
  color: #a0aaba;
  font-size: 10px;
  font-style: italic;
}

.sf-staff-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf1ff;
  color: #4f64c8;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .025em;
}

.sf-staff-role--cs-chat { background: #e6f8f1; color: #12815f; }
.sf-staff-role--kapten { background: #fff2dc; color: #96621e; }
.sf-staff-role--kasir { background: #f2eaff; color: #7951a6; }

.sf-page--staff .sf-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sf-staff-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 850;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.sf-staff-action:hover,
.sf-staff-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 5px 11px rgba(32, 51, 75, .1);
}

.sf-staff-action--edit {
  border-color: #d4e2f1;
  background: #edf5ff;
  color: #3474b2;
}

.sf-staff-action--delete {
  border-color: #f4d8dc;
  background: #fff0f2;
  color: #d44a5b;
}

.sf-modal--staff {
  width: min(650px, 100%);
}

.sf-modal--staff .sf-modal__head p {
  margin: 5px 0 0;
  color: #728398;
  font-size: 11px;
}

.sf-modal--staff .sf-modal__body {
  gap: 16px;
}

.sf-staff-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.sf-modal--staff .sf-field label span {
  color: #95a1af;
  font-size: 9px;
  font-weight: 700;
}

.sf-input-with-icon,
.sf-password-field {
  position: relative;
}

.sf-input-with-icon > i,
.sf-password-field > i {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  color: #8194aa;
  font-size: 11px;
  transform: translateY(-50%);
  pointer-events: none;
}

.sf-modal--staff .sf-input-with-icon input,
.sf-modal--staff .sf-password-field input {
  width: 100%;
  padding-left: 37px;
}

.sf-modal--staff .sf-password-field input {
  padding-right: 42px;
}

.sf-password-field > button {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7b8ca1;
  transform: translateY(-50%);
}

.sf-password-field > button:hover,
.sf-password-field > button:focus-visible {
  background: #e9f2fb;
  color: #315f8d;
}

.sf-field-hint {
  display: block;
  margin-top: 6px;
  color: #8a98a9;
  font-size: 9px;
}

.sf-staff-account-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #d9e6f2;
  border-radius: 11px;
  background: #f3f8fd;
  color: #60758c;
  font-size: 10px;
  line-height: 1.5;
}

.sf-staff-account-notice > i {
  margin-top: 2px;
  color: #4b84bb;
}

.sf-staff-account-notice strong {
  display: block;
  color: #294761;
}

html[data-theme="dark"] .sf-page--staff {
  background: #0a1622;
}

html[data-theme="dark"] .sf-staff-hero h1,
html[data-theme="dark"] .sf-staff-metric__copy strong,
html[data-theme="dark"] .sf-staff-result-count strong {
  color: #eef5fc;
}

html[data-theme="dark"] .sf-staff-hero p,
html[data-theme="dark"] .sf-staff-metric__copy small,
html[data-theme="dark"] .sf-staff-result-count {
  color: #91a4b8;
}

html[data-theme="dark"] .sf-staff-metric,
html[data-theme="dark"] .sf-staff-controls .sf-search input,
html[data-theme="dark"] .sf-staff-role-filter,
html[data-theme="dark"] .sf-staff-table-card,
html[data-theme="dark"] .sf-page--staff .sf-staff-table-wrap,
html[data-theme="dark"] .sf-page--staff .sf-staff-table,
html[data-theme="dark"] .sf-page--staff .sf-staff-table tbody tr {
  border-color: #26394d;
  background: #101e2d;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table tbody tr:nth-child(even) {
  background: #122233;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table tbody tr:hover {
  background: #172a3d;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table th {
  border-color: #2a3d50;
  background: #142537;
  color: #8da1b6;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table td {
  border-color: #223447;
  color: #cad7e5;
}

html[data-theme="dark"] .sf-page--staff .sf-staff-table td strong,
html[data-theme="dark"] .sf-staff-account-notice strong {
  color: #edf4fb;
}

html[data-theme="dark"] .sf-staff-role-filter__button {
  color: #9eb0c3;
}

html[data-theme="dark"] .sf-staff-role-filter__button:hover {
  background: #1c3045;
}

html[data-theme="dark"] .sf-staff-role-filter__button.is-selected {
  color: #fff;
  background: #3d6388;
}

html[data-theme="dark"] .sf-staff-account-notice {
  border-color: #2d4962;
  background: #13283a;
  color: #a9bbcc;
}

@media (max-width: 1180px) {
  .sf-staff-dashboard {
    padding-inline: 18px;
  }

  .sf-staff-table-card {
    margin-right: -18px;
    margin-left: -18px;
  }

  .sf-staff-metrics {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .sf-staff-controls {
    flex-wrap: wrap;
  }

  .sf-staff-role-filter {
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .sf-page--staff {
    overflow: auto;
  }

  .sf-staff-dashboard {
    display: flex;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    padding: 15px 13px 18px;
  }

  .sf-staff-hero {
    align-items: flex-start;
  }

  .sf-staff-hero h1 {
    font-size: 21px;
  }

  .sf-page--staff .sf-staff-add {
    flex: 0 0 auto;
    padding-inline: 12px;
  }

  .sf-staff-metrics {
    grid-template-columns: repeat(5, 145px);
  }

  .sf-staff-metric {
    min-height: 70px;
  }

  .sf-page--staff .sf-staff-controls .sf-search {
    flex-basis: 100%;
    min-width: 0;
  }

  .sf-staff-role-filter {
    max-width: calc(100vw - 26px);
    order: 2;
  }

  .sf-staff-result-count {
    order: 1;
  }

  .sf-staff-table-card {
    min-height: 420px;
    margin-right: -13px;
    margin-bottom: -18px;
    margin-left: -13px;
  }

  .sf-staff-account-grid {
    grid-template-columns: 1fr;
  }
}

/* Clean staff editor: compact, aligned, and visually consistent. */
.sf-staff-hero {
  min-height: 48px;
}

.sf-staff-hero h1 {
  font-size: 23px;
}

.sf-modal--staff {
  width: min(680px, 100%);
  overflow: visible;
  border: 1px solid #dbe4ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(26, 48, 72, .22);
}

.sf-modal--staff .sf-modal__head {
  padding: 20px 22px 18px;
  border-bottom: 1px solid #e3e9f0;
  border-radius: 13px 13px 0 0;
  background: #fff;
}

.sf-modal--staff .sf-modal__head h3 {
  color: #142c44;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.025em;
}

.sf-modal--staff .sf-modal__head p {
  margin-top: 4px;
  color: #73859a;
  font-size: 10px;
  font-weight: 600;
}

.sf-modal--staff .sf-modal__body {
  gap: 18px;
  padding: 21px 22px 23px;
  background: #fff;
}

.sf-staff-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.sf-staff-edit-grid--single {
  grid-template-columns: 1fr;
}

.sf-staff-edit-card {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sf-modal--staff .sf-staff-edit-card > label {
  display: flex;
  align-items: center;
  min-height: 18px;
  gap: 5px;
  margin-bottom: 7px;
  color: #53687d;
  font-size: 10.5px;
  font-weight: 850;
}

.sf-modal--staff .sf-staff-edit-card > label span {
  color: #94a2b2;
  font-size: 9px;
  font-weight: 700;
}

.sf-modal--staff .sf-staff-edit-card .sf-input-with-icon input,
.sf-modal--staff .sf-staff-edit-card .sf-password-field input,
.sf-modal--staff .sf-staff-edit-card .sf-custom-select__button {
  min-height: 46px;
  border: 1px solid #d6e0e9;
  border-radius: 10px;
  color: #21394f;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 52, 77, .03);
}

.sf-modal--staff .sf-input-with-icon.is-locked input {
  color: #536579;
  background: #f4f7fa;
  cursor: text;
}

.sf-modal--staff .sf-input-with-icon.is-locked > i {
  color: #8a9caf;
}

.sf-modal--staff .sf-password-field > i {
  color: #8a9caf;
}

.sf-modal--staff .sf-password-field > button {
  color: #71879b;
}

.sf-modal--staff .sf-custom-select__button {
  color: #223e55;
  font-weight: 800;
}

.sf-modal--staff .sf-custom-select__button:hover,
.sf-modal--staff .sf-staff-edit-card .sf-custom-select.is-open .sf-custom-select__button {
  border-color: #83add7;
  box-shadow: 0 0 0 3px rgba(57, 125, 192, .09);
}

.sf-modal--staff .sf-staff-edit-card--role .sf-custom-select__menu {
  transition:
    max-height .26s cubic-bezier(.22, .8, .24, 1),
    margin-top .22s cubic-bezier(.22, .8, .24, 1),
    padding .22s cubic-bezier(.22, .8, .24, 1),
    border-color .18s ease,
    opacity .18s ease,
    transform .24s cubic-bezier(.22, .8, .24, 1),
    box-shadow .2s ease;
  will-change: max-height, opacity, transform;
}

.sf-modal--staff .sf-staff-edit-card--role .sf-custom-select.is-open .sf-custom-select__menu {
  animation: sf-staff-role-menu-in .24s cubic-bezier(.22, .8, .24, 1) both;
}

.sf-modal--staff .sf-staff-edit-card--role .sf-custom-select__option {
  transition:
    color .16s ease,
    background-color .16s ease,
    transform .18s cubic-bezier(.22, .8, .24, 1);
}

.sf-modal--staff .sf-staff-edit-card--password .sf-password-field,
.sf-modal--staff .sf-staff-edit-card--password .sf-password-field:focus-within {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.sf-modal--staff .sf-staff-edit-card--password .sf-password-field > button:focus,
.sf-modal--staff .sf-staff-edit-card--password .sf-password-field > button:focus-visible {
  outline: 0;
  box-shadow: none;
}

.sf-modal--staff .sf-staff-edit-card--password .sf-password-field input:focus {
  outline: 0;
  border-color: #d6e0e9;
  box-shadow: 0 1px 2px rgba(24, 52, 77, .03);
}

@keyframes sf-staff-role-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sf-modal--staff .sf-modal__foot {
  min-height: 64px;
  gap: 9px;
  padding: 12px 22px;
  border-top: 1px solid #e3e9f0;
  border-radius: 0 0 13px 13px;
  background: #f8fafc;
}

.sf-modal--staff .sf-modal__foot .sf-btn {
  min-width: 98px;
  min-height: 38px;
  border-radius: 10px;
}

.sf-modal--staff .sf-modal__foot .sf-btn--primary {
  border: 0;
  color: #fff;
  background: #273f58;
  box-shadow: 0 7px 16px rgba(31, 58, 84, .18);
}

.sf-page--staff .sf-staff-action {
  min-width: 58px;
}

html[data-theme="dark"] .sf-modal--staff .sf-modal__head {
  border-color: #294157;
  background: #102132;
}

html[data-theme="dark"] .sf-modal--staff .sf-modal__head h3 {
  color: #f1f7fd;
}

html[data-theme="dark"] .sf-modal--staff .sf-modal__body {
  background: #102132;
}

html[data-theme="dark"] .sf-staff-edit-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .sf-modal--staff .sf-staff-edit-card > label {
  color: #dce8f4;
}

html[data-theme="dark"] .sf-modal--staff .sf-input-with-icon.is-locked input {
  color: #aebfd0;
  background: #152738;
}

html[data-theme="dark"] .sf-modal--staff .sf-modal__foot {
  border-color: #294157;
  background: #102132;
}

@media (max-width: 680px) {
  .sf-staff-edit-grid {
    grid-template-columns: 1fr;
  }

  .sf-modal--staff .sf-modal__body {
    padding: 15px;
  }

  .sf-modal--staff .sf-modal__head,
  .sf-modal--staff .sf-modal__foot {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-modal--staff .sf-staff-edit-card--role .sf-custom-select__menu {
    animation: none !important;
    transition: none !important;
  }
}

/* Dashboard and prepared feature pages */
.sf-page--dashboard {
  display: block;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 100% 0, rgba(211, 235, 252, .82), transparent 30%),
    radial-gradient(circle at 18% 100%, rgba(231, 240, 255, .65), transparent 26%),
    #f5f8fb;
}

.sf-dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 164px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(26, 71, 106, .22);
  border-radius: 18px;
  background:
    linear-gradient(120deg, #14304a 0%, #1c4d73 58%, #2f79ac 100%);
  box-shadow: 0 18px 42px rgba(24, 64, 96, .2);
  isolation: isolate;
  animation: sf-dashboard-rise .48s cubic-bezier(.2, .8, .2, 1) both;
}

.sf-dashboard-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 53%, rgba(255, 255, 255, .035) 53% 65%, transparent 65%),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 255, 255, .025) 52px 53px);
  pointer-events: none;
}

.sf-dashboard-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -74px;
  width: 300px;
  height: 300px;
  border: 46px solid rgba(186, 225, 250, .1);
  border-radius: 50%;
  animation: sf-dashboard-orbit 12s linear infinite;
}

.sf-dashboard-hero__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(109, 203, 255, .14);
  filter: blur(1px);
  pointer-events: none;
}

.sf-dashboard-hero__glow--one {
  top: -30px;
  right: 28%;
  width: 98px;
  height: 98px;
  animation: sf-dashboard-float 7s ease-in-out infinite;
}

.sf-dashboard-hero__glow--two {
  right: 16%;
  bottom: -44px;
  width: 126px;
  height: 126px;
  background: rgba(119, 225, 223, .09);
  animation: sf-dashboard-float 9s ease-in-out -2s infinite reverse;
}

.sf-dashboard-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.sf-dashboard-hero__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  margin-right: 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .08));
  box-shadow: 0 13px 30px rgba(6, 31, 51, .24), inset 0 1px rgba(255, 255, 255, .2);
  font-size: 24px;
  backdrop-filter: blur(8px);
  animation: sf-dashboard-icon-breathe 3.4s ease-in-out infinite;
}

.sf-dashboard-hero__icon > span {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border: 3px solid #215b84;
  border-radius: 50%;
  background: #55e0c2;
  box-shadow: 0 0 0 4px rgba(85, 224, 194, .13);
}

.sf-dashboard-hero__copy {
  min-width: 0;
}

.sf-dashboard-hero__copy > span,
.sf-dashboard-section-head > div:first-child > span {
  color: #5482aa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sf-dashboard-hero__copy > span {
  color: #9dd7fa;
}

.sf-dashboard-hero__copy h1 {
  max-width: min(720px, 58vw);
  margin: 4px 0 10px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(24px, 2.15vw, 34px);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-dashboard-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  color: #d9ecf8;
}

.sf-dashboard-hero__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 0;
  font-size: 10px;
  font-weight: 750;
}

.sf-dashboard-hero__meta > span + span {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .28);
}

.sf-dashboard-hero__meta > span i {
  color: #6be2cc;
  font-size: 6px;
}

.sf-dashboard-hero__meta > span + span i {
  color: #a9d9f8;
  font-size: 10px;
}

.sf-dashboard-hero__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}

.sf-dashboard-hero__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 11px;
  color: #e8f4fb;
  background: rgba(255, 255, 255, .075);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  backdrop-filter: blur(9px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sf-dashboard-hero__action--primary {
  color: #173955;
  background: #fff;
  box-shadow: 0 10px 24px rgba(3, 26, 45, .18);
}

.sf-dashboard-hero__action:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14);
}

.sf-dashboard-hero__action--primary:hover {
  background: #f3faff;
  box-shadow: 0 14px 30px rgba(3, 26, 45, .24);
}

.sf-dashboard-hero__action:active {
  transform: translateY(0) scale(.97);
}

.sf-dashboard-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 24px 2px 12px;
}

.sf-dashboard-section-head h2 {
  margin: 3px 0 0;
  color: #152a3e;
  font-size: 18px;
  line-height: 1.2;
}

.sf-dashboard-role-summary {
  display: flex;
  justify-content: flex-end;
  margin: 24px 2px 12px;
}

.sf-dashboard-total {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 6px 12px 6px 7px;
  border: 1px solid #dce6ef;
  border-radius: 12px;
  color: #667b8f;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 6px 16px rgba(35, 61, 84, .045);
}

.sf-dashboard-total__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #4482b8;
  background: #e9f3fb;
}

.sf-dashboard-total > span:last-child {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.sf-dashboard-total small {
  font-size: 10px;
}

.sf-dashboard-total strong {
  color: #17334d;
  font-size: 16px;
}

.sf-dashboard-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sf-dashboard-role-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  min-width: 0;
  min-height: 158px;
  padding: 17px;
  border: 1px solid #dfe8f0;
  border-radius: 15px;
  color: inherit;
  background: #fff;
  font: inherit;
  text-align: left;
  box-shadow: 0 8px 22px rgba(35, 61, 84, .055);
  cursor: pointer;
  animation: sf-dashboard-card-in .48s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(80ms + (var(--dashboard-order) * 65ms));
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.sf-dashboard-role-card:hover {
  z-index: 1;
  transform: translateY(-5px);
  border-color: rgba(68, 130, 184, .34);
  box-shadow: 0 17px 34px rgba(35, 61, 84, .12);
}

.sf-dashboard-role-card:active {
  transform: translateY(-1px) scale(.985);
}

.sf-dashboard-role-card__top,
.sf-dashboard-role-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sf-dashboard-role-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 16px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.sf-dashboard-role-card:hover .sf-dashboard-role-card__icon {
  transform: rotate(-6deg) scale(1.08);
}

.sf-dashboard-role-card__arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #9aacbd;
  background: #f5f8fb;
  font-size: 10px;
  transition: color .2s ease, transform .2s ease, background .2s ease;
}

.sf-dashboard-role-card:hover .sf-dashboard-role-card__arrow {
  color: #397aaa;
  background: #eaf4fb;
  transform: translate(2px, -2px);
}

.sf-dashboard-role-card--1 .sf-dashboard-role-card__icon {
  color: #326fd5;
  background: #e7f0ff;
}

.sf-dashboard-role-card--2 .sf-dashboard-role-card__icon {
  color: #0b9b78;
  background: #e2f8f1;
}

.sf-dashboard-role-card--3 .sf-dashboard-role-card__icon {
  color: #bd7818;
  background: #fff3dd;
}

.sf-dashboard-role-card--4 .sf-dashboard-role-card__icon {
  color: #874ac2;
  background: #f2e9fc;
}

.sf-dashboard-role-card__body > span:first-child,
.sf-dashboard-role-card__body small {
  color: #73869a;
}

.sf-dashboard-role-card__body > span:first-child {
  font-size: 11px;
  font-weight: 750;
}

.sf-dashboard-role-card__body strong {
  color: #112b44;
  font-size: 25px;
  line-height: 1;
}

.sf-dashboard-role-card__body small {
  margin-left: 4px;
  font-size: 10px;
}

.sf-dashboard-role-card__progress {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f6;
}

.sf-dashboard-role-card__progress > span {
  display: block;
  width: var(--role-share);
  height: 100%;
  border-radius: inherit;
  background: #5791db;
  transform-origin: left;
  animation: sf-dashboard-progress 1s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(250ms + (var(--dashboard-order) * 65ms));
}

.sf-dashboard-role-card--2 .sf-dashboard-role-card__progress > span {
  background: #28aa87;
}

.sf-dashboard-role-card--3 .sf-dashboard-role-card__progress > span {
  background: #dc9c3a;
}

.sf-dashboard-role-card--4 .sf-dashboard-role-card__progress > span {
  background: #a06bd3;
}

.sf-dashboard-role-card__hint {
  color: #9aabba;
  font-size: 9px;
  font-weight: 700;
  transition: color .2s ease;
}

.sf-dashboard-role-card:hover .sf-dashboard-role-card__hint {
  color: #4a7ea8;
}

.sf-dashboard-section-head--activity {
  margin-top: 22px;
}

.sf-dashboard-section-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  border: 0;
  color: #4e779a;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: color .2s ease, gap .2s ease;
}

.sf-dashboard-section-link:hover {
  gap: 10px;
  color: #245f90;
}

.sf-dashboard-away-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.sf-dashboard-away {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon copy count"
    "members members members";
  align-items: start;
  gap: 14px;
  min-width: 0;
  min-height: 136px;
  padding: 20px;
  border: 1px solid #dfe8f0;
  border-radius: 14px;
  color: inherit;
  background: #fff;
  font: inherit;
  text-align: left;
  box-shadow: 0 8px 22px rgba(35, 61, 84, .04);
  animation: sf-dashboard-card-in .5s cubic-bezier(.2, .8, .2, 1) .32s both;
}

.sf-dashboard-away__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 17px;
}

.sf-dashboard-away--cuti .sf-dashboard-away__icon {
  color: #b27516;
  background: #fff3d9;
}

.sf-dashboard-away--offday .sf-dashboard-away__icon {
  color: #d14f5a;
  background: #ffe9eb;
}

.sf-dashboard-away__copy > strong {
  display: block;
  color: #19334c;
  font-weight: 800;
}

.sf-dashboard-away__copy {
  grid-area: copy;
  min-width: 0;
}

.sf-dashboard-away__copy > span {
  display: block;
  margin: 3px 0 0;
  color: #7a8b9c;
  font-size: 10px;
}

.sf-dashboard-away__count {
  grid-area: count;
  min-width: 52px;
  text-align: right;
}

.sf-dashboard-away__count strong {
  display: block;
  color: #17314a;
  font-size: 30px;
  line-height: 1;
}

.sf-dashboard-away__count small {
  color: #91a1b1;
  font-size: 9px;
}

.sf-dashboard-away__members {
  grid-area: members;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  margin: 2px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #e8eef4;
  list-style: none;
}

.sf-dashboard-away__members li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  color: #38536c;
  font-size: 10px;
  line-height: 1.35;
}

.sf-dashboard-away__members li > span {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 4px;
  border-radius: 50%;
  background: #c38a2f;
  box-shadow: 0 0 0 3px rgba(195, 138, 47, .1);
}

.sf-dashboard-away--offday .sf-dashboard-away__members li > span {
  background: #db6671;
  box-shadow: 0 0 0 3px rgba(219, 102, 113, .1);
}

.sf-dashboard-away__members strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.sf-dashboard-away__members .is-empty {
  grid-column: 1 / -1;
  color: #8999a8;
  font-weight: 500;
}

@keyframes sf-dashboard-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sf-dashboard-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sf-dashboard-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes sf-dashboard-icon-breathe {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(-2deg); }
}

@keyframes sf-dashboard-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(12px, -10px, 0); }
}

@keyframes sf-dashboard-orbit {
  to { transform: rotate(360deg); }
}

.sf-page--empty-feature {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #f7f9fb;
}

.sf-empty-feature__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.sf-empty-feature__heading h1 {
  margin: 0;
  color: #163049;
  font-size: 20px;
  letter-spacing: -.02em;
}

.sf-empty-feature__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #346e9f;
  background: #e5f1fb;
}

.sf-empty-feature__canvas {
  min-height: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(219, 234, 246, .42), transparent 28%),
    #f7f9fb;
}

html[data-theme="dark"] .sf-page--dashboard,
html[data-theme="dark"] .sf-page--empty-feature,
html[data-theme="dark"] .sf-empty-feature__canvas {
  background: #0d1a26;
}

html[data-theme="dark"] .sf-dashboard-hero,
html[data-theme="dark"] .sf-dashboard-role-card,
html[data-theme="dark"] .sf-dashboard-away,
html[data-theme="dark"] .sf-dashboard-total {
  border-color: #294156;
  background: #122536;
  box-shadow: none;
}

html[data-theme="dark"] .sf-dashboard-hero {
  background: linear-gradient(120deg, #10283d 0%, #173c59 58%, #235d84 100%);
}

html[data-theme="dark"] .sf-dashboard-hero__copy h1,
html[data-theme="dark"] .sf-dashboard-section-head h2,
html[data-theme="dark"] .sf-dashboard-role-card__body strong,
html[data-theme="dark"] .sf-dashboard-away__copy > strong,
html[data-theme="dark"] .sf-dashboard-away__count strong,
html[data-theme="dark"] .sf-empty-feature__heading h1 {
  color: #edf5fc;
}

html[data-theme="dark"] .sf-dashboard-role-card__body > span:first-child,
html[data-theme="dark"] .sf-dashboard-role-card__body small,
html[data-theme="dark"] .sf-dashboard-away__copy > span,
html[data-theme="dark"] .sf-dashboard-away__members li {
  color: #92a7b9;
}

html[data-theme="dark"] .sf-dashboard-role-card__arrow {
  color: #7991a5;
  background: #193044;
}

html[data-theme="dark"] .sf-dashboard-away__members {
  border-top-color: #294156;
}

html[data-theme="dark"] .sf-dashboard-role-card__progress {
  background: #21394d;
}

html[data-theme="dark"] .sf-dashboard-total__icon {
  background: #19374e;
}

.sf-dashboard-role-card:focus-visible,
.sf-dashboard-hero__action:focus-visible,
.sf-dashboard-section-link:focus-visible {
  outline: 3px solid rgba(55, 135, 198, .3);
  outline-offset: 3px;
}

@media (max-width: 1000px) {
  .sf-dashboard-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .sf-dashboard-hero__actions {
    justify-content: flex-start;
  }

  .sf-dashboard-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .sf-page--dashboard {
    padding: 14px;
  }

  .sf-dashboard-hero {
    padding: 21px;
  }

  .sf-dashboard-hero__icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
    margin-right: 14px;
    border-radius: 14px;
    font-size: 19px;
  }

  .sf-dashboard-hero__copy h1 {
    max-width: 100%;
    font-size: 23px;
  }

  .sf-dashboard-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sf-dashboard-section-head,
  .sf-dashboard-role-summary {
    align-items: center;
  }

  .sf-dashboard-role-grid,
  .sf-dashboard-away-grid {
    grid-template-columns: 1fr;
  }

  .sf-dashboard-role-card {
    min-height: 148px;
  }
}

@media (max-width: 460px) {
  .sf-dashboard-hero__actions {
    grid-template-columns: 1fr;
  }

  .sf-dashboard-total {
    padding-right: 8px;
  }

  .sf-dashboard-total small {
    display: none;
  }

  .sf-dashboard-away__members {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-dashboard-hero,
  .sf-dashboard-role-card,
  .sf-dashboard-away,
  .sf-dashboard-role-card__progress > span,
  .sf-dashboard-hero__icon,
  .sf-dashboard-hero__glow,
  .sf-dashboard-hero::after {
    animation: none !important;
  }

  .sf-dashboard-role-card,
  .sf-dashboard-hero__action {
    transition: none !important;
  }
}

/* Profile menu and account settings */
.sf-profile-mini__avatar.has-photo,
.sf-profile-menu__avatar.has-photo {
  overflow: hidden;
  padding: 0;
}

.sf-profile-mini__avatar img,
.sf-profile-menu__avatar img,
.sf-profile-photo-editor__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-profile-menu__panel {
  width: 244px;
}

.sf-profile-menu__identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-profile-menu__identity > div:last-child {
  display: grid;
  min-width: 0;
}

.sf-profile-menu__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #d9e4ed;
  border-radius: 50%;
  color: #376b96;
  background: #e9f3fb;
  font-size: 11px;
  font-weight: 800;
}

.sf-profile-menu__actions {
  display: grid;
  gap: 4px;
  padding: 7px 0 0;
}

.sf-profile-menu__action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #526276;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.sf-profile-menu__action i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #3675aa;
  background: #eaf4fc;
  font-size: 10px;
}

.sf-profile-menu__action:hover,
.sf-profile-menu__action:focus-visible {
  color: #173d5f;
  background: #f1f7fc;
  outline: none;
  transform: translateX(1px);
}

.sf-profile-menu[open] .sf-profile-menu__actions {
  animation: sf-profile-menu-item-in .22s .06s ease both;
}

.sf-profile-menu__action--logout {
  position: relative;
  margin-top: 3px;
}

.sf-profile-menu__action--logout::before {
  position: absolute;
  top: -4px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line-soft);
  content: "";
}

.sf-modal--profile {
  width: min(610px, 100%);
  border: 1px solid #d9e3ec;
  border-radius: 15px;
  background: #fff;
}

.sf-modal--profile .sf-modal__head {
  padding: 20px 22px 17px;
  background: linear-gradient(110deg, #f7fbff, #fff);
}

.sf-modal--profile .sf-modal__head h3 {
  color: #15314b;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.sf-modal--profile .sf-modal__head p {
  margin-top: 4px;
  color: #77899b;
  font-size: 11px;
}

.sf-modal--profile .sf-modal__body {
  padding: 22px;
  background: #fff;
}

.sf-modal--profile .sf-modal__foot {
  min-height: 64px;
  padding: 12px 22px;
  border-radius: 0 0 14px 14px;
}

.sf-modal--profile .sf-modal__foot .sf-btn {
  min-width: 104px;
  min-height: 39px;
  border-radius: 10px;
}

.sf-modal--profile .sf-modal__foot .sf-btn--primary {
  border: 0;
  color: #fff;
  background: #263f58;
  box-shadow: 0 8px 18px rgba(34, 65, 94, .18);
}

.sf-modal--profile .sf-modal__foot .sf-btn--primary.is-loading i {
  animation: sf-profile-button-spin .8s linear infinite;
}

.sf-profile-photo-editor {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px;
  border: 1px solid #e0e8ef;
  border-radius: 13px;
  background: #f9fbfd;
}

.sf-profile-photo-editor__preview {
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #315d83, #3f8ac6);
  box-shadow: 0 10px 25px rgba(37, 81, 118, .18), 0 0 0 1px #d2e0ea;
  font-size: 30px;
  font-weight: 800;
}

.sf-profile-photo-editor__copy {
  min-width: 0;
}

.sf-profile-photo-editor__copy > strong {
  display: block;
  color: #17334d;
  font-size: 15px;
}

.sf-profile-photo-editor__copy > p {
  margin: 4px 0 14px;
  color: #73869a;
  font-size: 11px;
}

.sf-profile-photo-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #bfd7eb;
  border-radius: 10px;
  color: #245f91;
  background: #edf6fd;
  font-weight: 750;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.sf-profile-photo-picker:hover {
  border-color: #91bddd;
  background: #e2f1fc;
  transform: translateY(-1px);
}

.sf-profile-photo-editor__copy > small {
  display: block;
  max-width: 270px;
  margin-top: 9px;
  overflow: hidden;
  color: #8a99a8;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-profile-password-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 15px;
  row-gap: 17px;
}

.sf-profile-password-field--current {
  grid-column: 1 / -1;
}

.sf-profile-password-field {
  display: flex;
  align-self: start;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.sf-profile-password-field > label {
  display: block;
  min-height: 15px;
  margin-bottom: 7px;
  color: #52677b;
  font-size: 11px;
  font-weight: 750;
}

.sf-profile-password-field .sf-password-field {
  position: relative;
  width: 100%;
}

.sf-profile-password-field .sf-password-field input {
  width: 100%;
  min-height: 45px;
  padding: 0 43px 0 39px;
  border: 1px solid #d5e0e9;
  border-radius: 10px;
  background: #f9fbfd;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.sf-profile-password-field .sf-password-field input:focus {
  border-color: #7eb0d7;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(64, 135, 191, .1);
}

.sf-profile-password-field > small {
  display: block;
  min-height: 12px;
  margin-top: 6px;
  color: #8b9aa9;
  font-size: 9px;
  line-height: 12px;
}

@keyframes sf-profile-button-spin {
  to { transform: rotate(360deg); }
}

html[data-theme="dark"] .sf-profile-menu__avatar {
  border-color: #38536d;
  color: #d9eafb;
  background: #1a3147;
}

html[data-theme="dark"] .sf-profile-menu__actions {
  border-color: #26394e;
}

html[data-theme="dark"] .sf-profile-menu__action {
  color: #b6c5d5;
}

html[data-theme="dark"] .sf-profile-menu__action i {
  color: #8dc7f4;
  background: #183149;
}

html[data-theme="dark"] .sf-profile-menu__action:hover,
html[data-theme="dark"] .sf-profile-menu__action:focus-visible {
  color: #f0f7fd;
  background: #172a3e;
}

html[data-theme="dark"] .sf-modal--profile,
html[data-theme="dark"] .sf-modal--profile .sf-modal__head,
html[data-theme="dark"] .sf-modal--profile .sf-modal__body,
html[data-theme="dark"] .sf-modal--profile .sf-modal__foot {
  border-color: #294157;
  background: #102132;
}

html[data-theme="dark"] .sf-profile-photo-editor {
  border-color: #2c455b;
  background: #13283a;
}

html[data-theme="dark"] .sf-profile-photo-editor__copy > strong {
  color: #edf5fc;
}

html[data-theme="dark"] .sf-profile-password-field > label {
  color: #c8d8e7;
}

html[data-theme="dark"] .sf-profile-password-field .sf-password-field input {
  border-color: #314b62;
  color: #edf5fc;
  background: #142a3d;
}

@media (max-width: 620px) {
  .sf-profile-photo-editor {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .sf-profile-password-fields {
    grid-template-columns: 1fr;
  }

  .sf-profile-password-field--current {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-profile-menu[open] .sf-profile-menu__actions,
  .sf-profile-photo-picker,
  .sf-profile-menu__action {
    animation: none !important;
    transition: none !important;
  }
}

/* Keep long crosscheck names complete without disturbing adjacent columns. */
.sf-page--attendance .sf-crosscheck-btn {
  display: grid;
  width: 100%;
  max-width: 100%;
  gap: 2px;
  justify-content: center;
}

.sf-page--attendance .sf-crosscheck-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  line-height: 1.15;
}

.sf-page--attendance .sf-crosscheck-meta {
  display: grid;
  gap: 1px;
  width: 100%;
  max-width: 100%;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.sf-page--attendance .sf-crosscheck-meta > span {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.sf-page--attendance .sf-crosscheck-meta__by {
  overflow-wrap: anywhere;
  word-break: normal;
}

.sf-page--attendance .sf-attendance-table td:nth-child(8) {
  padding-right: 10px;
  padding-left: 10px;
}

/* Topbar clock, schedule summary placement, and polished profile control. */
.sf-live-clock {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 250px;
  color: #172b43;
  white-space: nowrap;
}

.sf-live-clock__date {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
}

.sf-live-clock__separator {
  color: #c4ced8;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.sf-live-clock__time {
  min-width: 68px;
  color: #0c2037;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1;
}

.sf-page--schedule .sf-schedule-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid #dfe6ee;
}

.sf-page--schedule .sf-schedule-summary .sf-summary {
  gap: 10px;
  flex-wrap: nowrap;
}

.sf-page--schedule .sf-schedule-summary .sf-summary__item {
  gap: 4px;
  font-size: 11px;
}

.sf-page--schedule .sf-schedule-summary .sf-dot {
  width: 6px;
  height: 6px;
}

.sf-profile-mini {
  position: relative;
  isolation: isolate;
  gap: 9px;
  min-height: 44px;
  max-width: 290px;
  padding: 4px 7px 4px 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  transition:
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    transform .16s ease;
}

.sf-profile-mini::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg, transparent 15%, rgba(69, 145, 211, .12) 50%, transparent 85%);
  transform: translateX(-115%);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.sf-profile-mini:hover,
.sf-profile-mini:focus-visible,
.sf-profile-menu[open] .sf-profile-mini {
  border-color: #d5e3ef;
  outline: none;
  background: #f7fbfe;
  box-shadow: 0 7px 18px rgba(23, 63, 96, .09);
  transform: translateY(-1px);
}

.sf-profile-mini:hover::before,
.sf-profile-mini:focus-visible::before,
.sf-profile-menu[open] .sf-profile-mini::before {
  transform: translateX(115%);
}

.sf-profile-mini:active {
  box-shadow: 0 3px 9px rgba(23, 63, 96, .08);
  transform: translateY(0) scale(.975);
}

.sf-profile-mini__copy {
  display: grid;
  min-width: 0;
  max-width: 190px;
  gap: 1px;
  text-align: right;
}

.sf-profile-mini__copy strong {
  overflow: hidden;
  color: #10243a;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-profile-mini__copy small {
  overflow: hidden;
  color: #7b8da0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-profile-mini__avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #d5e5ee;
  background: linear-gradient(145deg, #e9f5fb, #dff1f3);
  transition: box-shadow .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
}

.sf-profile-mini:hover .sf-profile-mini__avatar,
.sf-profile-menu[open] .sf-profile-mini__avatar {
  box-shadow: 0 0 0 3px rgba(39, 116, 201, .12);
  transform: scale(1.045);
}

.sf-profile-mini__chevron {
  margin-right: 2px;
  color: #8a9bad;
  font-size: 8px;
  transition: color .18s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
}

.sf-profile-menu[open] .sf-profile-mini__chevron {
  color: #2774c9;
  transform: rotate(180deg);
}

html[data-theme="dark"] .sf-live-clock {
  color: #d9e6f2;
}

html[data-theme="dark"] .sf-live-clock__separator {
  color: #52677b;
}

html[data-theme="dark"] .sf-live-clock__time {
  color: #edf6fd;
}

html[data-theme="dark"] .sf-page--schedule .sf-schedule-summary {
  border-left-color: #2d4358;
}

html[data-theme="dark"] .sf-profile-mini:hover,
html[data-theme="dark"] .sf-profile-mini:focus-visible,
html[data-theme="dark"] .sf-profile-menu[open] .sf-profile-mini {
  border-color: #34526b;
  background: #14293c;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .sf-profile-mini__copy strong {
  color: #edf6fd;
}

html[data-theme="dark"] .sf-profile-mini__copy small {
  color: #91a6b9;
}

@media (max-width: 1520px) {
  .sf-page--schedule .sf-toolbar__left {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .sf-page--schedule .sf-schedule-summary {
    flex: 1 1 100%;
    padding-top: 7px;
    padding-left: 0;
    border-top: 1px solid #e6ecf2;
    border-left: 0;
  }

  html[data-theme="dark"] .sf-page--schedule .sf-schedule-summary {
    border-top-color: #2d4358;
  }
}

@media (max-width: 980px) {
  .sf-page--schedule .sf-schedule-summary .sf-summary {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .sf-live-clock {
    min-width: 0;
    gap: 6px;
  }

  .sf-live-clock__date,
  .sf-live-clock__time {
    font-size: 11px;
  }

  .sf-profile-mini__copy,
  .sf-profile-mini__chevron {
    display: none;
  }

  .sf-profile-mini {
    min-height: 38px;
    padding: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-profile-mini,
  .sf-profile-mini::before,
  .sf-profile-mini__avatar,
  .sf-profile-mini__chevron {
    transition: none !important;
  }
}

/* Lock the dashboard at its final frame after the one-time login reveal.
   Without this state, removing sf-dashboard-revealing restarts the dashboard's
   regular entrance animations and creates a visible second jump. */
body.sf-login-reveal-complete .sf-page--dashboard .sf-dashboard-hero,
body.sf-login-reveal-complete .sf-page--dashboard .sf-dashboard-section-head,
body.sf-login-reveal-complete .sf-page--dashboard .sf-dashboard-role-summary,
body.sf-login-reveal-complete .sf-page--dashboard .sf-dashboard-role-card,
body.sf-login-reveal-complete .sf-page--dashboard .sf-dashboard-away,
body.sf-login-reveal-complete .sf-page--dashboard .sf-dashboard-role-card__progress > span {
  opacity: 1;
  transform: none;
  animation: none !important;
}

/* Offday calendar */
.sf-page--offday-calendar {
  min-height: 100%;
  padding: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(205, 228, 246, .42), transparent 28%),
    #f4f7fa;
}

.sf-offday-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.sf-offday-header__title {
  display: flex;
  align-items: center;
  gap: 13px;
}

.sf-offday-header__title > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #cfe0ee;
  border-radius: 13px;
  background: #e8f3fc;
  color: #2679bd;
  font-size: 18px;
  box-shadow: 0 7px 18px rgba(39, 91, 130, .08);
}

.sf-offday-header__title small,
.sf-offday-calendar__head small,
.sf-offday-roster__head small,
.sf-offday-day-detail__date small {
  display: block;
  margin-bottom: 3px;
  color: #6d8296;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.sf-offday-header__title h1,
.sf-offday-calendar__head h2,
.sf-offday-roster__head h2 {
  margin: 0;
  color: #10263d;
}

.sf-offday-header__title h1 {
  font-size: 23px;
}

.sf-offday-header__summary {
  display: flex;
  align-items: stretch;
  border: 1px solid #d7e2eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(34, 70, 100, .05);
}

.sf-offday-header__summary > span {
  display: grid;
  min-width: 104px;
  padding: 9px 16px;
  text-align: center;
}

.sf-offday-header__summary > span + span {
  border-left: 1px solid #e4ebf1;
}

.sf-offday-header__summary strong {
  color: #17324e;
  font-size: 18px;
}

.sf-offday-header__summary small {
  color: #7b8da0;
  font-size: 9px;
  font-weight: 700;
}

.sf-offday-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 -24px;
  padding: 13px 24px;
  border-top: 1px solid #dbe5ed;
  border-bottom: 1px solid #dbe5ed;
  background: rgba(255, 255, 255, .86);
}

.sf-offday-period {
  width: auto;
}

.sf-offday-group-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-offday-group-filter > small {
  color: #74889b;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .09em;
}

.sf-offday-groups {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d5e0e9;
  border-radius: 10px;
  background: #f5f8fb;
}

.sf-offday-group {
  min-width: 88px;
  min-height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #63788d;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sf-offday-group:hover {
  color: #173b5d;
  background: #fff;
  transform: translateY(-1px);
}

.sf-offday-group.is-active {
  background: #173b5d;
  color: #fff;
  box-shadow: 0 5px 13px rgba(23, 59, 93, .18);
}

.sf-offday-calendar-shell,
.sf-offday-roster {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #d4e0e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(28, 67, 99, .06);
}

.sf-offday-calendar__head,
.sf-offday-roster__head {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 18px;
  border-bottom: 1px solid #dbe5ed;
}

.sf-offday-calendar__head h2,
.sf-offday-roster__head h2 {
  font-size: 16px;
}

.sf-offday-calendar__legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6f8295;
  font-size: 10px;
  font-weight: 750;
}

.sf-offday-calendar__legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e34e62;
  box-shadow: 0 0 0 4px #fde8eb;
}

.sf-offday-weekdays,
.sf-offday-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sf-offday-weekdays {
  border-bottom: 1px solid #dce5ed;
  background: #f5f8fb;
}

.sf-offday-weekdays span {
  padding: 9px 8px;
  color: #72869a;
  font-size: 9px;
  font-weight: 850;
  text-align: center;
  letter-spacing: .08em;
}

.sf-offday-weekdays span + span {
  border-left: 1px solid #e1e8ee;
}

.sf-offday-calendar-day {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 0;
  border-right: 1px solid #e1e8ee;
  border-bottom: 1px solid #e1e8ee;
  background: #fff;
  color: #28425b;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}

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

.sf-offday-calendar-day.is-empty {
  cursor: default;
  background:
    repeating-linear-gradient(-45deg, #f7f9fb, #f7f9fb 6px, #f3f6f8 6px, #f3f6f8 12px);
}

.sf-offday-calendar-day:not(.is-empty):hover {
  z-index: 1;
  background: #f5faff;
  box-shadow: inset 0 0 0 2px #bcdaf1;
}

.sf-offday-calendar-day.has-offday {
  background: #fff8f8;
}

.sf-offday-calendar-day.is-selected {
  z-index: 2;
  background: #edf7ff;
  box-shadow: inset 0 0 0 2px #2e83c5;
}

.sf-offday-calendar-day.is-selected.has-offday {
  background: #fff2f4;
  box-shadow: inset 0 0 0 2px #dc3f55;
}

.sf-offday-calendar-day__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sf-offday-calendar-day__top strong {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  color: #1f3d58;
  font-size: 12px;
}

.sf-offday-calendar-day.is-today .sf-offday-calendar-day__top strong {
  background: #1d78bb;
  color: #fff;
}

.sf-offday-calendar-day__top em {
  display: grid;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border-radius: 7px;
  background: #e43f55;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.sf-offday-calendar-day__names {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.sf-offday-calendar-day__names small {
  overflow: hidden;
  color: #bc3447;
  font-size: 8.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-offday-calendar-day__names small::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: #e34e62;
  content: "";
  vertical-align: 1px;
}

.sf-offday-calendar-day__free {
  color: #becbd6;
  font-size: 11px;
}

.sf-offday-day-detail {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: stretch;
  border-top: 1px solid #d7e2ea;
  background: #f8fafc;
}

.sf-offday-day-detail__date {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-right: 1px solid #dbe4ec;
}

.sf-offday-day-detail__date > i {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #e8f3fc;
  color: #2479bb;
}

.sf-offday-day-detail__date strong {
  color: #203b54;
  font-size: 11px;
}

.sf-offday-day-detail__staff {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  overflow-x: auto;
}

.sf-offday-day-detail__staff > span {
  display: inline-flex;
  min-width: 190px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #f0cbd1;
  border-radius: 9px;
  background: #fff;
}

.sf-offday-day-detail__staff > span > b,
.sf-offday-roster__staff > b {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #fee7ea;
  color: #c93449;
  font-size: 9px;
}

.sf-offday-day-detail__staff > span > span {
  display: grid;
  min-width: 0;
}

.sf-offday-day-detail__staff strong {
  overflow: hidden;
  color: #253d54;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-offday-day-detail__staff small {
  color: #8494a4;
  font-size: 8px;
}

.sf-offday-day-detail__staff > p {
  margin: 0;
  color: #8192a3;
  font-size: 10px;
  font-weight: 650;
}

.sf-offday-roster__head > span {
  color: #75889a;
  font-size: 10px;
}

.sf-offday-roster__head > span strong {
  color: #183650;
  font-size: 15px;
}

.sf-offday-roster__table-wrap {
  overflow-x: auto;
}

.sf-offday-roster__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.sf-offday-roster__table th {
  padding: 11px 15px;
  border-bottom: 1px solid #dce5ec;
  background: #f4f7fa;
  color: #6e8295;
  font-size: 8.5px;
  font-weight: 850;
  text-align: left;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sf-offday-roster__table td {
  padding: 11px 15px;
  border-bottom: 1px solid #e5ebf0;
  color: #284058;
  font-size: 10px;
}

.sf-offday-roster__table tbody tr:last-child td {
  border-bottom: 0;
}

.sf-offday-roster__table tbody tr:hover td {
  background: #f8fbfd;
}

.sf-offday-roster__table th:first-child,
.sf-offday-roster__table td:first-child,
.sf-offday-roster__table th:nth-child(4),
.sf-offday-roster__table td:nth-child(4) {
  width: 80px;
  text-align: center;
}

.sf-offday-roster__staff {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-offday-roster__staff strong {
  color: #172e45;
  font-size: 10px;
}

.sf-offday-roster__role {
  color: #526d85;
  font-size: 9px;
  font-weight: 800;
}

.sf-offday-roster__count {
  color: #cf364b;
  font-size: 15px;
}

.sf-offday-roster__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sf-offday-roster__dates button {
  min-width: 45px;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid #f0ccd1;
  border-radius: 6px;
  background: #fff6f7;
  color: #c33448;
  font-size: 8.5px;
  font-weight: 850;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.sf-offday-roster__dates button:hover {
  border-color: #df6878;
  background: #ffe9ec;
  transform: translateY(-1px);
}

.sf-offday-roster__empty {
  display: grid;
  min-height: 170px;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #8495a5;
  text-align: center;
}

.sf-offday-roster__empty i {
  margin-bottom: 4px;
  color: #b4c1cd;
  font-size: 26px;
}

.sf-offday-roster__empty strong {
  color: #455f77;
  font-size: 12px;
}

.sf-offday-roster__empty span {
  font-size: 10px;
}

html[data-theme="dark"] .sf-page--offday-calendar {
  background:
    radial-gradient(circle at 100% 0%, rgba(32, 71, 103, .3), transparent 28%),
    #0b1724;
}

html[data-theme="dark"] .sf-offday-header__title h1,
html[data-theme="dark"] .sf-offday-calendar__head h2,
html[data-theme="dark"] .sf-offday-roster__head h2,
html[data-theme="dark"] .sf-offday-header__summary strong,
html[data-theme="dark"] .sf-offday-roster__head > span strong {
  color: #edf5fc;
}

html[data-theme="dark"] .sf-offday-header__title > span,
html[data-theme="dark"] .sf-offday-day-detail__date > i {
  border-color: #2b4962;
  background: #142d42;
  color: #69b8ef;
}

html[data-theme="dark"] .sf-offday-header__summary,
html[data-theme="dark"] .sf-offday-calendar-shell,
html[data-theme="dark"] .sf-offday-roster,
html[data-theme="dark"] .sf-offday-day-detail__staff > span {
  border-color: #293e52;
  background: #0f1e2d;
}

html[data-theme="dark"] .sf-offday-toolbar {
  border-color: #293e52;
  background: rgba(15, 30, 45, .9);
}

html[data-theme="dark"] .sf-offday-groups,
html[data-theme="dark"] .sf-offday-weekdays,
html[data-theme="dark"] .sf-offday-roster__table th,
html[data-theme="dark"] .sf-offday-day-detail {
  border-color: #293e52;
  background: #122333;
}

html[data-theme="dark"] .sf-offday-group:hover {
  background: #1a3044;
  color: #dcebf7;
}

html[data-theme="dark"] .sf-offday-group.is-active {
  background: #3a86bd;
  color: #fff;
}

html[data-theme="dark"] .sf-offday-calendar__head,
html[data-theme="dark"] .sf-offday-roster__head,
html[data-theme="dark"] .sf-offday-weekdays,
html[data-theme="dark"] .sf-offday-day-detail__date,
html[data-theme="dark"] .sf-offday-roster__table th,
html[data-theme="dark"] .sf-offday-roster__table td {
  border-color: #293e52;
}

html[data-theme="dark"] .sf-offday-calendar-day {
  border-color: #293e52;
  background: #0f1e2d;
  color: #d7e6f2;
}

html[data-theme="dark"] .sf-offday-calendar-day.is-empty {
  background: repeating-linear-gradient(-45deg, #0d1a28, #0d1a28 6px, #101f2e 6px, #101f2e 12px);
}

html[data-theme="dark"] .sf-offday-calendar-day.has-offday {
  background: #25171c;
}

html[data-theme="dark"] .sf-offday-calendar-day.is-selected {
  background: #132b3d;
}

html[data-theme="dark"] .sf-offday-calendar-day.is-selected.has-offday {
  background: #301a20;
}

html[data-theme="dark"] .sf-offday-calendar-day__top strong,
html[data-theme="dark"] .sf-offday-day-detail__date strong,
html[data-theme="dark"] .sf-offday-day-detail__staff strong,
html[data-theme="dark"] .sf-offday-roster__staff strong,
html[data-theme="dark"] .sf-offday-roster__table td {
  color: #dce9f4;
}

html[data-theme="dark"] .sf-offday-roster__table tbody tr:hover td {
  background: #142637;
}

html[data-theme="dark"] .sf-offday-roster__dates button {
  border-color: #59303a;
  background: #25171c;
  color: #f08090;
}

@media (max-width: 1050px) {
  .sf-offday-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .sf-offday-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-offday-groups {
    align-self: flex-start;
  }

  .sf-offday-group-filter {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .sf-offday-calendar-day {
    min-height: 78px;
  }

  .sf-offday-calendar-day__names small:nth-child(n+2) {
    display: none;
  }
}

@media (max-width: 720px) {
  .sf-page--offday-calendar {
    padding: 16px;
  }

  .sf-offday-header__summary {
    width: 100%;
  }

  .sf-offday-header__summary > span {
    min-width: 0;
    flex: 1;
    padding: 8px;
  }

  .sf-offday-toolbar {
    margin: 0 -16px;
    padding: 12px 16px;
  }

  .sf-offday-period {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .sf-offday-period .sf-month-nav {
    min-width: 0;
  }

  .sf-offday-group {
    min-width: 70px;
    padding: 0 10px;
  }

  .sf-offday-calendar-shell {
    overflow-x: auto;
  }

  .sf-offday-calendar__head,
  .sf-offday-weekdays,
  .sf-offday-calendar-grid,
  .sf-offday-day-detail {
    min-width: 720px;
  }
}