/* Minimal; Tailwind CDN carries the rest. Big tap targets, no accidental zoom. */
input, button, select { font-size: 16px; } /* iOS: 16px prevents focus zoom */
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }

/* Warm the default Tailwind border + divide colour (cold gray -> sand line). */
*, ::before, ::after { border-color: #e7e2da; }

/* Stable, tabular digits for counters and reports (idea 6). */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --- Status badges: one shape, colour dot + label, calm semantics (idea 1). --- */
.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  border-radius: 9999px; padding: .1875rem .5rem;
  font-size: .75rem; line-height: 1rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-dot { width: .5rem; height: .5rem; border-radius: 9999px; flex: none; }
.badge-ready   { background: #e3f3e8; color: #1e7a43; } .badge-ready .badge-dot   { background: #2e9e5b; }
.badge-clean   { background: #fbecd6; color: #9a5b12; } .badge-clean .badge-dot   { background: #e08a2b; }
.badge-guest   { background: #e2ecf5; color: #2c5a86; } .badge-guest .badge-dot   { background: #3f7cb8; }
.badge-arrival { background: #fbecd6; color: #9a5b12; border-color: #e08a2b; } .badge-arrival .badge-dot { background: #e08a2b; }
.badge-fault   { background: #fbe4e2; color: #b02a1f; } .badge-fault .badge-dot   { background: #d23b2c; }

/* --- Bottom navigation: icon + label, active = brand, >=44px tap target (idea 2). --- */
.navbar { background: #ffffff; border-top: 1px solid #e7e2da; }
.navitem {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px; padding: 6px 0;
  color: #6b7a77; font-size: .6875rem; font-weight: 500; text-decoration: none;
}
.navitem svg { width: 22px; height: 22px; }
.navitem.active { color: #0f766e; }
.navitem.active svg { color: #0f766e; }

/* --- Button hierarchy: one dominant primary per step, rest outlined (idea 3). --- */
.btn-primary {
  display: block; width: 100%; text-align: center;
  background: #0f766e; color: #fff; font-weight: 600;
  border-radius: .75rem; padding: 1rem; font-size: 1.125rem; border: 1px solid #0f766e;
}
.btn-success {
  display: block; width: 100%; text-align: center;
  background: #1e7a43; color: #fff; font-weight: 600;
  border-radius: .75rem; padding: 1rem; font-size: 1.125rem; border: 1px solid #1e7a43;
}
.btn-secondary {
  display: block; width: 100%; text-align: center;
  background: #fff; color: #1c2b2a; font-weight: 600;
  border-radius: .75rem; padding: .875rem; font-size: 1rem; border: 1px solid #e7e2da;
}
.btn-ghost-fault {
  display: block; width: 100%; text-align: center;
  background: #fff; color: #b02a1f; font-weight: 600;
  border-radius: .75rem; padding: .75rem; font-size: 1rem; border: 1px solid #f1c4bf;
}
[x-cloak]{display:none!important}