/* Crew timesheet — one hand-written stylesheet, no framework, no build step.
 *
 * The numbers here come from the job site, not from taste:
 *   - 56px minimum tap target: work gloves, and a phone held one-handed.
 *   - 18px base font: read at arm's length, standing up, in a hurry.
 *   - Near-black on near-white: direct August sunlight destroys low contrast.
 *   - Single column: no layout survives being read sideways on a phone.
 *   - The primary action fills the width: on the home screen there is exactly
 *     one thing to do, and it should be unmissable.
 */

:root {
  --tap: 56px;
  --ink: #10161c;
  --ink-soft: #47535e;
  --paper: #ffffff;
  --sheet: #f2f4f6;
  --line: #c2ccd4;
  --brand: #14304a;
  --brand-dark: #0c1e30;
  --go: #1c6b33;
  --go-dark: #12471f;
  --warn: #8a5000;
  --warn-sheet: #fff3d6;
  --stop: #9c1c1c;
  --stop-sheet: #fdeaea;
  --gap: 16px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 18px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--sheet);
}

/* --- chrome ------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: var(--tap);
  padding: 8px var(--gap);
  background: var(--brand);
  color: var(--paper);
  font-weight: 600;
}

.topbar-name { font-size: 18px; }
.topbar-signout { margin: 0; }

/* Admin navigation. Scrolls sideways rather than wrapping to two rows, so it
   stays one strip on a narrow phone. */
.adminbar {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  background: var(--brand-dark, #0e2337);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.adminbar::-webkit-scrollbar { display: none; }

.adminbar a {
  flex: 0 0 auto;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.adminbar a:hover,
.adminbar a:focus { background: rgba(255, 255, 255, .14); }

.linkbutton {
  min-height: var(--tap);
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--paper);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.page {
  max-width: 34rem;      /* wide enough for the admin grid's wrapper, not more */
  margin: 0 auto;
  padding: var(--gap) var(--gap) 48px;
}

.page-title { margin: 0 0 var(--gap); font-size: 26px; line-height: 1.2; }

/* --- blocks ------------------------------------------------------------- */

.card {
  margin: 0 0 var(--gap);
  padding: var(--gap);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.muted { color: var(--ink-soft); }
.big { font-size: 40px; font-weight: 700; line-height: 1.1; }
.notice { padding: var(--gap); background: var(--paper); border-left: 6px solid var(--brand); }

/* --- actions ------------------------------------------------------------ */

.btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 2px solid var(--brand);
  border-radius: 10px;
  background: var(--paper);
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  min-height: 88px;      /* the one thing to do on the home screen */
  border-color: var(--go);
  background: var(--go);
  color: var(--paper);
  font-size: 24px;
}

.btn-danger { border-color: var(--stop); color: var(--stop); }
.btn-confirm { border-color: var(--warn); background: var(--warn); color: var(--paper); }
.btn-secondary { background: var(--paper); }

.btn-row { display: flex; gap: 12px; }
.btn-row .btn { flex: 1; }

/* --- forms -------------------------------------------------------------- */

.field { margin: 0 0 var(--gap); }
.field label { display: block; margin: 0 0 6px; font-weight: 600; }

input[type="text"], input[type="time"], input[type="date"],
input[type="number"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

textarea { min-height: 88px; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Work type and reason pickers: full-width radio rows, not a cramped group. */
.choice { display: block; min-height: var(--tap); margin: 0 0 10px; }
.choice input { width: 24px; height: 24px; margin-right: 12px; vertical-align: middle; }

/* --- problems ----------------------------------------------------------- */

.problems { margin: 0 0 var(--gap); padding: var(--gap); border-radius: 10px; }
.problems-error { background: var(--stop-sheet); border: 2px solid var(--stop); }
.problems-confirm { background: var(--warn-sheet); border: 2px solid var(--warn); }
.problem-list { margin: 0 0 12px; padding-left: 20px; font-weight: 600; }
.problem-list:last-child { margin-bottom: 0; }

.flash { margin: 0 0 12px; padding: 12px var(--gap); border-radius: 8px; background: var(--paper); border-left: 6px solid var(--brand); }
.flash-ok { border-left-color: var(--go); }
.flash-warn { border-left-color: var(--warn); }
.flash-error { border-left-color: var(--stop); }

/* --- lists and badges --------------------------------------------------- */

.entry-list { margin: 0; padding: 0; list-style: none; }
.entry { padding: 12px 0; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.entry-times { font-weight: 700; }

.badge {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sheet);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
}

.badge-prevailing { background: #e6eef6; border-color: var(--brand); color: var(--brand-dark); }
.badge-open { background: var(--warn-sheet); border-color: var(--warn); color: var(--warn); }
.badge-split { background: var(--warn-sheet); border-color: var(--warn); color: var(--warn); }

.total-row { display: flex; justify-content: space-between; font-size: 22px; font-weight: 700; }

/* --- the admin grid ----------------------------------------------------- */
/* Wide by nature, so it scrolls inside its own box rather than the page. */

.grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid { border-collapse: collapse; width: 100%; background: var(--paper); }
.grid th, .grid td { padding: 8px 10px; border: 1px solid var(--line); text-align: right; white-space: nowrap; }
.grid th:first-child, .grid td:first-child { text-align: left; position: sticky; left: 0; background: var(--paper); }
.grid .approaching-ot { background: var(--warn-sheet); font-weight: 700; }
.grid .over-ot { background: var(--stop-sheet); font-weight: 700; }
.grid .missing-day { background: var(--stop-sheet); }

@media (min-width: 40rem) {
  .page { max-width: 62rem; }
  .btn { width: auto; min-width: 12rem; display: inline-block; margin-right: 12px; }
  .btn-primary { width: 100%; }
}