/* Support Tool — design tokens (v4, turn 14: rounded/card style requested by user, replaces flat turn-12 tokens) */
:root {
  --st-bg: #f4f5f7;
  --st-surface: #f8f4f4;
  --st-white: #ffffff;
  --st-ink: #201e1d;
  --st-ink-700: #605d5d;
  --st-ink-600: #7d7979;
  --st-ink-500: #9b9797;
  --st-line: #e7e5e9;
  --st-line-2: #eeecef;
  --st-line-3: #f1eff2;
  --st-border: #dcdae0;
  --st-accent: #ec3013;
  --st-accent-hover: #dd2b0f;
  --st-accent-700: #ae1800;
  --st-accent-800: #7c1405;
  --st-accent-100: #fff2ef;
  --st-accent-200: #ffe0d9;
  --st-accent-300: #ffc4b8;
  --st-accent-400: #ff9783;

  --st-green-bg: #e9f7ee;
  --st-green-icon-bg: #dcfce7;
  --st-green-icon: #16a34a;
  --st-green-text: #1f9254;
  --st-green-border: #bfe6cd;

  --st-amber-bg: #fef3e0;
  --st-amber-icon-bg: #fde7cf;
  --st-amber-icon: #f0902e;
  --st-amber-text: #b3690f;
  --st-amber-border: #fbdca3;

  --st-red-bg: #fce9e9;
  --st-red-icon-bg: #fee2e2;
  --st-red-icon: #ef4444;
  --st-red-text: #c23d3d;
  --st-red-border: #f6c8c8;

  --st-purple-bg: #efe9fb;
  --st-purple-icon-bg: #ece3fb;
  --st-purple-icon: #8b5cf6;
  --st-purple-text: #7148c9;
  --st-purple-border: #d9cbf5;

  --st-radius: 14px;
  --st-radius-sm: 10px;
  --st-radius-pill: 999px;
  --st-shadow-card: 0 1px 2px rgba(31, 31, 31, 0.05), 0 4px 12px rgba(31, 31, 31, 0.06);
  --st-shadow: 0 12px 32px rgba(45, 43, 43, 0.18);
}
.st-page {
  background: var(--st-bg);
  color: var(--st-ink);
}

/* Opt-in rounding for plain Bulma input/select/textarea authored directly on this page.
   NOT a blanket ".st-page .input" rule on purpose — that leaked into shared components
   rendered inside this page (_Datepicker, Dropdown, MemberSearch), forcing their own
   border-radius to this page's value and making them look different from every other
   page that uses the same shared component. Apply this class explicitly per element. */
.st-rounded-sm {
  border-radius: var(--st-radius-sm) !important;
}

/* Sidebar */
.st-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--st-white);
  border-right: 1px solid var(--st-line);
  display: flex;
  flex-direction: column;
}
.st-sidebar-header {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--st-line);
}
.st-sidebar-kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--st-ink-500);
}
.st-sidebar-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.st-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 12px;
  padding: 11px 14px;
  font-size: 15px;
  color: #444141;
  border-radius: var(--st-radius-sm);
}
.st-nav-item:hover {
  background: var(--st-line-3);
}
.st-nav-item.is-active {
  background: var(--st-accent-100);
  color: var(--st-accent-700);
  font-weight: 600;
}
.st-nav-item.is-disabled {
  color: var(--st-ink-500);
  cursor: default;
}
.st-nav-item.is-disabled:hover {
  background: transparent;
}
/* Mục cha có menu con: bấm để mở/gập */
.st-nav-item.is-parent {
  cursor: pointer;
  user-select: none;
}
/* Menu con: thụt vào bằng mép chữ của mục cha */
.st-nav-sub {
  display: flex;
  flex-direction: column;
  margin: 0 12px 4px 48px;
}
.st-nav-subitem {
  padding: 8px 12px;
  font-size: 14px;
  color: #444141;
  border-radius: var(--st-radius-sm);
  cursor: pointer;
}
.st-nav-subitem:hover {
  background: var(--st-line-3);
}
.st-nav-subitem.is-active {
  background: var(--st-accent-100);
  color: var(--st-accent-700);
  font-weight: 600;
}

.st-sidebar-footer {
  margin-top: auto;
  padding: 16px 18px;
  border-top: 1px solid var(--st-line);
  font-size: 12px;
  color: var(--st-ink-600);
  line-height: 1.5;
}

/* Toolbar */
.st-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 16px;
  background: var(--st-bg);
  flex-wrap: wrap;
  background-color: #ffff;
}
.st-toolbar-company-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--st-ink-600);
}
.st-toolbar-company-name {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.st-divider-v {
  width: 1px;
  height: 32px;
  background: var(--st-line);
}
.st-btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  background: var(--st-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: var(--st-radius-sm);
  box-shadow: var(--st-shadow-card);
}
.st-btn-primary:hover {
  background: var(--st-accent-hover);
  color: #fff;
}
.st-btn-outline {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--st-border);
  background: var(--st-white);
  color: var(--st-ink);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--st-radius-sm);
}
.st-btn-outline:hover {
  background: var(--st-line-3);
}
.st-btn-outline-muted {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--st-border);
  background: var(--st-white);
  color: var(--st-ink);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--st-radius-sm);
}
.st-btn-outline-muted:hover {
  border-color: var(--st-ink);
  background: var(--st-line-3);
}

/* KPI cards */
.st-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  padding: 0 24px 16px;
  align-items: start;
}
.st-kpi {
  padding: 16px 18px;
  background: var(--st-white);
  border-radius: var(--st-radius);
  min-width: 0;
  box-shadow: var(--st-shadow-card);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Ô KPI: mỗi card chỉ khai 2 biến màu (--st-kpi-tint đậm hơn, --st-kpi-wash nhạt hơn),
   còn CÔNG THỨC gradient + viền nằm ở 1 chỗ duy nhất bên dưới — muốn đổi góc hay
   độ đậm thì sửa đúng 1 rule, không phải sửa 4 lần. Token dùng chung với chip trên lưới. */
.st-kpi.is-green {
  --st-kpi-tint: var(--st-green-border);
  --st-kpi-wash: var(--st-green-bg);
}
.st-kpi.is-orange {
  --st-kpi-tint: var(--st-amber-border);
  --st-kpi-wash: var(--st-amber-bg);
}
.st-kpi.is-red {
  --st-kpi-tint: var(--st-red-border);
  --st-kpi-wash: var(--st-red-bg);
}
.st-kpi.is-grey {
  --st-kpi-tint: var(--st-border);
  --st-kpi-wash: var(--st-line-3);
}

/* Gradient background for each KPI card */
.st-kpi.is-green,
.st-kpi.is-orange,
.st-kpi.is-red,
.st-kpi.is-grey {
  background: linear-gradient(135deg, var(--st-kpi-wash) 0%, var(--st-white) 65%);
  border: 1px solid var(--st-kpi-tint);
}
.st-kpi > div {
  min-width: 0;
}
.st-kpi-unit {
  white-space: nowrap;
}
.st-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--st-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-kpi-icon.is-green { background: var(--st-green-icon-bg); color: var(--st-green-icon); }
.st-kpi-icon.is-orange { background: var(--st-amber-icon-bg); color: var(--st-amber-icon); }
.st-kpi-icon.is-red { background: var(--st-red-icon-bg); color: var(--st-red-icon); }
.st-kpi-icon.is-grey { background: var(--st-line-2); color: var(--st-ink-500); }
.st-kpi-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--st-ink-600);
}
.st-kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.st-kpi-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--st-ink);
}
.st-kpi-unit {
  font-size: 12px;
  color: var(--st-ink-700);
}

/* Legend */
.st-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px 14px;
  font-size: 12px;
  color: #444141;
  flex-wrap: wrap;
}
.st-legend-title {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--st-ink-600);
}
.st-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.st-legend-swatch.is-green { background: #22c55e; }
.st-legend-swatch.is-amber { background: #f0902e; }
.st-legend-swatch.is-red { background: #ef4444; }
.st-legend-swatch.is-purple { background: #8b5cf6; }
.st-legend-swatch.is-muted { background: var(--st-ink-500); }

/* Grid */
.st-grid-wrap {
  margin: 0 24px 16px;
  background: var(--st-white);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  overflow: hidden;
}
/* Lưới dựng bằng <table class="table sticky"> theo convention app (app.css:431-472):
   .table.sticky lo phần thead dính đỉnh + cột .sticky dính trái, không tự viết lại. */
.st-grid-table {
  width: max-content;
  min-width: 100%;
  margin-bottom: 0;
}
.st-grid-table th,
.st-grid-table td {
  border: none;
  vertical-align: middle;
}
/* Bulma xoá padding ngang của ô đầu/cuối bằng selector đặc hiệu cao
   (.table:not(.is-bordered):not(.is-striped) > tbody > tr > td:first-child) → cần !important */
.st-grid-table th.st-grid-header-user,
.st-grid-table td.st-grid-row-user {
  width: 230px;
  min-width: 230px;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.st-grid-table th.st-grid-header-day,
.st-grid-table td.st-grid-cell {
  min-width: 90px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
/* Là <input type="checkbox"> thật (chọn tất cả), không phải ô vuông trang trí như trước
   → chỉ canh vị trí, không vẽ border/background kẻo đè lên control gốc của trình duyệt. */
.st-head-checkbox {
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
}
.st-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.st-grid-table thead th {
  background: var(--st-white);
  border-bottom: 1px solid var(--st-line) !important;
}
.st-grid-header-user {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  white-space: nowrap;
  color: var(--st-ink-600);
}
.st-grid-header-day {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
}
.st-grid-header-day.is-today .st-day-dow,
.st-grid-header-day.is-today .st-day-date {
  color: var(--st-accent);
}
.st-day-dow {
  font-size: 13px;
  font-weight: 700;
}
.st-grid-header-day.is-today .st-day-dow {
  border-bottom: 2px solid var(--st-accent);
  padding-bottom: 2px;
  display: inline-block;
}
.st-day-date {
  font-size: 12px;
  color: var(--st-ink-600);
}
/* background trên <tr> là bắt buộc: app.css cho ô .sticky dùng `background: inherit !important`,
   nếu tr trong suốt thì cột nhân viên sẽ nhìn xuyên thấy khi cuộn ngang. */
.st-grid-row {
  background: var(--st-white);
  height: 62px;
}
.st-grid-table tbody td {
  border-bottom: 1px solid var(--st-line) !important;
}
.st-grid-table tbody tr:last-child td {
  border-bottom: none !important;
}
.st-grid-row:hover {
  background: var(--st-line-3);
}
.st-grid-row-user {
  padding-top: 8px;
  padding-bottom: 8px;
}
.st-avatar-fallback {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--st-line-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--st-ink-700);
  flex-shrink: 0;
}
.st-user-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--st-ink);
  line-height: 1.25;
}
/* Là <td> nên KHÔNG dùng display:flex (sẽ phá layout cột của table).
   Canh giữa bằng text-align + margin:0 auto của .st-cell-empty. */
.st-grid-cell {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  position: relative;
}

/* Cell chip variants */
.st-chip {
  display: block;
  width: 100%;
  padding: 6px 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--st-radius-sm);
  cursor: pointer;
}
.st-chip-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-chip-time {
  display: block;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.st-chip-ok {
  border-color: var(--st-green-border);
  background: var(--st-green-bg);
}
.st-chip-ok:hover {
  border-color: var(--st-green-text);
}
.st-chip-ok .st-chip-name,
.st-chip-ok .st-chip-time {
  color: var(--st-green-text);
}
.st-chip-late {
  border-color: var(--st-amber-border);
  background: var(--st-amber-bg);
}
.st-chip-late:hover {
  border-color: var(--st-amber-text);
}
.st-chip-late .st-chip-name,
.st-chip-late .st-chip-time {
  color: var(--st-amber-text);
}
.st-chip-missing {
  border-color: var(--st-red-border);
  background: var(--st-red-bg);
}
.st-chip-missing:hover {
  border-color: var(--st-red-text);
}
.st-chip-missing .st-chip-name,
.st-chip-missing .st-chip-time {
  color: var(--st-red-text);
  font-weight: 600;
}
.st-chip-ot {
  border-color: var(--st-purple-border);
  background: var(--st-purple-bg);
}
.st-chip-ot:hover {
  border-color: var(--st-purple-text);
}
.st-chip-ot .st-chip-name,
.st-chip-ot .st-chip-time {
  color: var(--st-purple-text);
}
.st-cell-planned {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 1px dashed var(--st-border);
  border-radius: var(--st-radius-sm);
  background: transparent;
  padding: 6px 8px;
  cursor: pointer;
}
.st-cell-planned:hover {
  border-color: var(--st-purple-text);
  background: var(--st-purple-bg);
}
.st-cell-planned-name {
  display: block;
  font-size: 11px;
  color: var(--st-ink-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-cell-planned-tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--st-ink-500);
}
.st-cell-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  border-radius: var(--st-radius-sm);
  color: var(--st-border);
  cursor: pointer;
}
.st-cell-empty:hover {
  background: var(--st-line-3);
  color: var(--st-ink);
}

/* Popover — pure CSS hover, no JS interop needed */
.st-cell-hover-wrap {
  position: relative;
  width: 100%;
  /* Xếp dọc: chip ca đã chấm + các chip "THEO LỊCH" của cùng ngày nằm chồng nhau có khoảng cách.
     Popover là position:absolute nên không bị flex ảnh hưởng. */
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.st-cell-hover-wrap .st-popover {
  display: none;
}
.st-cell-hover-wrap:hover .st-popover {
  display: block;
}
.st-popover {
  width: 330px;
  background: var(--st-white);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  overflow: hidden;
}
/* Dòng gần cuối lưới: mở popover lên trên để không bị khung cuộn .st-grid-wrap cắt */
.st-cell-hover-wrap.is-flip-up .st-popover {
  top: auto;
  bottom: 100%;
}
.st-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--st-line);
}
.st-popover-header-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-popover-header-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.st-popover-header-check.is-green { background: #22c55e; }
.st-popover-header-check.is-amber { background: #f0902e; }
.st-popover-header-check.is-red { background: #ef4444; }
.st-popover-header-check.is-purple { background: #8b5cf6; }
.st-popover-header-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.st-popover-header-label.is-green { color: var(--st-green-text); }
.st-popover-header-label.is-amber { color: var(--st-amber-text); }
.st-popover-header-label.is-red { color: var(--st-red-text); }
.st-popover-header-label.is-purple { color: var(--st-purple-text); }
.st-popover-header-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--st-ink-600);
  white-space: nowrap;
}
.st-popover-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.st-popover-row .st-field-icon {
  width: 30px;
  height: 30px;
}
.st-popover-row .st-popover-key {
  color: var(--st-ink-700);
  flex: 1;
}
.st-popover-row .st-popover-val {
  font-weight: 700;
}
.st-popover-row .st-popover-val.is-danger {
  color: var(--st-red-text);
}
.st-popover-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--st-line);
}
.st-popover-footer .st-btn-edit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  background: #4f5bd5;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: var(--st-radius-sm);
}
.st-popover-footer .st-btn-edit:hover {
  background: #4148b8;
  color: #fff;
}
.st-popover-delete {
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--st-radius-sm);
  background: var(--st-red-bg);
  color: var(--st-red-text);
}
.st-popover-delete:hover {
  background: #fecaca;
}

/* Bulk bar */
.st-bulkbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  margin: 0 24px 16px;
  background: var(--st-white);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-card);
}
.st-bulkbar-count {
  font-size: 14px;
  font-weight: 700;
}
.st-bulkbar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--st-ink-500);
}
.st-bulkbar-close:hover {
  background: var(--st-line-3);
  color: var(--st-ink);
}

/* Drawer / panel shared */
.st-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--st-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.st-drawer-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* .st-drawer-body giờ là ClassBody của Slider (khối cuộn bên trong slider-body) */
.st-drawer-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.st-drawer-body-wrap {
  flex: 1;
  min-height: 0;
}
.st-field-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--st-ink-600);
  margin-bottom: 6px;
}
.st-drawer-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--st-line);
  background: var(--st-surface);
}
.st-status-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--st-red-bg);
  color: var(--st-red-text);
  padding: 4px 10px;
  border-radius: var(--st-radius-pill);
}

/* Drawer hero card (identity + checkin photo) */
.st-drawer-hero {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: var(--st-radius);
  background: linear-gradient(135deg, #eef4ff, #fdeef2);
}
.st-drawer-hero-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-width: 0;
}
.st-drawer-hero-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-drawer-hero-company {
  display: inline-flex;
  width: fit-content;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--st-radius-pill);
}
.st-drawer-hero-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--st-ink-700);
}

/* Field shell with leading colored icon (select/time) */
.st-field-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: var(--st-white);
  padding: 8px 12px;
}
.st-field-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-field-icon.is-green { background: var(--st-green-icon-bg); color: var(--st-green-icon); }
.st-field-icon.is-red { background: var(--st-red-icon-bg); color: var(--st-red-icon); }
.st-field-icon.is-blue { background: #dbeafe; color: #2563eb; }
.st-field-icon.is-purple { background: #ede9fe; color: #8b5cf6; }
/* Giá trị đang chọn của Dropdown — thay cho <select> cũ, giữ đúng cỡ chữ/độ đậm trước đó */
.st-field-value {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--st-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-field-chevron {
  color: var(--st-ink-500);
  flex-shrink: 0;
}

/* Colored checkbox pills */
.st-check-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.st-check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--st-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-check-box.is-checked-green { background: #22c55e; border-color: #22c55e; }
.st-check-box.is-checked-blue { background: #3b82f6; border-color: #3b82f6; }
/* Biến thể tròn: dùng cho nhóm chọn 1-trong-N (radio), phân biệt với checkbox vuông */
.st-check-box.is-round { border-radius: 50%; }

/* Reason textarea counter */
.st-reason-wrap {
  position: relative;
}
.st-reason-counter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 11px;
  color: var(--st-ink-500);
}

/* Advanced accordion row */
.st-advanced-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  cursor: pointer;
}
.st-advanced-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3e8ff;
  color: #9333ea;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Gradient primary button + footer shield note */
.st-footer-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--st-ink-700);
  flex: 1;
}

/* Segmented control */

/* Time inputs */
.st-time-hint {
  font-size: 11px;
  color: var(--st-red-text);
  margin-top: 4px;
}
.st-time-quickfill {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.st-time-quickfill a {
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-pill);
  padding: 4px 10px;
  color: var(--st-ink);
}
.st-time-quickfill a:hover {
  border-color: var(--st-ink);
  background: var(--st-line-3);
}

/* Trigger của Dropdown "địa điểm áp dụng chung" — trông như .st-select-box cũ nhưng là div */
.st-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-select-trigger-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.st-reason-required {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  min-height: 96px;
  background: var(--st-white);
  padding: 10px 12px;
}
.st-reason-required.is-invalid {
  border-color: var(--st-accent);
}

/* Ô tìm tên ca trong Dropdown "CA LÀM" — đứng yên, KHÔNG cuộn cùng danh sách
   (không dùng position:sticky nữa; phần cuộn là .st-dropdown-list bên dưới) */
.st-dropdown-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--st-line);
  background: var(--st-white);
  color: var(--st-ink-500);
}
.st-dropdown-list {
  max-height: 240px;
  overflow-y: auto;
}
.st-dropdown-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--st-ink);
}

.st-advanced-toggle {
  font-size: 12px;
  font-weight: 600;
  color: var(--st-ink-700);
}
.st-advanced-toggle:hover {
  color: var(--st-accent);
}

/* Quick create preview */
.st-qc-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--st-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.st-qc-count-chip {
  font-size: 12px;
  font-weight: 700;
  background: var(--st-line-3);
  color: #444141;
  padding: 4px 10px;
  border-radius: var(--st-radius-pill);
}
.st-qc-desc {
  padding: 14px 20px;
  border-bottom: 1px solid var(--st-line);
  font-size: 13px;
  color: #444141;
  line-height: 1.5;
}
.st-qc-shared-block {
  padding: 16px 20px;
  border-bottom: 1px solid var(--st-line);
  background: var(--st-surface);
}
.st-qc-shared-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--st-ink-600);
  margin-bottom: 10px;
}
.st-qc-shared-grid {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  gap: 12px;
  align-items: end;
}
.st-qc-shared-hint {
  font-size: 12px;
  color: var(--st-ink-600);
  margin-top: 10px;
}
/* Dòng cảnh báo user không thuộc địa điểm chung (trong khối "áp dụng chung") */
.st-qc-location-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--st-radius-sm);
  font-size: 12px;
  line-height: 1.45;
  background: var(--st-green-bg);
  border: 1px solid var(--st-green-border);
  color: var(--st-green-text);
}
.st-qc-location-warn.is-unresolved {
  background: var(--st-red-bg);
  border-color: var(--st-red-border);
  color: var(--st-red-text);
}
.st-qc-location-warn .button {
  flex-shrink: 0;
}

.st-qc-table-header {
  display: grid;
  grid-template-columns: 24px minmax(120px, 1fr) 105px 150px 210px;
  align-items: center;
  padding: 8px 20px;
  background: var(--st-bg);
  border-bottom: 1px solid var(--st-line);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--st-ink-600);
}
.st-qc-row {
  display: grid;
  grid-template-columns: 24px minmax(120px, 1fr) 105px 150px 210px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--st-line-3);
  font-size: 13px;
}
.st-qc-row.is-excluded {
  opacity: 0.45;
}
.st-qc-shift-tag {
  display: inline-block;
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  color: var(--st-ink);
  white-space: nowrap;
}

.st-qc-time-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.st-qc-timepicker {
  width: 88px;
  height: auto;
  min-height: 0;
  padding: 2px 6px;
  gap: 2px;
  margin-bottom: 0 !important;
}
.st-qc-timepicker .control {
  font-size: 12px;
  color: var(--st-ink);
}
.st-qc-timepicker input {
  width: 100%;
  min-width: 20px;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font-size: 12px;
  text-align: center;
  color: var(--st-ink);
  font-variant-numeric: tabular-nums;
}

/* Trạng thái lỗi: viền + nền đỏ cho khung giờ */
.st-field-shell.is-invalid {
  border-color: var(--st-red-text) !important;
  background: var(--st-red-bg) !important;
}
.st-qc-timepicker.is-invalid {
  border-color: var(--st-red-text) !important;
  background: var(--st-red-bg) !important;
}
.st-qc-time-warn {
  font-size: 16px !important;
  color: var(--st-red-text);
  cursor: help;
  flex-shrink: 0;
}

.st-field-timepicker {
  flex: 1;
  min-width: 0;
  margin-bottom: 0 !important;
}
.st-field-timepicker .control {
  font-size: 15px;
  font-weight: 600;
}
.st-field-timepicker input {
  width: 34px;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--st-ink);
  font-variant-numeric: tabular-nums;
}
.st-qc-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--st-line);
  background: var(--st-surface);
}

/* Backdrop / panel shells (shared across drawer + preview + delete confirm) */
.st-slider-lock {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.28);
  z-index: 996;
}

.st-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  z-index: 40;
}
.st-panel-small {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 90vw);
  z-index: 41;
  background: var(--st-white);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow);
  padding: 16px;
}

/* Chip chọn ngày trong luồng "Tạo chấm công hàng loạt" */
.st-day-chip {
  padding: 4px 10px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-pill);
  font-size: 12px;
  color: var(--st-ink-700);
  background: var(--st-white);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.st-day-chip:hover {
  border-color: var(--st-ink-500);
}
.st-day-chip.is-picked {
  background: var(--st-accent);
  border-color: var(--st-accent);
  color: var(--st-white);
  font-weight: 600;
}

/* ===== Lịch trực nhật ===== */
.st-duty-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 24px 24px;
}
.st-duty-card {
  background: var(--st-white);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-card);
  margin-bottom: 20px;
  overflow: hidden;
}
.st-duty-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--st-line);
}
.st-duty-table-wrap {
  overflow-x: auto;
  padding: 16px 18px;
}
/* `table-layout: fixed` để mọi tuần chia đều bề rộng, không co giãn theo tên dài nhất */
.st-duty-table {
  width: 100%;
  table-layout: fixed;
  margin-bottom: 0;
}
.st-duty-th {
  text-align: center !important;
  background: var(--st-green-bg) !important;
  border: 1px solid var(--st-border) !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--st-ink);
  padding: 8px 10px !important;
}
.st-duty-td {
  text-align: center;
  border: 1px solid var(--st-border) !important;
  padding: 8px 10px !important;
  height: 38px;
}
/* Tên dài hơn bề rộng cột thì cắt bằng "…" (title trên thẻ giữ tên đầy đủ khi hover) */
.st-duty-person {
  display: block;
  font-size: 14px;
  color: #444141;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nội quy ở chế độ chỉ xem: giữ đúng ngắt dòng người dùng đã gõ trong textarea */
.st-duty-rule-text {
  white-space: pre-wrap;
}

/* Bảng kết quả giao việc: giới hạn chiều cao rồi cuộn, header bảng dính lại khi cuộn */
.st-report-scroll {
  max-height: 46vh;
  overflow: auto;
}
.st-report-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--st-white);
  box-shadow: inset 0 -1px 0 var(--bulma-table-cell-border-color);
}
/* Phần tử bị khoá do lịch đã chốt: mờ đi và không bắt chuột */
.st-is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.st-duty-rule {
  padding: 16px 18px;
  border-top: 1px solid var(--st-line);
  background: var(--st-surface);
  font-size: 13px;
  line-height: 1.6;
  color: #444141;
}

/* Chip người trực trong editor (có nút xoá khi ở chế độ thủ công) */

/* Nút xoá dòng ở cột cuối bảng phân lịch trong editor (canh giữa ô, Bulma lo màu đỏ) */
.st-duty-row-remove {
  display: inline-flex;
  line-height: 1;
}

/* Section nội quy dưới bảng lịch trực + nút sửa (mở popup) */
.st-duty-rule-head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}


/* ===== Modal dùng chung cho Support Tool =====
   Bug đã gặp: nội dung popup bị mờ đen, nhìn xuyên thấy trang phía sau.
   Nguyên nhân: `.modal-background` (alpha .86 của Bulma) phủ LÊN TRÊN `.modal-card`.
   Nên phải ép thứ tự tầng rõ ràng ở đây, và dùng mã màu trực tiếp (không qua biến)
   để không phụ thuộc việc token `.st-page` có tới được modal hay không. */
.st-modal {
  z-index: 998;
}
.st-modal .modal-background {
  z-index: 0;
  background-color: rgba(10, 10, 10, 0.55);
}
.st-modal .modal-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
}
.st-modal .modal-card-head {
  background: #ffffff !important;
  border-bottom: 1px solid #e7e5e9;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
}
.st-modal .modal-card-body {
  background: #ffffff !important;
  color: #201e1d;
  padding: 18px 20px;
}
.st-modal .modal-card-foot {
  background: #f8f4f4 !important;
  border-top: 1px solid #e7e5e9;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
}

/* ===== Popup tạo/sửa lịch trực ===== */
.st-duty-modal .modal-card {
  width: 96vw;
  max-width: 1080px;
}

/* Field dạng nhãn-trái / nội dung-phải cho gọn, không chiếm nhiều chiều cao */
.st-duty-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--st-line);
}
.st-duty-form-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

/* Chọn chế độ phân lịch: nền/chữ của mục đang chọn dùng helper Bulma
   (`has-background-success-light` + `has-text-success-dark`), ở đây chỉ còn bo góc
   vì Bulma không có helper border-radius cho phần tử thường. */
.st-duty-mode {
  border-radius: var(--st-radius-sm);
}

/* Khối bảng lịch trực: tiêu đề in hoa ở giữa (có 2 icon sparkle), bảng bo góc, header xanh nhạt */
.st-duty-sheet {
  margin-top: 16px;
}
/* Khung bo góc bọc ngoài bảng: viền của bảng do Bulma `is-bordered` vẽ, khung này chỉ
   bo góc + cắt phần thừa (`border-collapse: collapse` của Bulma không bo góc được). */
.st-duty-sheet-frame {
  border-radius: var(--st-radius-sm);
  overflow: auto;
  max-height: 46vh;
  width: 100%;
}
/* `table-layout: fixed` để mọi kỳ trực chia đều bề rộng, tên dài không kéo cột phình ra */
.st-duty-sheet-table {
  width: 100%;
  table-layout: fixed;
  margin-bottom: 0;
}
.st-duty-sheet-table th,
.st-duty-sheet-table td {
  text-align: center;
  vertical-align: middle;
  height: 48px;
}
/* Header dính khi cuộn danh sách dòng. `border-collapse: collapse` của Bulma làm viền của
   cell sticky bị cuộn mất, nên phải vẽ lại 2 đường kẻ trên/dưới bằng inset box-shadow. */
.st-duty-sheet-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow:
    inset 0 1px 0 var(--bulma-table-cell-border-color),
    inset 0 -1px 0 var(--bulma-table-cell-border-color);
}
/* Cột cuối chỉ chứa nút xoá dòng: hẹp, không viền (huỷ `is-bordered` của Bulma).
   Ô header phải có nền TRẮNG ĐỤC — nếu để trong suốt thì dòng bên dưới cuộn xuyên qua nó. */
.st-duty-sheet-table th.is-rowdel,
.st-duty-sheet-table td.is-rowdel {
  min-width: 46px;
  width: 46px;
  padding: 0;
  border: none;
  box-shadow: none;
}
.st-duty-sheet-table th.is-rowdel {
  background: var(--st-white);
}
.st-duty-sheet-table td.is-rowdel {
  background: transparent;
}
.st-duty-name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}
/* Chỉ phần TÊN co lại và cắt "…", nút xoá bên cạnh luôn giữ nguyên kích thước */
.st-duty-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}