/* Primrose Sign In/Out — high-contrast, big touch targets, old-Safari-safe.
   Flexbox only (no CSS grid), no custom-property fallbacks required. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: #101014; color: #f2f2f5;
  -webkit-text-size-adjust: 100%;
}
a { color: #ff5aa8; text-decoration: none; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #17171d; border-bottom: 1px solid #2a2a33;
  position: sticky; top: 0; z-index: 5;
}
.topbar .site { font-size: 18px; font-weight: 700; }
.topbar .site small { display:block; font-weight:400; color:#9a9aa5; font-size:12px; }
.topbar .right { display: flex; align-items: center; }
.clock { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 14px; }
.badge { font-size: 13px; color:#9a9aa5; }
.badge b { color:#4ade80; }

/* ---- staff grid (pad) ---- */
.grid { display: flex; flex-wrap: wrap; padding: 10px; }
.tile {
  width: 25%; padding: 6px;   /* 4 per row on iPad landscape */
}
@media (max-width: 700px) { .tile { width: 33.33%; } }
@media (max-width: 480px) { .tile { width: 50%; } }
.tile-inner {
  background: #1e1e26; border: 2px solid #2a2a33; border-radius: 16px;
  padding: 16px 10px; text-align: center; min-height: 108px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: background .1s, border-color .1s;
  cursor: pointer;  /* also makes iOS treat the tile as tappable */
}
.tile-inner:active { background: #262630; }
.tile.on .tile-inner { border-color: #4ade80; background: #16281c; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; background: #33333f;
  color: #cfcfd8; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.tile.on .avatar { background: #4ade80; color: #06340f; }
.tile .nm { font-size: 15px; font-weight: 600; line-height: 1.15; }
.tile .st { font-size: 12px; margin-top: 4px; color: #9a9aa5; }
.tile.on .st { color: #4ade80; font-weight: 700; }

/* ---- PIN-first IN/OUT screen ---- */
.io-wrap {
  display: flex; padding: 18px; gap: 18px;
  height: calc(100vh - 130px); min-height: 320px;
}
@media (max-width: 640px) { .io-wrap { flex-direction: column; } }
.io {
  flex: 1; border: 0; border-radius: 26px; color: #fff; cursor: pointer;
  font-size: 64px; font-weight: 900; letter-spacing: 2px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
}
.io .dot { font-size: 40px; margin-right: 16px; opacity: .9; }
.io.in  { background: #16a34a; }
.io.out { background: #dc2626; }
.io:active { transform: scale(.99); opacity: .92; }
.io-help { text-align: center; padding: 0 16px 18px; margin: 0; }
.io-help .link-btn, .io-help a.link-btn { margin: 0 10px; }

/* enrol name grid */
.card.wide { max-width: 640px; }
.name-grid { display: flex; flex-wrap: wrap; justify-content: center; margin: 8px 0 14px; max-height: 56vh; overflow-y: auto; }
.name-btn {
  background: #2a2a33; color: #f2f2f5; border: 0; border-radius: 12px;
  padding: 14px 16px; margin: 5px; font-size: 16px; font-weight: 600; cursor: pointer;
}
.name-btn:active { background: #363642; }
.name-btn.done { opacity: .45; }
.name-btn small { color: #4ade80; font-weight: 700; }
.name-search { width: 100%; margin-bottom: 12px; font-size: 18px; }
.addform { text-align: left; margin: 6px 0 14px; }
.addform input { width: 100%; margin-bottom: 10px; }
#addNew { margin-bottom: 14px; }

/* ---- modal (confirm / PIN) ---- */
.overlay {
  position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.7);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.overlay.show { display: flex; }
.card {
  background: #1e1e26; border-radius: 20px; padding: 24px; width: 100%; max-width: 380px;
  text-align: center;
}
.card h2 { margin: 0 0 6px; font-size: 24px; }
.card .who { color:#9a9aa5; margin-bottom: 18px; }
.big-btn {
  display: block; width: 100%; border: 0; border-radius: 14px; padding: 20px;
  font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 12px; cursor: pointer;
}
.big-btn.in  { background: #16a34a; }
.big-btn.out { background: #dc2626; }
.big-btn:active { opacity: .85; }
.link-btn { background: none; border: 0; color: #9a9aa5; font-size: 16px; padding: 10px; cursor: pointer; }

/* PIN pad */
.pin-dots { font-size: 34px; letter-spacing: 10px; height: 40px; margin: 6px 0 14px; }
.keys { display: flex; flex-wrap: wrap; }
.key { width: 33.33%; padding: 5px; }
.key button {
  width: 100%; padding: 18px 0; font-size: 26px; font-weight: 700; border-radius: 12px;
  border: 0; background: #2a2a33; color: #f2f2f5; cursor: pointer;
}
.key button:active { background: #363642; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #16a34a; color: #fff; padding: 14px 26px; border-radius: 40px;
  font-size: 18px; font-weight: 700; z-index: 60; display: none; max-width: 92%;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.toast.show { display: block; }
.toast.err { background: #dc2626; }
.toast.out { background: #dc2626; }

.offline-flag {
  position: fixed; top: 0; left: 0; right: 0; background:#b45309; color:#fff;
  text-align:center; font-size:13px; padding:4px; z-index:40; display:none;
}
.offline-flag.show { display:block; }

/* ---- board / fire ---- */
.board { padding: 20px; }
.board h1 { font-size: 40px; margin: 0 0 4px; }
.count-hero { font-size: 96px; font-weight: 900; line-height: 1; margin: 10px 0; color:#4ade80; }
.board .site { color:#9a9aa5; font-size: 20px; }
.people { display:flex; flex-wrap: wrap; margin-top: 20px; }
.person { width: 33.33%; padding: 8px; }
.person-inner { background:#1e1e26; border-radius:14px; padding:14px 16px; }
.person .nm { font-size: 20px; font-weight: 700; }
.person .meta { color:#9a9aa5; font-size: 14px; margin-top: 4px; }
.empty { color:#9a9aa5; font-size: 20px; margin-top: 30px; }

/* fire register – printable, light */
.fire { background:#fff; color:#111; }
.fire .hdr { background:#dc2626; color:#fff; padding: 18px 22px; }
.fire h1 { margin:0; font-size: 30px; }
.fire .sub { font-size: 15px; opacity:.9; }
.fire table { width: 100%; border-collapse: collapse; }
.fire th, .fire td { text-align:left; padding: 10px 12px; border-bottom: 1px solid #ddd; font-size: 16px; }
.fire th { background:#f3f3f3; }
.fire .num { font-size: 22px; font-weight: 800; padding: 14px 22px; }
.fire .actions { padding: 14px 22px; }
.btn {
  display:inline-block; background:#ff5aa8; color:#fff; border:0; border-radius:10px;
  padding: 12px 20px; font-size:16px; font-weight:700; cursor:pointer; margin-right:8px;
}
.btn.grey { background:#2a2a33; }
@media print {
  .fire .actions, .no-print { display: none !important; }
  .fire { color:#000; }
}

/* ---- admin ---- */
.wrap { max-width: 1000px; margin: 0 auto; padding: 16px; }
.admin-nav { display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 20px; }
.panel { background:#1e1e26; border-radius:14px; padding:18px; margin-bottom:18px; }
.panel h3 { margin:0 0 12px; }
label { display:block; font-size:13px; color:#9a9aa5; margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=date], select {
  width:100%; padding:12px; border-radius:10px; border:1px solid #33333f;
  background:#101014; color:#f2f2f5; font-size:16px;
}
.row { display:flex; flex-wrap:wrap; margin: 0 -6px; }
.row > div { padding: 0 6px; flex: 1; min-width: 160px; }
table.data { width:100%; border-collapse: collapse; }
table.data th, table.data td { padding:10px; border-bottom:1px solid #2a2a33; text-align:left; font-size:14px; }
table.data th { color:#9a9aa5; font-weight:600; }
.pill { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; font-weight:700; }
.pill.on { background:#16281c; color:#4ade80; }
.pill.off { background:#2a2a33; color:#9a9aa5; }
.pill.hr { background:#1e2a3a; color:#7dd3fc; }
.flash { padding:12px 16px; border-radius:10px; margin-bottom:12px; font-weight:600; }
.flash.ok { background:#16281c; color:#4ade80; }
.flash.error { background:#3a1620; color:#fca5a5; }
.muted { color:#9a9aa5; font-size:13px; }
.inline { display:inline; }
.login-wrap { max-width: 360px; margin: 12vh auto; padding: 16px; }