/* Supervisor app — a field tool.
 *
 * Used outdoors at a festival: one-handed, in direct sun, often with paint on
 * your hands. That drives every choice here and is why this looks nothing like
 * the admin area, which is a desktop tool used at a table.
 *
 * - Single high-contrast light scheme, NOT theme-reactive. A dark theme is
 *   actively harder to read in bright sunlight, so this commits to one look
 *   and paints every colour explicitly.
 * - System fonts only. A webfont CDN is one more thing to fail in a dead spot.
 * - Touch targets at least 48px, generously spaced.
 * - Bottom navigation, within thumb reach.
 */

:root {
  --ground:   #FFFFFF;
  --surface:  #F1F4F3;
  --sunken:   #E4EAE8;
  --ink:      #0F1513;
  --muted:    #4A5754;
  --faint:    #7C8A86;
  --rule:     #D3DCD9;
  --accent:   #0B6E4F;
  --accent-ink: #FFFFFF;
  --warn:     #A8420E;
  --warn-soft:#FDF0E8;

  --tap: 48px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  padding-bottom: calc(64px + var(--safe-b));
}

/* ---- header ---- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--accent); color: var(--accent-ink);
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 12px;
}
.appbar h1 { margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }
.appbar .sub { margin-left: auto; font-size: 0.82rem; opacity: 0.85; }

.back {
  background: none; border: none; color: inherit; font: inherit;
  min-width: var(--tap); min-height: var(--tap);
  margin: -12px 0 -12px -12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}

/* ---- offline / status strip ---- */
.strip {
  display: none; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 0.9rem; font-weight: 550;
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid var(--rule);
}
.strip.show { display: flex; }

/* ---- content ---- */
main { padding: 12px 12px 24px; }

.team {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.team.mine { border-color: var(--accent); border-width: 2px; }

.team-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  background: var(--sunken);
}
.team.mine .team-head { background: var(--accent); color: var(--accent-ink); }
.team-head .name { font-weight: 650; font-size: 1.05rem; }
.team-head .count { margin-left: auto; font-size: 0.88rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.badge-mine {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(255,255,255,0.22); padding: 3px 7px; border-radius: 4px;
}

/* ---- people ---- */
.people { list-style: none; margin: 0; padding: 0; }
.people li { border-top: 1px solid var(--rule); }
.people li:first-child { border-top: none; }

.person {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tap);
  padding: 12px 14px; background: none; border: none;
  font: inherit; color: inherit; text-align: left;
}
button.person { cursor: pointer; }
button.person:active { background: var(--sunken); }

.avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--sunken);
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 0.95rem; color: var(--muted);
}
.person .who { min-width: 0; }
.person .who .n { font-weight: 600; }
.person .who .m { font-size: 0.85rem; color: var(--muted); }
.person .chev { margin-left: auto; color: var(--faint); font-size: 1.2rem; }

.pairtag {
  display: inline-block; font-size: 0.75rem; color: var(--accent);
  background: #E3F1EB; border-radius: 4px; padding: 1px 6px; margin-top: 2px;
}

.empty { padding: 24px 14px; color: var(--muted); text-align: center; }

/* ---- notice ---- */
.notice {
  margin: 16px 12px; padding: 18px 16px;
  border: 1px solid var(--rule); border-left: 4px solid var(--warn);
  background: var(--warn-soft); border-radius: 8px;
}
.notice h2 { margin: 0 0 6px; font-size: 1rem; }
.notice p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ---- detail view ---- */
.detail { padding: 0 0 24px; }
.detail-hero { display: flex; gap: 14px; align-items: center; padding: 16px 14px; background: var(--surface); }
.detail-hero .avatar { width: 68px; height: 68px; font-size: 1.3rem; }
.detail-hero .n { font-size: 1.2rem; font-weight: 650; }

.callrow { display: flex; gap: 10px; padding: 12px 14px; }
.callrow a {
  flex: 1; min-height: var(--tap);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 10px; text-decoration: none; font-weight: 600;
}
.callrow a.alt { background: var(--sunken); color: var(--ink); }

.section-title {
  margin: 20px 14px 6px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.fields { margin: 0; padding: 0 14px; }
.fields div { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.fields dt { font-size: 0.8rem; color: var(--muted); }
.fields dd { margin: 2px 0 0; font-size: 1rem; overflow-wrap: anywhere; }

/* ---- bottom nav ---- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--ground);
  border-top: 1px solid var(--rule);
  padding-bottom: var(--safe-b);
}
.tabs a {
  flex: 1; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--muted);
  font-size: 0.72rem; font-weight: 600;
}
.tabs a .ic { font-size: 1.25rem; line-height: 1; }
.tabs a[aria-current="page"] { color: var(--accent); }

.skel { padding: 28px 14px; color: var(--faint); text-align: center; }

/* ---- timesheets ---- */
.daybar {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
.daybar::-webkit-scrollbar { display: none; }
.daybar button {
  flex: none; min-height: var(--tap); min-width: 68px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--ground); color: var(--ink); font: inherit; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15; cursor: pointer; padding: 6px 10px;
}
.daybar button .dow { font-size: 0.7rem; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; }
.daybar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.daybar button[aria-pressed="true"] .dow { color: rgba(255,255,255,0.85); }

.sheet { list-style: none; margin: 0; padding: 0; }
.sheet > li { border-bottom: 1px solid var(--rule); padding: 12px 12px 14px; }

.sheet .who-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sheet .who-row .n { font-weight: 650; }

.slot { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.slot > .lbl {
  width: 34px; flex: none; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--muted);
}
.states { display: flex; gap: 6px; flex: 1; }
.states button {
  flex: 1; min-height: var(--tap);
  border: 1.5px solid var(--rule); border-radius: 10px;
  background: var(--ground); color: var(--muted);
  font: inherit; font-size: 0.82rem; font-weight: 650; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.states button[aria-pressed="true"] { color: var(--accent-ink); border-color: transparent; }
.states button[data-s="present"][aria-pressed="true"] { background: #0B6E4F; }
.states button[data-s="late"][aria-pressed="true"]    { background: #A8710E; }
.states button[data-s="absent"][aria-pressed="true"]  { background: #A8280E; }
.states button[data-s="excused"][aria-pressed="true"] { background: #4A5754; }

.note-field {
  width: 100%; min-height: 44px; margin-top: 4px;
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 0.95rem;
  background: var(--ground); color: var(--ink); resize: vertical;
}

.syncbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(72px + var(--safe-b));
  z-index: 25; display: none;
  background: var(--ink); color: #fff; border-radius: 10px;
  padding: 10px 14px; font-size: 0.88rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
.syncbar.show { display: block; }