/* Small additions on top of SB Admin 2 — mostly making it work properly on
   a phone, which is where most of the checking-in happens. */

.pill {
  font-size: .75rem; font-weight: 700; padding: .25rem .6rem; border-radius: 10rem;
  letter-spacing: .02em; white-space: nowrap;
}
.pill-up      { background: #e3f4ec; color: #17795e; }
.pill-down    { background: #fdecea; color: #b02a1c; }
.pill-unknown { background: #eceef1; color: #5a6270; }

.dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.5rem; flex:none; }
.dot-up { background:#1cc88a; } .dot-down { background:#e74a3b; } .dot-unknown { background:#b7bcc4; }

.svc-row { display:flex; align-items:center; padding:.7rem .25rem; border-bottom:1px solid #edeff2; }
.svc-row:last-child { border-bottom:0; }
.svc-name { font-weight:600; font-size:.92rem; }
.svc-note { font-size:.78rem; color:#858796; }
.svc-meta { margin-left:auto; text-align:right; font-size:.75rem; color:#858796; white-space:nowrap; padding-left:.5rem; }

/* Tap targets. Bootstrap 4's default buttons are under the 44px Apple/Google
   guidance, which matters when the person using this is on a sofa. */
@media (max-width: 767.98px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .form-control { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming on focus */
  .card-body { padding: 1rem; }
  .h3, h3 { font-size: 1.35rem; }
  .topbar .navbar-nav .nav-item { align-items: center; }
}

/* Any table wide enough to overflow scrolls in its own box rather than
   pushing the page sideways. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.field-set   { color:#17795e; font-weight:600; }
.field-unset { color:#b7bcc4; }

.step-list { counter-reset: step; list-style: none; padding-left: 0; }
.step-list li {
  counter-increment: step; position: relative; padding-left: 2.4rem;
  margin-bottom: .85rem; font-size: .9rem; line-height: 1.55;
}
.step-list li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #4e73df; color: #fff; font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.login-shell { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:#f8f9fc; }
.login-card { width:100%; max-width:400px; }