/* 排班、排休選人及月份操作共用同一面板，依螢幕寬度調整位置。 */
#desktop-actions {
  display: block;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 14px;
}
.action-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
#desktop-actions .action-heading h2 {
  font-size: 15px;
  margin: 0;
  color: var(--tone-49643c, #49643c);
}
#action-month {
  color: var(--tone-7a8d6c, #7a8d6c);
  font-size: 12px;
}
.auto-action-row {
  display: flex;
  gap: 7px;
}
.auto-action-row #auto-plan {
  flex: 1;
}
.auto-action-row .auto-settings {
  width: 42px;
  padding: 8px;
  flex: none;
  display: grid;
  place-items: center;
}
.auto-settings svg {
  height: 22px;
  width: 22px;
}
#desktop-actions .auto-rule-summary {
  font-size: 12px;
  line-height: 1.7;
  color: var(--tone-7a8d6c, #7a8d6c);
  margin: 6px 0 13px;
}
#desktop-actions #pal.assignment-toolbar {
  position: static;
  display: block;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--tone-e6ecdf, #e6ecdf);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#desktop-actions .tool-mode-row {
  display: block;
}
#desktop-actions .tool-label,
#desktop-actions .tool-month,
#desktop-actions .desktop-mode-select {
  display: none;
}
#desktop-actions .assignment-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
#desktop-actions .assignment-modes .b {
  min-width: 0;
  padding: 6px 3px;
  min-height: 38px;
  font-size: 12px;
  white-space: nowrap;
}
#desktop-actions .desktop-persons {
  display: grid;
  margin: 13px 0 0;
  gap: 12px;
}
#desktop-actions .person-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
#desktop-actions .person-group-label {
  grid-column: 1 / -1;
  font-size: 12px;
  margin: 0 0 2px;
}
#desktop-actions .person-chip.b {
  justify-content: center;
  gap: 2px;
  padding: 7px 4px;
  min-height: 40px;
  font-size: 14px;
  white-space: nowrap;
}
#desktop-actions .assignment-status {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
}
/* 人員開關同步標示於選人區，手動排班仍可使用。 */
#person-picker.person-paused,
#person-picker option.person-paused {
  text-decoration: line-through;
  color: var(--tone-89968b, #89968b);
}
#person-picker option:not(.person-paused) {
  text-decoration: none;
  color: var(--tone-36573e, #36573e);
}
.clear-person {
  flex: none;
  padding: 7px 9px;
}
.day-person-group {
  margin: 20px 0;
}
.day-person-group h3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--tone-758868, #758868);
  margin: 0 0 9px;
}
.day-person-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.day-person.b {
  min-height: 48px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--tone-e8eee2, #e8eee2);
  color: var(--tone-4d7041, #4d7041);
}
.day-person.rh {
  background: var(--tone-e0edeb, #e0edeb);
  color: var(--tone-427573, #427573);
}
.day-person.on {
  border-color: var(--tone-4e7543, #4e7543);
  box-shadow: inset 0 0 0 1px var(--tone-4e7543, #4e7543);
}
.day-person.rh.on {
  border-color: var(--tone-427573, #427573);
  box-shadow: inset 0 0 0 1px var(--tone-427573, #427573);
}
.phone-layout .day-person-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.month-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  border-top: 1px solid var(--tone-e6ecdf, #e6ecdf);
  padding-top: 12px;
}
.month-action-row .b {
  font-size: 13px;
}
.clear-month {
  color: #a16549;
}
#compact-actions-anchor:not(:empty) {
  margin-bottom: 15px;
}
.phone-layout #desktop-actions {
  padding: 12px;
  background: var(--tone-f8faf4, #f8faf4);
  border-color: var(--tone-dae3cf, #dae3cf);
}
.phone-layout #desktop-actions .desktop-persons {
  display: none;
}
.phone-layout #desktop-actions .assignment-modes .b {
  min-height: 42px;
}
.phone-layout #desktop-actions .auto-action-row .b,
.phone-layout #desktop-actions .month-action-row .b {
  min-height: 44px;
  font-size: 14px;
}
.phone-layout #desktop-actions .assignment-status {
  font-size: 12px;
}
.phone-layout #desktop-actions .guest-toolbar-copy {
  margin-bottom: 10px;
}
.auto-options {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.auto-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid var(--tone-dfe7d8, #dfe7d8);
  padding: 12px;
  border-radius: 9px;
}
.auto-option:has(input[type="checkbox"]:checked) {
  background: var(--tone-f1f6ec, #f1f6ec);
  border-color: var(--tone-91ad81, #91ad81);
}
.auto-role-option {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.auto-role-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.auto-role-count {
  display: grid;
  gap: 7px;
  font-size: 13px;
  color: var(--tone-758868, #758868);
}
.auto-check,
.auto-count {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
}
.auto-check {
  cursor: pointer;
  min-height: 44px;
}
#pn .auto-check input {
  appearance: auto;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: var(--tone-315e43, #315e43);
}
#pn .auto-count select {
  width: 72px;
  min-height: 44px;
  margin: 0;
  text-align: center;
  font-size: 16px;
}
.auto-count {
  color: var(--tone-758868, #758868);
  font-size: 13px;
  white-space: nowrap;
}
#pn .auto-count select:disabled {
  opacity: 0.4;
}
.auto-protection {
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 當月紀錄預設收合，展開後限制高度方便閱讀。 */
.history-list {
  max-height: 380px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
.history-entry {
  border-bottom: 1px solid var(--tone-e6ecdf, #e6ecdf);
  padding: 12px 0;
}
.history-entry:first-child {
  padding-top: 0;
}
.history-entry-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-entry-top time { flex: 1; min-width: 0; }
.b.history-delete { color: var(--r); border-color: var(--bd); min-height: 40px; padding: 6px 12px; flex: none; }
.history-entry:last-child {
  border-bottom: 0;
}
.history-entry time {
  display: block;
  font-size: 12px;
  color: var(--tone-718466, #718466);
  font-variant-numeric: tabular-nums;
}
.history-entry p {
  font-size: 14px;
  line-height: 1.8;
  margin: 6px 0;
  color: var(--tone-36573e, #36573e);
}
.history-entry small {
  color: var(--tone-89967d, #89967d);
  font-size: 12px;
}

/* 過去日期用暗色區分，自己的班次固定為紅字亮黃底。 */
#calendar-workspace .d.adjacent-day {
  cursor: default;
  border-style: dashed;
  background: var(--bg);
}
#calendar-workspace .d.adjacent-day:hover {
  border-color: var(--bd);
  box-shadow: none;
}
#calendar-workspace .d.adjacent-day em { color: var(--mu); }
#calendar-workspace .d.ps {
  background: var(--tone-dce2df, #dce2df);
  border-color: var(--tone-c2cbc5, #c2cbc5);
  opacity: 1;
}
#calendar-workspace .d.ps em,
#calendar-workspace .d.ps .week-date strong,
#calendar-workspace .d.ps .week-date > span {
  color: var(--tone-4f5c53, #4f5c53);
}
#calendar-workspace .d.ps .c.n {
  background: var(--tone-cbd6ca, #cbd6ca);
  color: var(--tone-4c604a, #4c604a);
}
#calendar-workspace .d.ps .c.h {
  background: var(--tone-c8d7d5, #c8d7d5);
  color: var(--tone-3c605d, #3c605d);
}
#calendar-workspace .d.ps .empty-day,
#calendar-workspace .d.ps .c.v {
  color: var(--tone-607066, #607066);
}
#calendar-workspace .d .c.me:not(.lv):not(.p) {
  background: #fff16b;
  color: #a31e29;
  font-weight: 700;
}
#calendar-workspace .d .c.me:not(.lv):not(.p):not(.out) {
  text-decoration: none;
}
#calendar-workspace .d .c.me:not(.lv):not(.p)::after {
  color: #a31e29;
}

.legend .legend-mine {
  background: #fff16b;
  box-shadow: 0 0 0 1px #a31e29;
}
.legend .legend-past {
  background: var(--tone-7d8b81, #7d8b81);
}
#mine-shift-legend[hidden] {
  display: none;
}

/* 完整系統名稱在桌面與手機都保持清楚易讀。 */
.compact-brand > span {
  font-size: 19px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.phone-layout .compact-brand {
  gap: 7px;
}
.phone-layout .compact-brand > span {
  font-size: 16px;
  letter-spacing: 0.5px;
}
#pn:has(.export-preview) {
  width: min(1120px, 96vw);
  max-width: 96vw;
}
.export-preview h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.export-preview-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 225px);
  object-fit: contain;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
  margin: 15px auto 9px;
}
@media (max-width: 360px) {
  .phone-layout .topbar {
    flex-wrap: wrap;
  }
  .phone-layout .account {
    margin-left: auto;
  }
}
/* 節日與來源沿用主題文字色，不壓縮人員欄位。 */
.random-results {
  max-height: 50vh;
  overflow: auto;
  font-size: 14px;
}
.legend .legend-holiday {
  background: #faf9f2;
  border: 1px solid #dfd1b9;
}
#cal .d em,
.desktop-layout #cal .d em {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
#cal .d em > span {
  flex: none;
}
.holiday-name {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  min-width: 0;
}
#cal .today .holiday-name {
  margin-right: 28px;
}

.calendar-last-updated {
  color: var(--mu);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}