/*
 * Hours — the owner's screen. Loads inside index.html, so it lives in the hub's
 * dark theme and has to answer for the light one.
 *
 * ---------------------------------------------------------------------------
 * HANDOFF RULE 6, TAKEN SERIOUSLY
 * ---------------------------------------------------------------------------
 * Flat accents used as FILLS or BORDERS need no light-theme override; the same
 * colours used as TEXT do, because raw --amber is about 2:1 on white and
 * #E05A4A about 3.2:1 — both unreadable. This screen is mostly text, and the
 * text that matters most is the flagged kind.
 *
 * So every accent used as text here is a token defined twice, once for each
 * theme, and nothing below writes a colour literal into a rule. The light
 * values are the ones already contrast-checked for this project: #9C5C08 amber
 * text (5.32:1 on white) and #B03A2E red text (6.02:1). Green is #1B7A4B in
 * light (5.5:1) and #34D399 in dark, because a green dark enough to read on
 * white disappears on #14130F.
 *
 * It also does NOT use --reef, which is not defined in index.html at all —
 * css/menus.css defines it for itself, and depending on another module's token
 * means this screen renders differently depending on which files loaded.
 * --teal-bright is defined in :root but is NOT redefined for the light theme,
 * so it is unusable as text here for the same reason as raw amber.
 *
 * HANDOFF rule 7: equal-specificity CSS resolves by source order, and this file
 * is linked after the inline <style>. It does not need to rely on that —
 * `body.light-theme .x` is (0,1,1) against `.x` at (0,1,0) and wins on
 * specificity — but the tokens do, and that is the mechanism index.html itself
 * uses.
 */

:root {
  --hrs-ok: #34D399;
  --hrs-warn: #E8A23D;
  --hrs-bad: #E05A4A;
  --hrs-panel: rgba(255,255,255,0.03);
  --hrs-line: var(--glass-border);
}
body.light-theme {
  --hrs-ok: #1B7A4B;
  --hrs-warn: #9C5C08;
  --hrs-bad: #B03A2E;
  --hrs-panel: rgba(0,0,0,0.02);
  --hrs-line: rgba(0,0,0,0.1);
}

.hrs-wrap { max-width: 900px; margin: 0 auto; padding: 0 1rem 6rem; }

.hrs-status { margin: 0 0 1rem; font-size: 0.9rem; }
.hrs-status:empty { display: none; }
.hrs-status-ok { color: var(--hrs-ok); }
.hrs-status-error { color: var(--hrs-bad); }
.hrs-status-info { color: var(--muted); }

/* A failed read, a missing table and a refused grant. Never silent, never
   collapsed into the empty state below them. */
.hrs-fault {
  border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 1rem;
  font-size: 0.92rem; line-height: 1.5;
  border: 1px solid var(--hrs-bad); color: var(--hrs-bad);
  background: rgba(224,90,74,0.08);
}
.hrs-fault-missing { border-color: var(--hrs-warn); color: var(--hrs-warn); background: rgba(232,162,61,0.08); }

.hrs-note {
  border: 1px dashed var(--hrs-line); border-radius: 10px;
  padding: 1rem; color: var(--sand); font-size: 0.92rem;
}

.hrs-section { margin-bottom: 2.2rem; }
.hrs-section-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  border-bottom: 1px solid var(--hrs-line); padding-bottom: 0.4rem; margin-bottom: 0.8rem;
}
.hrs-section-title { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 600; }
.hrs-count { font-size: 0.85rem; color: var(--muted); }
.hrs-quiet { color: var(--muted); font-size: 0.88rem; line-height: 1.55; margin-bottom: 0.8rem; }

/* --------------------------------------------------------------------- */
/* A shift                                                                */
/* --------------------------------------------------------------------- */
.hrs-shift {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  background: var(--hrs-panel); border: 1px solid var(--hrs-line);
  border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 0.35rem;
}
.hrs-shift-open { border-color: var(--hrs-ok); }
.hrs-shift-flagged { border-color: var(--hrs-warn); }
.hrs-shift-main { flex: 1 1 240px; min-width: 0; }
.hrs-shift-times { font-size: 0.95rem; }
.hrs-shift-ev { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.hrs-shift-right { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }

.hrs-dur { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.02rem; text-align: right; }
.hrs-dur-dec { display: block; font-size: 0.74rem; font-weight: 400; color: var(--muted); }
.hrs-open-pill {
  font-size: 0.85rem; font-weight: 600; color: var(--hrs-ok);
  border: 1px solid var(--hrs-ok); border-radius: 999px; padding: 0.2rem 0.6rem;
}

.hrs-flag {
  font-size: 0.82rem; line-height: 1.45;
  padding: 0.35rem 0.9rem 0.55rem; margin: -0.2rem 0 0.5rem;
  border-left: 2px solid var(--hrs-warn); margin-left: 0.9rem;
}
.hrs-flag-long { color: var(--hrs-bad); border-left-color: var(--hrs-bad); }
.hrs-flag-window { color: var(--hrs-warn); }
.hrs-flag-clock { color: var(--muted); border-left-color: var(--hrs-line); }

/* --------------------------------------------------------------------- */
/* The audit trail, shown inline under the shift it belongs to            */
/* --------------------------------------------------------------------- */
.hrs-edits {
  margin: -0.2rem 0 0.7rem 0.9rem; padding: 0.5rem 0.8rem;
  border-left: 2px solid var(--hrs-line); font-size: 0.8rem;
}
.hrs-edits-head { color: var(--hrs-warn); font-weight: 600; margin-bottom: 0.3rem; }
.hrs-edit-row { color: var(--muted); line-height: 1.6; }
.hrs-edit-field { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.hrs-edit-was { text-decoration: line-through; }
.hrs-edit-now { color: var(--bone); font-weight: 600; }
.hrs-edit-why { display: block; font-style: italic; }
.hrs-edit-when { display: block; font-size: 0.72rem; opacity: 0.75; }

/* --------------------------------------------------------------------- */
/* Correcting                                                             */
/* --------------------------------------------------------------------- */
.hrs-editform {
  border: 1px solid var(--hrs-warn); border-radius: 10px;
  padding: 0.9rem; margin: 0 0 0.9rem 0.9rem; background: var(--hrs-panel);
}
.hrs-editform-head { font-weight: 600; margin-bottom: 0.25rem; }
.hrs-editform-note { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.7rem; }
.hrs-lab { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.6rem; }
.hrs-hint { display: block; font-size: 0.75rem; opacity: 0.8; margin-top: 2px; }
.hrs-check { display: block; font-size: 0.82rem; color: var(--hrs-warn); margin-bottom: 0.7rem; }
.hrs-editform-acts { display: flex; gap: 0.5rem; }

.hrs-input {
  display: block; width: 100%; margin-top: 3px;
  background: var(--concrete); color: var(--bone);
  border: 1px solid var(--hrs-line); border-radius: 8px;
  padding: 0.55rem 0.7rem; font-family: inherit; font-size: 0.92rem;
  /* 44px minimum: this is used on a phone as often as at a desk. */
  min-height: 44px;
}
body.light-theme .hrs-input { background: #F5F3F0; color: #1A1814; border-color: rgba(0,0,0,0.1); }

.hrs-btn {
  background: var(--amber); color: #1A1814; border: none; border-radius: 8px;
  padding: 0.55rem 1rem; font-family: inherit; font-weight: 600; font-size: 0.9rem;
  cursor: pointer; min-height: 44px;
}
.hrs-btn-quiet {
  background: none; color: var(--muted); border: 1px solid var(--hrs-line);
  border-radius: 8px; padding: 0.45rem 0.8rem; font-family: inherit; font-size: 0.82rem;
  cursor: pointer; min-height: 36px;
}
.hrs-btn-quiet:hover { color: var(--bone); border-color: var(--amber); }

/* --------------------------------------------------------------------- */
/* Pay period                                                             */
/* --------------------------------------------------------------------- */
/* The headline figure gets the only large type on the screen, and the two
   things it does NOT include sit directly under it in a bordered box rather
   than as grey small print. An exclusion in a lighter colour than the figure it
   qualifies is an exclusion nobody reads. */

.hrs-period-presets { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.hrs-chip {
  background: none; color: var(--muted); border: 1px solid var(--hrs-line);
  border-radius: 999px; padding: 0.35rem 0.85rem; font-family: inherit; font-size: 0.8rem;
  cursor: pointer; min-height: 36px;
}
.hrs-chip:hover { color: var(--bone); border-color: var(--amber); }

.hrs-period-dates { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hrs-period-lbl { flex: 1 1 150px; font-size: 0.78rem; color: var(--muted); }
.hrs-period-lbl .hrs-input { width: 100%; }

.hrs-period-range {
  font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.hrs-period-rule { font-size: 0.72rem; font-weight: 400; color: var(--muted); }

.hrs-period-total {
  border: 1px solid var(--hrs-line); border-radius: 12px;
  background: var(--hrs-panel); padding: 0.9rem 1rem; margin-bottom: 0.6rem;
}
.hrs-period-total-fig {
  font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 700; line-height: 1.1;
}
.hrs-period-total-sub { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }

/* Amber border, amber text, and the same weight as the rest of the sentence —
   this is the line that stops a total being read as final when it is not. */
.hrs-period-warn {
  border: 1px solid var(--hrs-warn); border-radius: 10px;
  padding: 0.7rem 0.9rem; margin-bottom: 0.6rem;
  font-size: 0.85rem; line-height: 1.5; color: var(--hrs-warn);
}
.hrs-period-warn strong { font-weight: 700; }
.hrs-period-warn-soft { border-color: var(--hrs-line); color: var(--muted); }

.hrs-pp { border-bottom: 1px solid var(--hrs-line); padding: 0.55rem 0; }
.hrs-pp:last-of-type { border-bottom: none; }
.hrs-pp-head {
  display: flex; align-items: baseline; gap: 0.6rem; width: 100%;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: inherit; font-family: inherit; font-size: 0.95rem; text-align: left;
  min-height: 36px;
}
.hrs-pp-caret { color: var(--muted); width: 1em; flex: 0 0 auto; }
.hrs-pp-name { font-weight: 600; flex: 1 1 auto; }
.hrs-pp-total { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; flex: 0 0 auto; }
/* Aligned with the name, not the caret, so the sub-line reads as belonging to
   the person rather than to the row above it. */
.hrs-pp-sub { font-size: 0.78rem; color: var(--muted); padding-left: 1.6em; }
.hrs-pp-shifts { padding-left: 1.6em; margin-top: 0.5rem; }
/* Someone with shifts but no crew row: their hours still count, and the row
   says so rather than hiding. */
.hrs-pp-unknown .hrs-pp-name { color: var(--hrs-warn); }

.hrs-period-exports { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

/* --------------------------------------------------------------------- */
/* By event                                                               */
/* --------------------------------------------------------------------- */
.hrs-event {
  border: 1px solid var(--hrs-line); border-radius: 12px;
  padding: 0.9rem; margin-bottom: 1rem;
}
.hrs-event-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hrs-event-name { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600; }
.hrs-event-total { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; text-align: right; }
.hrs-event-sub { font-size: 0.8rem; color: var(--muted); margin: 0.15rem 0 0.8rem; }
.hrs-still-open { color: var(--hrs-ok); }
.hrs-flagged-count { color: var(--hrs-warn); }

.hrs-person { margin-bottom: 0.9rem; }
.hrs-person-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px dotted var(--hrs-line); padding-bottom: 0.25rem; margin-bottom: 0.4rem;
}
.hrs-person-name { font-weight: 600; font-size: 0.95rem; }
.hrs-person-total { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------- */
/* Crew and codes                                                         */
/* --------------------------------------------------------------------- */
.hrs-addrow { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; align-items: flex-start; }
.hrs-addrow .hrs-input { flex: 1 1 160px; width: auto; margin-top: 0; }

.hrs-crew, .hrs-code {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  border: 1px solid var(--hrs-line); border-radius: 10px;
  padding: 0.65rem 0.9rem; margin-bottom: 0.4rem;
}
.hrs-crew-off, .hrs-code-off { opacity: 0.55; }
.hrs-crew-name { font-weight: 600; }
.hrs-crew-tag {
  display: inline-block; margin-left: 0.5rem; font-size: 0.7rem; font-weight: 400;
  color: var(--muted); border: 1px solid var(--hrs-line); border-radius: 999px; padding: 0.05rem 0.5rem;
}
.hrs-code { flex-direction: column; align-items: stretch; }
.hrs-code-ev { font-weight: 600; }
.hrs-code-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem;
  color: var(--muted); word-break: break-all; margin: 0.3rem 0 0.5rem;
  /* A long token must scroll inside its own box, never widen the page. */
  overflow-wrap: anywhere;
}
.hrs-code-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 560px) {
  .hrs-shift { align-items: flex-start; }
  .hrs-shift-right { width: 100%; justify-content: space-between; }
}