/* PostWatch — attendance report, screen preview
   ============================================================================
   The exported HTML file carries its own print styles (exportStyles() in
   postwatch-attendance-report-v6.js). This sheet styles the same document when
   it is previewed inside the app, plus the small panel that prepares it.

   The preview deliberately reads like paper: serif body, generous leading, a
   measured column. A person is about to send this to a client, so what they
   review on screen should be what arrives.
   ========================================================================== */

/* ---------------------------------------------------------------- preparer */

.par-panel {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--pw-border, #e8e6e0);
  border-radius: var(--pw-radius-card, 16px);
  background: var(--pw-surface, #fff);
}

.par-panel__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}

.par-panel__field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.par-panel__field > span {
  font-size: 14px;
  font-weight: 600;
  color: var(--pw-text-muted, #6b6862);
}

.par-panel__field :where(select, input) {
  width: 100%;
  min-height: 44px;
  font-size: max(16px, 1rem);
}

/* The blocked state is the common one early in a period, so it is a normal
   part of the panel rather than an error box: it says what is missing and
   which screen fixes it. */
.par-blocked {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border: 1px solid var(--pw-warn-border, #e8d9a8);
  border-left-width: 4px;
  border-radius: var(--pw-radius-control, 12px);
  background: var(--pw-warn-soft, #fdf8e9);
  color: var(--pw-text, #14140f);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.par-blocked strong { display: block; margin-bottom: 0.125rem; }

/* ------------------------------------------------------------ the document */

.par-preview {
  overflow-x: auto;
  padding: 1.5rem;
  border: 1px solid var(--pw-border, #e8e6e0);
  border-radius: var(--pw-radius-card, 16px);
  background: #ffffff;
  color: #14140f;
}

.par-doc {
  max-width: 78ch;
  margin: 0 auto;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #14140f;
}

.par-doc__head {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #14140f;
}

.par-doc__logo { width: 84px; height: 84px; object-fit: contain; flex: 0 0 auto; }
.par-doc__identity { min-width: 0; }
.par-doc__company { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
.par-doc__meta { margin: 2px 0 0; font-size: 14px; color: #3f3f46; }

/* Display type tightens as it grows; body stays near zero tracking. */
.par-doc__title {
  margin: 0 0 0.875rem;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.par-doc__facts {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 15px;
}
.par-doc__facts dt { font-weight: 700; }
.par-doc__facts dd { margin: 0; }

.par-section { margin: 0 0 1.125rem; }

.par-section__title {
  margin: 0 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #a1a1aa;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.par-summary {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: 15px;
}
.par-summary dt { color: #3f3f46; }
.par-summary dd { margin: 0; }

/* Figures line up in columns, which is the whole point of an attendance
   table — a reader compares down, not across. */
.par-num { font-variant-numeric: tabular-nums; }

.par-table-wrap { overflow-x: auto; }

.par-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.par-table th,
.par-table td { padding: 0.375rem 0.5rem; border-bottom: 1px solid #d4d4d8; text-align: left; }
.par-table thead th {
  border-bottom: 1.5px solid #14140f;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.par-table td.par-num,
.par-table th.par-num { text-align: right; font-variant-numeric: tabular-nums; }
.par-table tbody tr:nth-child(even) { background: #fafaf9; }
.par-table tfoot th,
.par-table tfoot td { border-top: 1.5px solid #14140f; border-bottom: 0; font-weight: 700; }

.par-exceptions { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.par-exceptions li {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(8rem, 11rem) 1fr;
  gap: 0.5rem;
  padding: 0.3125rem 0;
  border-bottom: 1px dotted #d4d4d8;
}
.par-exceptions__when { font-variant-numeric: tabular-nums; }
.par-exceptions__why { color: #3f3f46; }

.par-note { margin: 0; font-size: 15px; }

.par-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1.25rem;
  margin-top: 1.5rem;
}
.par-signatures__block { display: flex; flex-direction: column; gap: 0.1875rem; }
.par-signatures__rule { display: block; height: 1px; margin-top: 1.25rem; background: #14140f; }
.par-signatures__label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #3f3f46;
}
.par-signatures__value { font-size: 15px; }

.par-doc__confidential {
  margin-top: 1.125rem;
  padding-top: 0.5rem;
  border-top: 1px solid #d4d4d8;
  font-size: 13px;
  color: #3f3f46;
}

.par-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A phone still has to be able to read this before it is sent. */
@media (max-width: 640px) {
  .par-preview { padding: 1rem 0.75rem; }
  .par-doc__head { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  .par-doc__facts,
  .par-summary { grid-template-columns: 1fr; gap: 0.125rem; }
  .par-doc__facts dt,
  .par-summary dt { margin-top: 0.375rem; }
  .par-exceptions li { grid-template-columns: 1fr; gap: 0.125rem; }
  .par-signatures { grid-template-columns: 1fr; }
}

/* The document is a printed artefact and keeps its own light surface in dark
   mode. Inverting a page about to be sent to a client would misrepresent it. */
@media (prefers-color-scheme: dark) {
  .par-preview { border-color: var(--pw-border, #2c3440); }
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .par-blocked { background: #fdf8e9; border-color: #d8c78d; color: #14140f; }
  .par-panel { border: 1px solid #c7c7c2; background: #ffffff; }
}