/* Coastal Glassy Deluxe, adapted for a phone held in a gloved hand:
   bigger touch targets, one column, no hover-only affordances. */
:root {
  --navy: #1A3A5C;
  --blue: #0e86c9;
  --blue-deep: #0a6ba0;
  --orange: #f2801e;
  --text: #2d4356;
  --muted: #7a8ea0;
  --border: #d9e4ec;
  --danger: #E8524F;
  --success: #1b8a4b;
  --glass: rgba(255,255,255,0.78);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, #dceaf5, #e8f2f8 45%, #eef5ea) fixed;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.8);
  position: sticky; top: 0; z-index: 10;
}
/* The app's own icon, shown in the header so the logo is visible inside the
   app and not only on the home screen. Replaces the CSS wordmark that used to
   sit here — both together repeated the same thing. */
.logo-mark { border-radius: 9px; flex-shrink: 0; display: block; width: 36px; height: 36px; }
.topbar-text { flex: 1; min-width: 0; }
.topbar-title { font-size: 14px; font-weight: 800; color: var(--navy); }
.topbar-sub { font-size: 11px; color: var(--muted); }
.offline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }

.screen { padding: 14px; max-width: 620px; margin: 0 auto; }
.card {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 16px; padding: 16px; margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(90,128,152,0.1);
}
h1 { font-size: 19px; margin: 0 0 6px; color: var(--navy); }
.sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }

label { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy); margin: 14px 0 6px; }
label:first-of-type { margin-top: 0; }
.req { color: var(--danger); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px;   /* 16px stops iOS zooming on focus */
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--text);
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

.btn {
  display: block; width: 100%; margin-top: 14px;
  font: inherit; font-size: 16px; font-weight: 700;
  padding: 15px 18px; border-radius: 13px; border: none; cursor: pointer;
  min-height: 52px;  /* comfortable with gloves */
  transition: transform 0.12s ease-out, box-shadow 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; box-shadow: 0 6px 16px rgba(14,134,201,0.32); }
.btn.ghost { background: rgba(255,255,255,0.85); color: var(--navy); border: 1px solid var(--border); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.55; }
.link { background: none; border: none; color: var(--blue); font: inherit; font-size: 14px; padding: 6px 0; cursor: pointer; }

.greeting { padding: 4px 4px 14px; }
.greeting-name { font-size: 20px; font-weight: 800; color: var(--navy); }
.greeting-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  border: none; border-radius: 18px; padding: 18px 10px;
  font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.3;
  color: #fff; cursor: pointer; min-height: 112px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 20px rgba(90,128,152,0.18);
  transition: transform 0.14s ease-out;
}
.tile:active { transform: scale(0.95); }
.tile-icon { font-size: 30px; line-height: 1; }
.tile.hazard { background: linear-gradient(140deg, #f2801e, #d96a10); }
.tile.nearmiss { background: linear-gradient(140deg, #E8524F, #c0392b); }
.tile.inspection { background: linear-gradient(140deg, #0e86c9, #0a6ba0); }
.tile.observation { background: linear-gradient(140deg, #1A3A5C, #0d2847); }

.form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kind-chip { font-size: 12px; font-weight: 800; color: var(--blue-deep); background: rgba(14,134,201,0.12); padding: 6px 12px; border-radius: 999px; }

.photo-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.photo-thumb { position: relative; width: 76px; height: 76px; border-radius: 11px; overflow: hidden; border: 1px solid var(--border); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb button {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}

.msg { font-size: 13.5px; margin-top: 12px; line-height: 1.5; }
.msg.ok { color: var(--success); font-weight: 700; }
.msg.err { color: var(--danger); font-weight: 700; }
.msg.info { color: var(--muted); }

.outbox {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #fff4e0; border: 1px solid #f0c98a; color: #8a5a10;
  font-size: 13.5px; font-weight: 600;
}

.mine-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.mine-row:last-child { border-bottom: none; }
.mine-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mine-date { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mine-desc { font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
.pill { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; }
.pill.new { background: rgba(14,134,201,0.15); color: var(--blue-deep); }
.pill.approved { background: rgba(27,138,75,0.15); color: var(--success); }
.pill.rejected { background: rgba(232,82,79,0.15); color: var(--danger); }
.pill.pending { background: rgba(122,142,160,0.18); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .btn, .tile { transition: none; }
  .btn:active, .tile:active { transform: none; }
}

/* ---- Report / record tiles ---- */
.tile.ptw { background: linear-gradient(140deg, #c0392b, #96281b); }
.tile.tbt { background: linear-gradient(140deg, #16a085, #0e6655); }
.tile.wsm { background: linear-gradient(140deg, #2980b9, #1f618d); }
.tile.mcm { background: linear-gradient(140deg, #8e44ad, #6c3483); }
.tile.trn { background: linear-gradient(140deg, #d68910, #9c640c); }

/* Attendance picker: a long list on a small screen, so it scrolls in its own
   box rather than pushing the Send button off the bottom of the form. */
.att-count { font-weight: normal; color: var(--blue-deep); }
.att-tools { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.att-tools input { flex: 1; }
.att-tools .btn { width: auto; margin-top: 0; padding: 11px 14px; min-height: 44px; font-size: 14px; }
.att-list {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 12px; background: #fff; -webkit-overflow-scrolling: touch;
}
.att-row {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); cursor: pointer; min-height: 52px;
}
.att-row:last-child { border-bottom: none; }
.att-row input { width: 21px; height: 21px; flex-shrink: 0; accent-color: var(--blue); }
.att-row .att-name { font-size: 14.5px; font-weight: 600; }
.att-row .att-role { font-size: 11.5px; color: var(--muted); }

/* ---- added for the email-only app ------------------------------------- */
.req { color: var(--danger); }
.hint { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.foot { display: flex; justify-content: space-between; align-items: center;
        padding: 4px 4px 18px; font-size: 11.5px; color: var(--muted); }
.att-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--border);
            border-radius: 12px; margin-top: 6px; }
.att-tools { display: flex; gap: 6px; margin-top: 6px; }
.att-tools input { flex: 1; margin: 0; }
.att-count { font-weight: 400; color: var(--muted); font-size: 11.5px; }

.setup-warning { margin: 20px; }

/* The clipboard escape hatch under the send button — deliberately quieter than
   the primary action, since it is the fallback and not the normal path. */
.btn.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  margin-top: 10px;
  font-weight: 600;
}
.btn.ghost:active { background: rgba(0, 0, 0, 0.04); }
.copy-fallback {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 160px;
  font-size: 12px;
  font-family: ui-monospace, Menlo, monospace;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
}