/* Shared screen typography and control sizing aligned with MAX-HRM V2. */
:root {
  --report-text-body: 0.9375rem;
  --report-text-meta: 0.75rem;
  --report-text-title: 1.5rem;
  --report-leading-body: 1.5;
  --report-leading-compact: 1.35;
  --report-filter-date-width: 420px;
  --report-filter-control-height: 42px;
  --report-filter-gap: 16px;
  --report-topbar-height: 64px;
  --report-control-dock-height: 0px;
}

/* Shared sticky report controls: actions stay reachable while long reports scroll. */
.report-control-dock {
  position: sticky;
  top: var(--report-topbar-height);
  z-index: 32;
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
}

.report-control-bar {
  min-height: 56px;
  padding: 7px 10px 7px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.report-control-summary {
  min-width: 220px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.report-control-summary strong,
.report-control-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-control-summary strong { flex: 0 1 auto; color: var(--text); font-size: var(--report-text-body); }
.report-control-summary span { flex: 0 1 auto; color: var(--muted); font-size: var(--report-text-meta); }
.report-control-summary span::before { content: "·"; margin-right: 8px; color: var(--subtle); }

.report-control-actions,
.report-control-actions .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.report-control-actions .header-actions { flex-wrap: nowrap; }
.report-control-actions .button { min-height: 40px; white-space: nowrap; }

.report-control-toggle {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.report-control-toggle:hover { border-color: var(--input); background: var(--section); color: var(--primary); }
.report-control-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.report-control-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.report-control-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 240ms cubic-bezier(0.65, 0, 0.35, 1), opacity 160ms cubic-bezier(0.65, 0, 0.35, 1);
}

.report-control-body > .report-filter-panel { min-height: 0; overflow: visible; border: 0; border-radius: 0; }
.report-control-dock.is-collapsed .report-control-body { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.report-control-dock.is-collapsed .report-control-body > .report-filter-panel { min-height: 0; height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.report-control-dock.is-collapsed { border-radius: 10px; }
.report-control-dock.is-collapsed .report-control-bar { border-bottom: 0; }

.report-image-button .ui-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.report-image-surface,
.report-image-tile {
  position: fixed;
  z-index: -100;
  left: -100000px;
  top: 0;
  box-sizing: border-box;
  background: #f3f7fb;
  color: #0f172a;
}

.report-image-surface { padding: 28px; display: grid; gap: 18px; }
.report-image-tile { overflow: hidden; }
.report-image-heading { min-height: 94px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid #dbe4ef; border-radius: 10px; background: #fff; }
.report-image-heading span, .report-image-heading dt { color: #64748b; font-size: 12px; }
.report-image-heading h1 { margin: 4px 0 0; color: #0f172a; font-size: 26px; line-height: 1.25; }
.report-image-heading dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(150px, auto)); gap: 22px; }
.report-image-heading dt, .report-image-heading dd { display: block; }
.report-image-heading dd { margin: 4px 0 0; color: #0f172a; font-size: 14px; font-weight: 700; white-space: nowrap; }
.report-image-surface .raw-toolbar, .report-image-surface .view-tabs { margin-top: 0; background: #fff; border: 1px solid #dbe4ef; border-radius: 10px; }
.report-image-surface .raw-results, .report-image-surface .view.is-active { padding-top: 0; }
.report-image-surface button { cursor: default; }

.report-table-sticky-header {
  position: fixed;
  z-index: 12;
  display: none;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--section);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  pointer-events: none;
}

.report-table-sticky-header.is-visible { display: block; }
.report-table-sticky-header table { margin: 0; table-layout: fixed; }
.report-table-sticky-header thead { position: static !important; }
.report-table-sticky-header button,
.report-table-sticky-header input,
.report-table-sticky-header select { pointer-events: none; }

html,
body {
  font-size: 16px;
  font-kerning: normal;
}

body,
button,
input,
select,
textarea {
  font-size: var(--report-text-body);
  line-height: var(--report-leading-body);
}

h1 {
  font-size: var(--report-text-title);
  line-height: 1.3;
}

.page-header p,
.button,
.section-links button,
.company-switcher strong,
.profile-button strong,
.top-search,
.field input,
.field select,
.scope-trigger-copy strong,
.v2-select-trigger,
.v2-select-menu button,
.view-tabs button,
.table-toolbar button,
.table-wrap th,
.table-wrap td,
.sort-button,
.picker-search input,
.tree-row .node-name,
.person-pick strong,
.picker-footer .button,
.range-unavailable strong,
.toast div strong {
  font-size: var(--report-text-body);
}

.section-brand span,
.section-links button em,
.nav-group-label,
.nav-footnote,
.company-switcher small,
.profile-button small,
.company-menu-label,
.company-option small,
.top-search kbd,
.prototype-badge,
.field label,
.scope-trigger-copy small,
.selection-count,
.picker-heading span,
.tree-options,
.node-count,
.selection-summary strong,
.selection-summary > span:last-child,
.person-pick span,
.person-pick .person-status,
.picker-more strong,
.picker-more span,
.picker-footer span,
.report-meta,
.range-unavailable p,
.count-pill,
.trend,
.insight-detail span,
.insight-detail small,
.stat-bar span,
.stat-bar small,
.card-heading p,
.legend,
.bar-label span,
.donut span,
.donut-legend div,
.attention-heading p,
.attention-item span,
.issue-count,
.table-toolbar span,
.person-cell span,
.status,
.table-footer,
.paper-toolbar > div:first-child span,
.paper-controls > span,
.paper-controls .fit-switch button,
.fullscreen-button,
.direct-print-title span,
.direct-print-detail > button strong,
.direct-print-detail-panel > div small,
.direct-print-detail-panel label,
.toast div span,
.focus-toolbar button,
.focus-toolbar output,
.focus-page-label,
.focus-exit kbd,
.topbar-connection .connection-copy strong,
.topbar-connection .connection-copy span,
.topbar-connection .button,
.period-source,
.mini-avatar .photo-initials,
.date-range-limit-error {
  font-size: var(--report-text-meta);
  line-height: var(--report-leading-compact);
}

.v2-period-stepper,
.date-control {
  min-width: 0;
  min-height: 42px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.v2-period-stepper > button,
.date-control > button {
  width: 42px;
  height: 40px;
}

.date-range-select,
.date-picker-select,
#dateRangeReactRoot,
#workDateReactRoot {
  min-width: 0;
  height: 40px;
}

.date-range-select #dateRangeReactRoot > div,
.date-picker-select #workDateReactRoot > div {
  width: 100%;
  height: 40px;
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid var(--input);
  border-right: 1px solid var(--input);
  border-radius: 0;
}

#dateRangeReactRoot button[role="combobox"],
#workDateReactRoot input,
#workDateReactRoot button[role="combobox"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--report-text-body);
}

/* One filter rhythm for every report. Page styles must not redefine these dimensions. */
.report-filter-panel {
  display: grid;
  grid-template-columns:
    minmax(360px, var(--report-filter-date-width))
    minmax(360px, 1fr)
    minmax(190px, 240px);
  align-items: start;
  gap: var(--report-filter-gap);
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  background: var(--surface);
}

.report-filter-panel > .field.field {
  min-width: 0;
  display: grid;
  grid-template-rows: 18px minmax(var(--report-filter-control-height), auto) 16px;
  grid-column: auto;
  max-width: none;
  align-content: start;
  gap: 6px;
}

.report-filter-panel > .field > label {
  height: 18px;
  margin: 0 0 0 2px;
  line-height: 18px;
}

.report-date-field {
  width: 100%;
  max-width: var(--report-filter-date-width);
}

.report-filter-panel .report-date-stepper {
  min-width: 0;
  width: 100%;
  height: var(--report-filter-control-height);
  min-height: var(--report-filter-control-height);
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 0;
  overflow: visible;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--surface);
}

.report-filter-panel .report-date-stepper > button {
  width: 42px;
  height: 40px;
  border: 0;
  background: var(--section);
  color: var(--text);
}

.report-filter-panel .report-date-stepper > button:first-child {
  border-radius: 7px 0 0 7px;
}

.report-filter-panel .report-date-stepper > button:last-child {
  border-radius: 0 7px 7px 0;
}

.report-filter-panel .report-date-stepper > button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.report-filter-panel .report-date-field #dateRangeReactRoot,
.report-filter-panel .report-date-field #workDateReactRoot,
.report-filter-panel .report-date-field #dateRangeReactRoot > div,
.report-filter-panel .report-date-field #workDateReactRoot > div {
  height: 40px;
  min-height: 40px;
}

.report-filter-panel .report-date-field #report-date-range,
.report-filter-panel .report-date-field #work-date-picker {
  height: 40px;
  min-height: 0;
}

.report-filter-panel .scope-trigger,
.report-filter-panel .v2-select-trigger,
.report-filter-panel .raw-segmented {
  height: var(--report-filter-control-height);
  min-height: var(--report-filter-control-height);
}

.report-filter-panel .scope-trigger-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
  line-height: var(--report-leading-compact);
  white-space: nowrap;
}

.report-filter-panel .scope-trigger-copy strong,
.report-filter-panel .scope-trigger-copy small {
  display: inline;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-filter-panel .scope-trigger-copy strong {
  flex: 0 1 auto;
}

.report-filter-panel .scope-trigger-copy small {
  flex: 1 1 auto;
}

.report-filter-panel .scope-trigger-copy small::before {
  content: "·\00a0";
  margin-right: 0;
  color: var(--subtle);
}

/* Daily attendance */
.daily-summary span,
.daily-summary small,
.daily-table-heading > div:first-child span,
.photo-legend,
.employee-cell span,
.shift-cell span,
.daily-table-footer,
.evidence-header > div > span,
.evidence-header small,
.scan-time,
.photo-comparison figcaption strong,
.photo-comparison figcaption span,
.match-result strong,
.match-result span,
.shift-block header,
.shift-track span,
.timeline-section header,
.timeline-item div span,
.calculation-box span,
.evidence-footer > span,
.empty-results span,
.arrival-chart p,
.exception-list p,
.arrival-chart header > span,
.arrival-column span,
.exception-item span,
.exception-item > em,
.status-chip {
  font-size: var(--report-text-meta);
  line-height: var(--report-leading-compact);
}

.daily-table-heading strong,
.daily-table th,
.daily-table td,
.employee-cell strong,
.timeline-item > strong,
.timeline-item div strong,
.calculation-box strong,
.evidence-footer button,
.exception-list header button,
.arrival-column strong,
.exception-item strong,
.empty-results strong,
.arrival-chart h2,
.exception-list h2 {
  font-size: var(--report-text-body);
}

.daily-table th,
.daily-table td {
  line-height: var(--report-leading-compact);
}

/* Raw attendance */
.raw-filter-panel small,
.raw-meta,
.raw-meta button,
.raw-summary span,
.raw-summary small,
.raw-summary-note p strong,
.raw-toolbar span,
.raw-view-switch button small,
.card-density-switch > span,
.column-picker-panel > span,
.matrix-corner span,
.matrix-date span,
.matrix-person small,
.matrix-cell span,
.person-record-facts small,
.glance-date,
.glance-times em,
.person-record-count span,
.raw-day-date span,
.weekend-label,
.scan-chip span,
.scan-card-direction,
.scan-card-method-label,
.scan-time-card footer > span,
.scan-card-empty small,
.raw-results.is-card-compact .scan-card-direction,
.raw-results.is-card-compact .scan-card-method-label,
.raw-results.is-card-compact .scan-time-card footer > span,
.raw-empty p,
.raw-unavailable p,
.scan-photo-dialog p,
.scan-photo-empty,
.print-preview-bar > span small,
.print-detail-panel > div small {
  font-size: var(--report-text-meta) !important;
  line-height: var(--report-leading-compact);
}

.raw-segmented button,
.raw-toolbar button,
.raw-view-switch button strong,
.raw-toolbar .card-density-switch button,
.column-picker-panel > strong,
.column-picker-panel label,
.matrix-corner strong,
.matrix-date strong,
.matrix-person strong,
.matrix-cell strong,
.matrix-empty,
.raw-person-identity strong,
.glance-times b,
.raw-day-date strong,
.scan-chip strong,
.raw-day-empty,
.raw-day-action button,
.scan-detail-row,
.scan-detail-row.is-heading,
.scan-detail-row > strong,
.scan-photo-link,
.scan-loading,
.scan-row,
.scan-row > strong,
.scan-heading,
.scan-empty-row,
.scan-card-empty strong,
.raw-empty strong,
.raw-unavailable strong,
.print-back-button,
.print-preview-bar > span strong,
.print-zoom #printZoomReset,
.print-detail-button-count,
.print-detail-picker > button > strong,
.print-detail-panel > div strong,
.print-detail-panel label {
  font-size: var(--report-text-body) !important;
  line-height: var(--report-leading-compact);
}

.raw-avatar {
  font-size: var(--report-text-meta);
}

.avatar {
  font-size: var(--report-text-meta);
}

/* MAX-HRM keeps button labels at 15px in every size. */
.button.tertiary,
.button.compact,
.topbar-connection .button,
.paper-controls button,
.fullscreen-button,
.focus-toolbar button,
.daily-focus-toolbar button,
.raw-toolbar button,
.raw-day-action button,
.scan-photo-link,
.print-back-button,
.print-detail-picker > button {
  font-size: var(--report-text-body) !important;
}

@media (max-width: 1500px) {
  .main-content {
    padding: 24px 24px 44px;
  }

  .page-header {
    align-items: flex-start;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .report-filter-panel {
    grid-template-columns: minmax(320px, 360px) minmax(300px, 1fr) minmax(180px, 220px);
  }
}

@media (max-width: 1180px) {
  .report-control-bar { align-items: flex-start; }
  .report-control-summary { min-width: 160px; padding-top: 9px; }
  .report-control-actions .header-actions { flex-wrap: wrap; }

  .report-filter-panel {
    grid-template-columns: minmax(300px, 360px) minmax(300px, 1fr);
  }

  .report-filter-panel > .field.field:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 240px;
  }
}

@media (max-width: 900px) {
  .report-control-bar { flex-wrap: wrap; }
  .report-control-summary { order: 1; width: calc(100% - 52px); }
  .report-control-toggle { order: 2; }
  .report-control-actions { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; }
  .report-control-actions .header-actions { min-width: max-content; justify-content: flex-start; }

  .report-filter-panel {
    grid-template-columns: 1fr;
  }

  .report-filter-panel > .field.field:nth-child(3) {
    grid-column: auto;
    max-width: none;
  }

  .report-date-field {
    max-width: none;
  }
}

@media print {
  .report-control-dock,
  .report-image-surface,
  .report-image-tile {
    display: none !important;
  }

  /* Paper typography is intentionally independent from screen readability. */
  html,
  body {
    font-size: initial;
  }
}

/* Daily report readability and detail-selection contract. */
.daily-page {
  --report-text-body: 1rem;
  --report-text-meta: 0.8125rem;
}

.daily-page .report-date-field #workDateReactRoot > div {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.daily-page .report-date-field .date-picker-select {
  min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--input);
  border-left: 1px solid var(--input);
}

.daily-page .report-date-field #work-date-picker {
  background: transparent !important;
  text-align: center;
}

.daily-page .daily-table-heading strong,
.daily-page .department-group-control > strong,
.daily-page .department-group-row td > strong,
.daily-page .evidence-header strong,
.daily-page .timeline-item > strong,
.daily-page .timeline-item div strong,
.daily-page .calculation-box strong,
.daily-page .photo-comparison figcaption strong {
  font-size: var(--report-text-body);
  line-height: var(--report-leading-body);
}

.daily-page .daily-table-heading > div:first-child > span,
.daily-page .department-group-row td > span:last-child,
.daily-page .evidence-header > div > span,
.daily-page .evidence-header small,
.daily-page .shift-block header,
.daily-page .timeline-section header,
.daily-page .timeline-item div span,
.daily-page .calculation-box span,
.daily-page .photo-comparison figcaption span,
.daily-page .photo-legend,
.daily-page .evidence-footer > span,
.daily-page .evidence-footer button {
  font-size: var(--report-text-meta);
  line-height: var(--report-leading-compact);
}

.department-group-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.department-group-control {
  min-height: 42px;
  padding: 0 10px;
  white-space: nowrap;
}

.grouping-help {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
}

.grouping-help:hover,
.grouping-help:focus-visible {
  background: var(--primary-soft);
  color: var(--primary);
  outline: none;
}

.grouping-help .ui-icon {
  width: 18px;
  height: 18px;
}

.grouping-tooltip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 260px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--heading);
  color: var(--surface);
  box-shadow: var(--shadow);
  font-size: var(--report-text-meta);
  line-height: var(--report-leading-body);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.department-group-wrap:has(.grouping-help:hover) .grouping-tooltip,
.department-group-wrap:has(.grouping-help:focus-visible) .grouping-tooltip,
.department-group-wrap:focus-within .grouping-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.evidence-content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.evidence-content[hidden],
.evidence-empty[hidden] {
  display: none !important;
}

.evidence-empty {
  min-height: 560px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
}

.evidence-empty-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}

.evidence-empty-icon .ui-icon {
  width: 24px;
  height: 24px;
}

.evidence-empty strong {
  color: var(--heading);
  font-size: var(--report-text-body);
}

.evidence-empty > span:last-child {
  max-width: 260px;
  margin-top: 6px;
  font-size: var(--report-text-meta);
  line-height: var(--report-leading-body);
}

.large-profile .missing-large {
  width: 100%;
  height: 100%;
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--input);
  border-radius: 9px;
  background: var(--section);
  color: var(--muted);
  text-align: center;
  font-size: var(--report-text-meta);
  line-height: var(--report-leading-body);
}

.large-profile .missing-large > .ui-icon {
  width: 28px;
  height: 28px;
  color: var(--subtle);
}

@media (max-width: 1050px) {
  .daily-page .evidence-panel {
    display: block !important;
  }

  .daily-page .evidence-content {
    min-height: 560px;
  }
}
.source-freshness{font-weight:600;color:var(--muted);white-space:nowrap}
.source-freshness.is-stale{color:#b45309}
.report-data-stale .live-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.16)}
.status.calculated{background:#ecfdf5;color:#047857}
.status.notCalculated{background:#fff7ed;color:#b45309}