.attendance-home-card {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid #cfdad2;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(24, 52, 35, .07);
}

.attendance-home-heading,
.attendance-center-heading,
.attendance-scanner-head,
.attendance-action-row,
.attendance-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.attendance-home-heading span,
.attendance-center-heading span,
.attendance-record-row span,
.attendance-action-row p,
.attendance-action-row small,
.attendance-record-row small {
  color: var(--muted);
}

.attendance-home-heading h2,
.attendance-center-heading h2,
.attendance-form-heading h3,
.attendance-subsection h3 {
  margin: 4px 0 0;
  letter-spacing: 0;
}

.attendance-device-badge,
.attendance-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #cbd7cf;
  border-radius: 999px;
  background: #f3f7f4;
  color: #275a3e;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.attendance-device-pending,
.attendance-device-different_device,
.attendance-state-overdue,
.attendance-state-missing_pending,
.attendance-state-pending {
  border-color: #ead495;
  background: #fff8e4;
  color: #7b5811;
}

.attendance-device-missing_token,
.attendance-device-unbound,
.attendance-state-absent,
.attendance-state-window_outside {
  border-color: #efb4af;
  background: #fff0ee;
  color: #a3261c;
}

.attendance-state-normal {
  border-color: #b7d8c0;
  background: #edf8f0;
  color: #1e6539;
}

.attendance-state-late {
  border-color: #ead495;
  background: #fff8e4;
  color: #7b5811;
}

.attendance-alert,
.attendance-activation-code {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #e4c875;
  border-radius: 6px;
  background: #fff8e5;
  color: #6f4e0d;
}

.attendance-shift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.attendance-shift-card {
  min-height: 94px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fafbf9;
}

.attendance-shift-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.attendance-shift-card strong {
  font-size: 22px;
}

.attendance-shift-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.attendance-shift-card.attendance-state-normal { border-color: #b7d8c0; }
.attendance-shift-card.attendance-state-late,
.attendance-shift-card.attendance-state-overdue,
.attendance-shift-card.attendance-state-missing_pending { border-color: #ead495; }
.attendance-shift-card.attendance-state-absent,
.attendance-shift-card.attendance-state-window_outside { border-color: #efb4af; }

.attendance-home-actions,
.attendance-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.attendance-scan-button {
  min-height: 52px;
  padding-inline: 28px;
  font-size: 17px;
}

.attendance-device-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.attendance-home-loading,
.attendance-center-loading,
.attendance-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  color: var(--muted);
}

.attendance-center {
  margin-top: 16px;
  overflow: hidden;
}

.attendance-center-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.attendance-center-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.attendance-center-tabs {
  display: flex;
  gap: 5px;
  margin: 16px 0;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7f8f6;
}

.attendance-center-tabs button {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 38px;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.attendance-center-tabs button.active {
  background: var(--green);
  color: #fff;
}

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

.attendance-action-row,
.attendance-record-row {
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.attendance-action-row p,
.attendance-action-row small,
.attendance-record-row span,
.attendance-record-row small {
  display: block;
  margin: 5px 0 0;
  line-height: 1.4;
}

.attendance-record-times {
  display: grid;
  gap: 5px;
  min-width: 190px;
}

.attendance-record-row > div:last-child,
.attendance-review-block {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.attendance-review-block label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.attendance-review-block input {
  min-height: 38px;
  padding: 6px 8px;
}

.attendance-anomaly-row {
  border-color: #efb4af;
  background: #fffafa;
}

.attendance-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f9faf8;
}

.attendance-form-heading,
.attendance-form-wide {
  grid-column: 1 / -1;
}

.attendance-form-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.attendance-form-grid label {
  display: grid;
  align-content: start;
  gap: 6px;
  color: #334139;
  font-size: 13px;
  font-weight: 700;
}

.attendance-form-grid input,
.attendance-form-grid select,
.attendance-form-grid textarea {
  width: 100%;
  min-height: 43px;
  padding: 9px 10px;
  border: 1px solid #cbd4cd;
  border-radius: 6px;
  background: #fff;
  color: #18211c;
  font: inherit;
}

.attendance-form-grid textarea { resize: vertical; }

.attendance-form-grid > button {
  align-self: end;
  min-height: 43px;
}

.attendance-form-grid .attendance-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
}

.attendance-form-grid .attendance-check input {
  width: 20px;
  min-height: 20px;
}

.attendance-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.attendance-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

.attendance-settings-grid .attendance-form-heading { grid-column: 1; }

.attendance-subsection + .attendance-subsection {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.attendance-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.attendance-icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #18211c;
  font-size: 24px;
}

.attendance-icon-button.danger {
  border-color: #efb4af;
  color: var(--red);
}

.attendance-scanner-dialog {
  width: min(560px, 100vw);
  height: min(820px, 100dvh);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #0f1511;
  color: #fff;
}

.attendance-scanner-dialog::backdrop { background: rgba(0, 0, 0, .78); }

.attendance-scanner-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.attendance-scanner-head {
  padding: 14px 16px;
  background: #18251d;
}

.attendance-scanner-head strong,
.attendance-scanner-head span {
  display: block;
}

.attendance-scanner-head span {
  margin-top: 3px;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
}

.attendance-camera-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.attendance-camera-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attendance-scan-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vw, 330px);
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, .88);
  border-radius: 8px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .34);
  transform: translate(-50%, -50%);
}

.attendance-scanner-status {
  min-height: 70px;
  margin: 0;
  padding: 16px;
  background: #18251d;
  text-align: center;
  line-height: 1.5;
}

.attendance-scanner-status[data-tone="success"] { color: #9fe5b5; }
.attendance-scanner-status[data-tone="error"] { color: #ffb9b3; }

.attendance-scanner-head .attendance-icon-button {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

@media (max-width: 760px) {
  .attendance-home-card { padding: 16px; }
  .attendance-home-heading,
  .attendance-center-heading { align-items: flex-start; }
  .attendance-center-heading { flex-direction: column; }
  .attendance-form-grid,
  .attendance-settings-grid { grid-template-columns: 1fr; }
  .attendance-form-heading,
  .attendance-form-wide { grid-column: 1; }
  .attendance-action-row,
  .attendance-record-row {
    align-items: stretch;
    flex-direction: column;
  }
  .attendance-record-row > div:last-child,
  .attendance-review-block { justify-items: start; }
  .attendance-record-times { min-width: 0; }
  .attendance-row-actions { width: 100%; }
  .attendance-row-actions button,
  .attendance-row-actions .attendance-link-button { flex: 1 1 130px; }
}

@media (max-width: 460px) {
  .attendance-shift-grid { grid-template-columns: 1fr; }
  .attendance-home-actions { display: grid; grid-template-columns: 1fr; }
  .attendance-home-actions button { width: 100%; }
  .attendance-device-badge { white-space: normal; text-align: center; }
  .attendance-scanner-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* Hourly staff: punch pairs and the hours table */
.hourly-next { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #eef4f0; color: #214f39; font-weight: 800; }
.hourly-next-punch_out { background: #fff7e0; color: #7a5a12; }
.hourly-next-outside, .hourly-next-not_configured { background: #f3f3f3; color: #666; }
.hourly-shift-card p { font-variant-numeric: tabular-nums; }
.hourly-month-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 18px 0 8px; }
.hourly-month-head label { display: grid; gap: 4px; font-size: 13px; color: var(--muted, #667); }
.hourly-month-head input { width: auto; }
.hourly-month-head strong { font-size: 18px; color: #205c3e; }
.hourly-table-wrap { overflow-x: auto; }
.hourly-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.hourly-table th, .hourly-table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid #e3e7e4; vertical-align: middle; }
.hourly-table th { font-size: 12px; color: var(--muted, #667); font-weight: 700; }
.hourly-table td small { color: var(--muted, #667); font-size: 12px; }
.hourly-hours { text-align: right !important; white-space: nowrap; font-weight: 800; }
.hourly-week-total td { background: #f4f7f5; font-weight: 800; }
.hourly-month-total td { background: #214f39; color: #fff; font-weight: 900; font-size: 15px; }
.hourly-flag { color: #a23e34; font-weight: 800; }
.hourly-state-missing_end td:first-child { border-left: 3px solid #e3b7b1; }
.hourly-note { max-width: 260px; }
.hourly-note > * + * { margin-left: 6px; }
.hourly-pay-card { display: grid; gap: 10px; margin: 10px 0 14px; padding: 12px; border-radius: 10px; background: #f5f8f6; }
.hourly-benefit-state { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hourly-benefit-state span { color: var(--muted, #667); font-size: 13px; }
.hourly-benefit-disqualified strong, .hourly-benefit-unconfigured strong { color: #a23e34; }
.hourly-benefit-eligible strong, .hourly-benefit-provisional strong { color: #205c3e; }
.hourly-benefit-not_started strong { color: #7a5a12; }
.hourly-benefit-rules { display: grid; gap: 6px; padding: 10px; border-left: 3px solid #87a894; background: #fff; border-radius: 6px; }
.hourly-benefit-rules p { margin: 0; color: #36453d; font-size: 13px; line-height: 1.45; }
.hourly-benefit-rules strong { display: inline-block; min-width: 64px; margin-right: 8px; color: #205c3e; }
.hourly-pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hourly-pay-grid > div { display: grid; gap: 3px; padding: 9px; background: #fff; border-radius: 8px; }
.hourly-pay-grid span { color: var(--muted, #667); font-size: 12px; }
.hourly-pay-grid strong { font-size: 17px; color: #205c3e; }
.hourly-pay-editor summary { cursor: pointer; font-weight: 800; color: #2b6948; }
.hourly-pay-form { margin-top: 10px; }
.hourly-pay-form .attendance-device-note { grid-column: 1 / -1; }
.hourly-effective-date { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--muted, #667); font-size: 13px; }
.hourly-effective-date input { width: auto; }
.hourly-fix-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hourly-fix-form input { width: auto; min-width: 0; flex: 1 1 90px; padding: 6px 8px; }
.hourly-fix-form .mini-button { flex: 0 0 auto; }
.hourly-employee-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; min-width: 0; }
.attendance-center-body { min-width: 0; }
.hourly-employee-card { padding: 14px; border: 1px solid #e0e6e2; border-radius: 12px; background: #fff; min-width: 0; }
.hourly-employee-list > * { min-width: 0; }
.hourly-table-wrap { width: 100%; max-width: 100%; }
.hourly-employee-card summary, .hourly-settings summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; position: relative; padding-right: 26px; }
.hourly-employee-card summary::-webkit-details-marker, .hourly-settings summary::-webkit-details-marker { display: none; }
.hourly-employee-card summary::after, .hourly-settings summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted, #667); border-bottom: 2px solid var(--muted, #667); transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; }
.hourly-employee-card[open] summary::after, .hourly-settings[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.hourly-employee-card[open] summary { margin-bottom: 10px; }
.hourly-employee-card summary > div { display: grid; gap: 4px; min-width: 0; }
.hourly-employee-card summary span { color: var(--muted, #667); font-size: 13px; }
.hourly-employee-card summary .hourly-hours { font-size: 20px; color: #205c3e; }
.hourly-settings { margin-top: 14px; padding: 14px; border: 1px dashed #cfd8d2; border-radius: 12px; background: #fbfcfb; }
.hourly-settings summary span { color: var(--muted, #667); font-size: 13px; font-weight: 600; }
.hourly-settings[open] summary { margin-bottom: 12px; }
.hourly-manual { margin-top: 10px; }
.hourly-manual summary { cursor: pointer; font-weight: 700; color: #2b6948; }
.hourly-manual-form { margin-top: 10px; }
.hourly-table td:nth-child(2), .hourly-table td:nth-child(3), .hourly-table td:nth-child(4) { white-space: nowrap; }
@media (max-width: 560px) {
  .hourly-table { font-size: 13px; }
  .hourly-fix-form { flex-direction: column; align-items: stretch; min-width: 150px; }
  .hourly-table th:last-child, .hourly-table td.hourly-note:empty { display: none; }
  .hourly-month-head { flex-direction: column; align-items: stretch; }
  .hourly-pay-grid { grid-template-columns: 1fr; }
}

/* Hourly staff: schedule board */
.hourly-module { display: grid; gap: 14px; }
.hourly-hours-heading { margin-top: 10px; }
.hourly-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hourly-week-nav strong { flex: 1 1 auto; text-align: center; font-size: 15px; }
.hourly-week-nav .mini-button { width: auto; }
.hourly-board-wrap { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
/* Gaps come from cell padding, not border-spacing: spacing is charged to the table
   width and the last day column ends up narrower than the rest. Only the label
   columns declare a width, so the seven day columns split the remainder evenly. */
.hourly-board, .hourly-roster { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; }
.hourly-board { min-width: 560px; }
.hourly-board-compact { min-width: 420px; }
.hourly-board col.col-name, .hourly-roster col.col-name { width: 134px; }
.hourly-board col.col-shift, .hourly-roster col.col-shift { width: 46px; }
.hourly-board-compact col.col-shift { width: 40px; }
.hourly-board th { font-size: 12px; color: var(--muted, #667); font-weight: 700; text-align: center; vertical-align: bottom; padding: 2px 3px; }
.hourly-board thead th { padding-bottom: 6px; }
.hourly-board thead th span { display: block; font-weight: 600; }
.hourly-board thead th strong { display: block; font-size: 13px; color: #27352d; }
.hourly-board thead th.is-today strong { color: #2b6948; }
.hourly-board tbody .hourly-name-cell { text-align: left; white-space: nowrap; padding: 6px 10px 6px 3px; position: sticky; left: 0; background: #fff; z-index: 1; vertical-align: middle; border-right: 1px solid #eef1ef; }
.hourly-board tbody .hourly-name-cell strong { display: block; font-size: 13px; color: #27352d; }
.hourly-board tbody .hourly-name-cell small { color: var(--muted, #667); font-size: 11px; }
.hourly-board tbody .hourly-shift-label, .hourly-roster tbody .hourly-shift-label { text-align: right; padding: 0 8px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted, #667); background: transparent; min-width: 30px; box-sizing: border-box; }
.hourly-board .hourly-row-first td, .hourly-board .hourly-row-first .hourly-shift-label { padding-top: 7px; }
.hourly-board tbody tr.hourly-row-first:not(:first-child) > * { border-top: 2px solid #dde4df; }
.hourly-board tbody tr.hourly-employee-alt > * { background: #f6f8f7; }
.hourly-board tbody tr.hourly-employee-alt td.is-today { background: #eaf3ee; }
.hourly-board td { padding: 3px; vertical-align: middle; }
.hourly-board td.is-today { background: #f0f7f2; border-radius: 8px; }
.hourly-chip { display: block; width: 100%; margin: 0; padding: 7px 4px; border-radius: 8px; border: 1px solid #d9dfda; background: #f1f2f1; color: #8a918c; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; min-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hourly-chip.is-work { background: #2b6948; border-color: #2b6948; color: #fff; }
.hourly-chip.is-override { box-shadow: inset 0 0 0 2px #cfe6d6; }
.hourly-chip.has-request { background: #fff2c6; border-color: #e8c765; color: #6b4e00; }
/* Session states come last: a real punch outranks a pending request, matching slotDetail's label. */
.hourly-chip.has-session-complete { background: #dff0e5; border-color: #2b6948; color: #1c4a32; }
.hourly-chip.is-override.has-session-complete { box-shadow: inset 0 0 0 2px #a9d3ba; }
.hourly-chip.has-session-open { background: #1668a8; border-color: #12588f; color: #fff; }
.hourly-chip.has-session-missing_end { background: #b3261e; border-color: #96201a; color: #fff; }
.hourly-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.hourly-legend .hourly-chip { display: inline-block; width: auto; min-height: 0; padding: 4px 10px; cursor: default; }
.hourly-chip:disabled { cursor: default; opacity: .85; }
.hourly-chip:not(:disabled):active { transform: scale(.97); }
.hourly-week-title { margin: 10px 0 4px; font-weight: 800; font-size: 13px; color: var(--muted, #667); }
.hourly-my-schedule { margin-top: 18px; }
.hourly-my-schedule h3 { margin: 0 0 4px; font-size: 16px; }
.hourly-my-schedule .hourly-board tbody th.hourly-name-cell { display: none; }
.hourly-request-row .attendance-row-actions { align-items: center; }
.hourly-request-row > div:first-child { display: grid; gap: 3px; }
.hourly-request-row > div:first-child span { color: var(--muted, #667); font-size: 13px; }
.hourly-request-row [data-review-note] { flex: 1 1 140px; min-width: 0; padding: 6px 8px; }
.hourly-request-row.is-done { opacity: .75; }
.hourly-status { font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: #eef2ef; color: #4b5a51; }
.hourly-status-pending { background: #fff2c6; color: #6b4e00; }
.hourly-status-approved { background: #e3f3e8; color: #205c36; }
.hourly-status-rejected, .hourly-status-cancelled { background: #f6e6e4; color: #8a3028; }
.hourly-pattern-list { display: grid; gap: 8px; margin-top: 12px; }
.hourly-pattern { padding: 10px 12px; border: 1px solid #e0e6e2; border-radius: 10px; background: #fbfcfb; }
.hourly-pattern summary { cursor: pointer; font-weight: 700; }
.hourly-pattern-form { display: grid; gap: 8px; margin-top: 8px; }
.hourly-pattern-form .mini-button { width: auto; justify-self: start; }
.hourly-pattern-cell { display: flex; align-items: center; gap: 4px; padding: 6px 4px; margin: 2px 0; border-radius: 8px; background: #f1f2f1; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hourly-pattern-cell input { width: 18px; height: 18px; margin: 0; accent-color: #2b6948; }
.hourly-pattern-cell:has(input:checked) { background: #e3f3e8; color: #205c36; }
@media (max-width: 560px) {
  .hourly-board col.col-name, .hourly-roster col.col-name { width: 104px; }
  .hourly-board col.col-shift, .hourly-roster col.col-shift { width: 38px; }
  .hourly-board-compact col.col-shift { width: 34px; }
  .hourly-board { min-width: 500px; }
  .hourly-board-compact { min-width: 390px; }
  .hourly-roster { min-width: 470px; }
  .hourly-chip { font-size: 11px; padding: 6px 2px; }
  .hourly-week-nav strong { order: -1; flex-basis: 100%; }
}

/* Hourly staff: roster */
.hourly-windows-list { display: grid; gap: 12px; }
.hourly-roster { min-width: 560px; }
.hourly-roster thead th { font-size: 12px; color: var(--muted, #667); font-weight: 700; text-align: center; padding: 2px 3px 6px; }
.hourly-roster thead th span { display: block; font-weight: 600; }
.hourly-roster thead th strong { display: block; font-size: 13px; color: #27352d; }
.hourly-roster thead th.is-today strong { color: #2b6948; }
.hourly-roster tbody th { text-align: right; font-size: 12px; color: var(--muted, #667); font-weight: 700; vertical-align: top; padding: 9px 8px 0 3px; }
.hourly-roster td { vertical-align: top; padding: 3px; }
.hourly-roster td > * { background: #f4f7f5; border-radius: 8px; padding: 6px 5px; min-height: 42px; display: block; }
.hourly-roster td.is-today > * { background: #e3f3e8; }
.hourly-roster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hourly-roster li { font-size: 12px; font-weight: 700; color: #205c3e; background: #fff; border-radius: 6px; padding: 4px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hourly-roster-empty { color: #aab2ad; font-weight: 700; display: block; text-align: center; }
@media (max-width: 560px) {
  .hourly-roster li { font-size: 11px; padding: 3px 4px; }
}

/* Hourly staff: batch add dialog */
.hourly-toolbar { display: flex; justify-content: flex-end; margin: 4px 0 10px; }
.hourly-toolbar .mini-button { width: auto; }
.hourly-bulk-dialog { border: 0; border-radius: 14px; padding: 0; width: min(92vw, 560px); max-height: 92vh; box-shadow: 0 12px 40px rgba(0,0,0,.18); background: #fff; }
.hourly-bulk-dialog::backdrop { background: rgba(20,32,26,.4); }
.hourly-bulk-form { display: grid; gap: 12px; padding: 18px; max-height: 92vh; overflow-y: auto; }
.hourly-bulk-form header { display: grid; gap: 4px; }
.hourly-bulk-form header h3 { margin: 0; font-size: 18px; }
.hourly-bulk-form header p { margin: 0; color: var(--muted, #667); font-size: 13px; }
.hourly-bulk-form textarea { width: 100%; padding: 10px; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line, #d9dfda); border-radius: 8px; resize: vertical; box-sizing: border-box; }
.hourly-bulk-position { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.hourly-bulk-position select { padding: 8px; border-radius: 8px; border: 1px solid var(--line, #d9dfda); background: #fff; }
.hourly-bulk-actions { display: flex; justify-content: flex-end; gap: 8px; }
.hourly-bulk-actions .hourly-bulk-submit { padding: 8px 14px; background: #2b6948; color: #fff; border: 0; border-radius: 8px; font-weight: 800; cursor: pointer; }
.hourly-bulk-actions .hourly-bulk-submit:disabled { opacity: .6; cursor: default; }
.hourly-bulk-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hourly-bulk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.hourly-bulk-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid #eef1ef; font-size: 13px; }
.hourly-bulk-item.is-created { background: #edf6f0; border-color: #cfe6d6; }
.hourly-bulk-item.is-skipped { background: #fff8dc; border-color: #eadb95; }
.hourly-bulk-item.is-error { background: #fdecea; border-color: #efc0bb; }
.hourly-bulk-item strong { font-weight: 700; }
.hourly-bulk-item span { color: var(--muted, #667); grid-column: 1; }
.hourly-bulk-item em { font-style: normal; font-weight: 700; grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
.hourly-bulk-error { padding: 10px; border-radius: 8px; background: #fdecea; color: #8a3028; font-weight: 700; }
@media (max-width: 560px) {
  .hourly-bulk-form { padding: 14px; }
  .hourly-bulk-item { grid-template-columns: 1fr; }
  .hourly-bulk-item em { grid-column: 1; grid-row: auto; text-align: left; }
}