/* Easy Tracking Time — web app.
   Loads the site's tokens from ../styles.css first, then dresses them as an
   app shell. Component styles (buttons, tabs, overlay/panel, fields) are
   copied from ETG's app.css — see its header note on why this is a
   deliberate, hand-kept duplication until a third app justifies extracting
   it. The calendar grid and stat tiles at the bottom are new. */

body {
  min-height: 100%;
  padding-bottom: 40px;
}

[hidden] { display: none !important; }

.app-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rim);
}

.app-header .bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  max-width: 1100px;
  margin-inline: auto;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

.app-brand img { width: 28px; height: 28px; }
.app-brand span { display: none; }
@media (min-width: 480px) { .app-brand span { display: inline; } }

.btn {
  font: inherit;
  font-size: 0.9rem;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.btn.primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn.quiet { background: transparent; }
.btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 10px;
  max-width: 1100px;
  margin-inline: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  font: inherit;
  font-size: 0.88rem;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.tab[aria-selected="true"] {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.page {
  max-width: 1100px;
  margin-inline: auto;
  padding: 18px 16px 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="email"],
textarea,
select {
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid var(--rim);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}

textarea { resize: vertical; min-height: 84px; }
.grow { flex: 1 1 220px; min-width: 0; }

.muted { color: var(--ink-soft); font-size: 0.9rem; }
.mono { font-family: var(--mono); }

/* ---------- empty state ---------- */

.empty {
  border: 1px dashed var(--rim);
  border-radius: var(--radius);
  padding: 34px 24px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  color: var(--ink-soft);
}

.empty h2 { font-size: 1.2rem; color: var(--ink); }

/* ---------- panels: today, day detail, settings ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 5, 6, 0.62);
  display: grid;
  justify-items: end;
}

.overlay[hidden] { display: none !important; }

/* The day-detail panel opens from the calendar, so on screens with room to
   spare it behaves as a split view instead of a modal: no dimmed scrim, the
   calendar stays interactive, and it visibly shifts left to make room
   rather than disappearing behind the panel. Settings/add-games overlays
   are unaffected — they stay a plain modal drawer at every width. */
@media (min-width: 860px) {
  #day-overlay {
    background: transparent;
    pointer-events: none;
  }
  #day-overlay .panel {
    pointer-events: auto;
    box-shadow: -16px 0 32px rgba(0, 0, 0, 0.18);
  }
  body.day-panel-open main.page {
    margin-right: 480px;
    transition: margin-right 0.15s ease;
  }
}

.panel {
  width: min(480px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--ground);
  border-left: 1px solid var(--rim);
  padding: 20px 20px calc(40px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 16px;
  align-content: start;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
}

.panel h2 { font-size: 1.35rem; }

.field { display: grid; gap: 7px; }

.field label,
.legend {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.chip-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: pointer;
}

.chip-btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}

.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.time-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.time-row .field { flex: 1 1 110px; }

/* A day editor with more than one entry (a mixed day) separates them with
   a rule — invisible for the common single-entry day, where there's only
   ever one of these blocks and nothing to separate. */
.entry-block + .entry-block { border-top: 1px solid var(--rim); padding-top: 14px; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  color: var(--ink);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  max-width: min(92vw, 520px);
}

.toast[hidden] { display: none !important; }

/* ---------- misc ---------- */

.stack { display: grid; gap: 14px; }
.inline-note {
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: 12px 15px;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  color: var(--ink);
}

.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
hr.sep { border: 0; border-top: 1px solid var(--rim); margin: 4px 0; }

/* ---------- today card ---------- */

.today-card {
  border: 1px solid var(--rim);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px;
  display: grid;
  gap: 22px;
}

.today-date {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
}

.today-hours {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* The hero number only on Today itself — "the Today card could be bigger,
   fitting the space" feedback, 2026-09-30. 2.4rem read as too big in
   practice, dialed back a step. Wide enough screens only: cramming this
   much larger on a phone would crowd the date next to it (.spread wraps
   there instead). */
@media (min-width: 480px) {
  #tab-today .today-hours { font-size: 1.8rem; }
}

/* The day panel's equivalent readout, under Notes rather than up top —
   see index.html. Not .today-hours: sized and colored on its own so
   Today's hero number and this compact one can be tuned independently. */
#day-hours-summary {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- calendar ---------- */

/* Vacation-left / over-under-time beside the grid rather than below it
   (iOS puts them below — screen width is the difference, web has room to
   spare beside a 7-column grid that phones don't). .page was widened
   (see its rule) specifically so this sidebar doesn't have to steal width
   from the grid itself — it used to, and the grid visibly shrank; 2026-09-30
   feedback. Stacks above the grid instead on a narrow viewport, where
   "beside" would squeeze the grid down to nothing regardless of .page's
   width.
   Plain text, no tile background/border — matching iOS's own look here,
   not the Stats tab's boxed .stat-tile, per the same feedback. */
.cal-layout {
  display: flex;
  gap: 64px;
  align-items: center;
}

.cal-stats {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}

.cal-stats .value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.cal-stats .label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

.cal-main {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .cal-layout { flex-direction: column; }
  .cal-stats { flex-direction: row; justify-content: center; flex-basis: auto; width: 100%; gap: 40px; padding-top: 0; }
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.cal-month-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  min-width: 12ch;
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-weekday {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding-bottom: 4px;
}

.cal-cell {
  font: inherit;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--rim);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
}

.cal-cell:hover { border-color: var(--accent); }
.cal-cell.empty-cell { visibility: hidden; cursor: default; }
.cal-cell.today { border-color: var(--accent); border-width: 2px; }

.cal-cell .num {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* Matches the iOS app's DayStatus colors (HistoryView.swift) exactly, so a
   day looks the same on both — work was red here until 2026-09-30, which
   read as "everything is a problem" and made the small dots hard to tell
   apart from the (also red) accent color used everywhere else in the UI.
   The whole cell is colored, no separate dot for the type — iOS's
   cellBackground doesn't draw one either, the color itself is the
   indicator. Solid, not a low-alpha wash — a wash over this app's near-
   black dark background just reads as a muddy brown/olive, nothing like
   iOS's actual vivid fill (verified 2026-09-30 side by side against the
   real app, not just eyeballed in isolation). Text goes white on the three
   saturated colors, same as iOS's own DayStatus.textColor; holiday's pale
   yellow keeps the normal (dark-mode) text color, same as iOS there too.
   Each is iOS's true color mixed with a little black — full iOS brightness
   read as slightly too bright/glary on web (2026-09-30 feedback); this
   keeps the same hues, just a shade calmer. */
.cal-cell.type-work { background: color-mix(in srgb, #0000e6 85%, black); color: #fff; }
.cal-cell.type-vacation { background: color-mix(in srgb, #ff9926 85%, black); color: #fff; }
.cal-cell.type-sick { background: color-mix(in srgb, #af52de 85%, black); color: #fff; }
.cal-cell.type-holiday { background: color-mix(in srgb, #ffcc00 85%, black); }

/* A day that mixes types (half work, half vacation): app.js sets the
   gradient itself inline, since CSS alone can't blend an arbitrary set of
   colors — this just dims it to the same "a little bit darker" level as
   the solid types above, and picks white text (the gradient always
   includes at least one saturated color). */
.cal-cell.mixed { filter: brightness(0.85); color: #fff; }

/* A day with nothing logged: matches iOS's DayStatus.dayOff/.noData exactly
   (Color.gray.opacity(0.35) / 0.12) — a weekend (day-off) reads a step more
   visible than an ordinary weekday with nothing entered yet (no-data),
   rather than both looking identical to "no color at all". No per-weekday
   work-week setting exists on the web app yet (unlike iOS/Android), so
   Saturday/Sunday stands in for "off" — their shared default work week is
   Mon-Fri anyway. */
.cal-cell.day-off { background: rgba(150, 150, 150, 0.35); }
.cal-cell.no-data { background: rgba(150, 150, 150, 0.12); }

/* Small dot for a worked day only: whether that day ran over or under its
   target, mirroring iOS's varianceDotColor. Absent when the day landed
   exactly on target. Not in the legend — iOS doesn't put this in its
   legend either, it's a detail you notice on the day itself. */
.cal-cell .dot.variance-over { width: 6px; height: 6px; border-radius: 50%; background: #2fae5a; }
.cal-cell .dot.variance-under { width: 6px; height: 6px; border-radius: 50%; background: #e0393f; }

.cal-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.cal-legend .item { display: flex; align-items: center; gap: 6px; }
.cal-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
/* Same order and same colors as iOS's own legend (HistoryView.swift):
   Work, Holiday, Sick, Vacation, Day off. */
.cal-legend .work { background: #0000e6; }
.cal-legend .holiday { background: #ffcc00; }
.cal-legend .sick { background: #af52de; }
.cal-legend .vacation { background: #ff9926; }
.cal-legend .off { background: rgba(150, 150, 150, 0.35); }

/* ---------- stats ---------- */

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rim);
  border: 1px solid var(--rim);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.stat-tile {
  background: var(--surface);
  padding: 18px 16px;
  display: grid;
  gap: 4px;
}

.stat-tile .value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.stat-tile .label {
  font-size: 0.82rem;
  color: var(--ink-soft);
}