.yjh-original-bot-sync[hidden] { display: none !important; }
.main-nav .yjh-data-nav { display: flex !important; }
body.yjh-data-open .content > :not(.yjh-data-page) { display: none !important; }
body.yjh-data-open .content > .yjh-data-page { display: block !important; width: 100%; min-width: 0; }
.sync-stamp .yjh-top-sync-button {
  display: block;
  margin-top: 8px;
  padding: 7px 11px;
  border: 2px solid #29202e;
  border-radius: 9px;
  background: #fff;
  color: #1f1730;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 3px 3px 0 #29202e;
}
.yjh-data-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.yjh-data-toolbar { display: flex; align-items: end; gap: 14px; padding: 15px; margin-bottom: 14px; overflow: visible; }
.yjh-data-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 900; min-width: min(460px, 42vw); }
.yjh-data-toolbar select { min-height: 44px; border: 2px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); padding: 0 12px; font-size: 14px; font-weight: 800; }
.yjh-data-view-tabs, .yjh-guild-filters, .yjh-job-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.yjh-data-view-tabs button, .yjh-guild-filters button, .yjh-job-filters button {
  min-height: 42px; border: 2px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); padding: 0 14px; font-size: 14px; font-weight: 900;
}
.yjh-data-view-tabs button.active, .yjh-guild-filters button.active, .yjh-job-filters button.active { color: #fff; background: #6c3050; border-color: #6c3050; }
.yjh-data-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.yjh-data-summary > div { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--line); }
.yjh-data-summary > div:last-child { border-right: 0; }
.yjh-data-summary span, .yjh-data-summary b { display: block; }
.yjh-data-summary span { color: var(--muted); margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.yjh-data-summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.yjh-filter-panel { display: grid; gap: 12px; margin: 0 0 12px; padding: 14px 16px; }
.yjh-filter-group { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; }
.yjh-filter-group > b { font-size: 14px; }
.yjh-job-filters button { display: inline-flex; align-items: center; gap: 7px; }
.yjh-job-filters button img { width: 26px; height: 26px; object-fit: contain; }
.yjh-filter-result { margin: 0; color: var(--muted); font-size: 13px; }
.yjh-filter-result b { color: var(--ink); font-size: 15px; }
.yjh-stats-table-wrap { max-height: min(68vh, 780px); overflow: auto; }
.yjh-stats-table { min-width: calc(330px + var(--metric-count) * 118px); }
.yjh-stats-row { display: grid; grid-template-columns: 48px minmax(170px, 1fr) 82px repeat(var(--metric-count), minmax(106px, 1fr)); align-items: center; border-bottom: 1px solid var(--line); }
.yjh-stats-row:last-child { border-bottom: 0; }
.yjh-stats-row > * { min-width: 0; padding: 14px 12px; text-align: right; font-size: 14px; line-height: 1.35; }
.yjh-stats-row > :nth-child(2) { text-align: left; }
.yjh-stats-row > :nth-child(2) { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.yjh-stats-row.head { color: #fff; background: #4c2038; position: sticky; top: 0; z-index: 3; }
.yjh-stats-row.head > * { color: inherit; background: transparent; }
.yjh-stats-row.head button { border: 0; font-size: 13px; font-weight: 900; white-space: nowrap; }
.yjh-stats-row.head button span { color: #ffc0d8; }
.yjh-job-icon { display: grid; place-items: center; }
.yjh-job-icon img { width: 32px; height: 32px; object-fit: contain; }
.yjh-data-empty { margin: 0; padding: 34px 20px; color: var(--muted); text-align: center; }
.yjh-data-empty.error { color: #b52c62; }
.yjh-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.yjh-compare-grid section > header, .yjh-attendance-history > header { display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.yjh-compare-grid h3, .yjh-attendance-history h3 { margin: 0; font-family: serif; }
.yjh-compare-grid section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yjh-compare-grid p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.yjh-compare-grid p span { color: var(--muted); font-size: 10px; }
.yjh-attendance-history header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.yjh-attendance-history-head, .yjh-attendance-history-row { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(4, 90px); gap: 8px; align-items: center; padding: 11px 17px; border-bottom: 1px solid var(--line); text-align: center; }
.yjh-attendance-history-head { color: var(--muted); background: var(--surface-soft); font-size: 10px; }
.yjh-attendance-history-row:last-child { border-bottom: 0; }
.yjh-attendance-history-row > div { text-align: left; }
.yjh-attendance-history-row b, .yjh-attendance-history-row span { display: block; }
.yjh-attendance-history-row span { color: var(--muted); margin-top: 3px; font-size: 9px; }
.yjh-attendance-history-row strong { font-size: 15px; }
.yjh-attendance-history-row strong.late { color: #d53b55; }
.attendance-columns { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.event-hero { grid-template-columns: 64px minmax(0, 1fr) repeat(5, minmax(54px, .18fr)) !important; }
.attendance-column header i.late_leave { background: #d53b55; }

@media (width <= 900px) {
  .yjh-data-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yjh-data-summary > div:nth-child(2) { border-right: 0; }
  .yjh-data-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .yjh-compare-grid { grid-template-columns: 1fr; }
  .yjh-attendance-history { overflow-x: auto; }
  .yjh-attendance-history-head, .yjh-attendance-history-row { min-width: 690px; }
}

@media (width <= 760px) {
  body.yjh-data-open .content { min-width: 0 !important; overflow-x: hidden !important; }
  .yjh-data-page { min-width: 0; max-width: 100%; overflow: hidden; }
  .welcome-row { gap: 9px; }
  .welcome-row .sync-stamp { display: block !important; flex: none; padding-left: 0; }
  .welcome-row .sync-stamp > i, .welcome-row .sync-stamp > span, .welcome-row .sync-stamp > b { display: none; }
  .sync-stamp .yjh-top-sync-button { margin: 0; min-height: 38px; padding: 6px 9px; font-size: 11px; }
  .yjh-data-heading { align-items: stretch; flex-direction: column; }
  .yjh-data-heading .ghost-button { align-self: start; }
  .yjh-data-toolbar { align-items: stretch; flex-direction: column; }
  .yjh-data-toolbar label { min-width: 0; width: 100%; }
  .yjh-data-toolbar select { width: 100%; max-width: 100%; }
  .yjh-data-view-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
  .yjh-data-view-tabs button { padding: 0 6px; }
  .yjh-data-summary { grid-template-columns: 1fr; }
  .yjh-data-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .yjh-data-summary > div:last-child { border-bottom: 0; }
  .yjh-filter-group { grid-template-columns: 1fr; }
  .yjh-job-filters, .yjh-guild-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yjh-job-filters button, .yjh-guild-filters button { justify-content: center; padding: 5px 8px; font-size: 13px; }
  .yjh-stats-table-wrap { max-height: 64vh; }
  .yjh-stats-row > * { padding: 12px 9px; font-size: 13px; }
  .attendance-columns { grid-template-columns: 1fr !important; }
  .event-hero { grid-template-columns: 48px minmax(0, 1fr) repeat(5, 1fr) !important; }
}

/* 2026-08-28：一份 CSV = 一場 + 可展開出缺勤名單 */
.yjh-attendance-history { display: grid; gap: 14px; }
.yjh-attendance-history > header { padding: 15px 17px; }
.yjh-attendance-week { display: grid; gap: 9px; }
.yjh-attendance-week-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 4px; }
.yjh-attendance-week-title b { font-size: 14px; }
.yjh-attendance-week-title span { color: var(--muted); font-size: 10px; font-weight: 800; }
.yjh-attendance-event-list { display: grid; gap: 10px; }
.yjh-attendance-event { overflow: hidden; }
.yjh-attendance-event > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.yjh-attendance-event > header div { min-width: 0; }
.yjh-attendance-event > header b, .yjh-attendance-event > header span { display: block; }
.yjh-attendance-event > header span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.yjh-attendance-total { flex: none; margin-top: 0 !important; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); }
.yjh-attendance-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.yjh-attendance-status-grid button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; min-height: 66px; padding: 10px 13px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--ink); text-align: left; }
.yjh-attendance-status-grid button:last-child { border-right: 0; }
.yjh-attendance-status-grid button span { font-size: 10px; font-weight: 900; }
.yjh-attendance-status-grid button strong { grid-row: 1 / 3; grid-column: 2; font-size: 20px; }
.yjh-attendance-status-grid button small { color: var(--muted); font-size: 8px; }
.yjh-attendance-status-grid button[aria-expanded="true"] { background: #fff2f7; box-shadow: inset 0 -3px 0 #8b3a61; }
.yjh-attendance-status-grid button.late strong { color: #d53b55; }
.yjh-attendance-status-grid button.leave strong { color: #a05735; }
.yjh-attendance-status-grid button.waitlist strong { color: #73612c; }
.yjh-attendance-status-grid button.attend strong { color: #287d58; }
.yjh-attendance-detail { border-top: 1px solid var(--line); background: var(--surface-soft); }
.yjh-attendance-detail section h4 { margin: 0; padding: 11px 15px; border-bottom: 1px solid var(--line); font-size: 12px; }
.yjh-attendance-detail section > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 12px 15px; }
.yjh-attendance-person { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.yjh-attendance-person-job { grid-row: 1 / 3; display: grid; place-items: center; }
.yjh-attendance-person-job img { width: 24px; height: 24px; object-fit: contain; }
.yjh-attendance-person b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.yjh-attendance-person small { color: var(--muted); font-size: 8px; }

@media (width <= 760px) {
  .yjh-attendance-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yjh-attendance-status-grid button:nth-child(2) { border-right: 0; }
  .yjh-attendance-status-grid button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .yjh-attendance-detail section > div { grid-template-columns: 1fr; }
}