/* Device Audit — overrides on top of Bootstrap 5.3 (vendored).
   Everything here leans on Bootstrap's CSS variables so light/dark
   (data-bs-theme) just works. No build step. */

:root {
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
}
[data-bs-theme="dark"] {
  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-link-color: #a5b0ff;
  --bs-link-color-rgb: 165, 176, 255;
  --bs-link-hover-color: #c7ceff;
}

/* Bootstrap's .btn-primary is generated from Sass, so re-point it here. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: var(--bs-link-hover-color);
  --bs-btn-active-bg: var(--bs-link-hover-color);
  --bs-btn-active-border-color: var(--bs-link-hover-color);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b0e16; --bs-btn-hover-color: #0b0e16; --bs-btn-active-color: #0b0e16; }

body { -webkit-tap-highlight-color: transparent; }
a, button, .btn, input, select, textarea, label, .status-btn { touch-action: manipulation; }

/* ---- brand mark ---------------------------------------------- */

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, #4f46e5, #4338ca);
}
.brand-mark svg { width: 16px; height: 16px; display: block; }

/* ---- theme toggle (fixed, thumb-reachable) ----------------- */

.theme-toggle {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 1050;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: grid;
  place-items: center;
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: none; }
[data-bs-theme="dark"] .theme-toggle .i-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .i-moon { display: block; }

/* ---- scan screen (touch) --------------------------------- */

.scan-input {
  font-family: var(--bs-font-monospace);
  font-size: 1.6rem;
  letter-spacing: .18em;
  text-align: center;
  padding-block: 1.1rem;
}

/* ---- device screen -------------------------------------- */

.device-serial { font-family: var(--bs-font-monospace); letter-spacing: .02em; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .9rem;
}
.status-btn {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bs-emphasis-color);
  background: var(--bs-body-bg);
  border: 1.5px solid var(--bs-border-color);
  border-radius: 1rem;
  transition: transform .1s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, background-color .15s ease;
}
.status-btn:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  box-shadow: 0 .5rem 1rem rgba(var(--bs-primary-rgb), .16);
  transform: translateY(-2px);
}
.status-btn:active {
  transform: scale(.97);
  color: #fff;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}
.status-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .4);
}

@media (max-width: 575.98px) {
  .status-grid { grid-template-columns: 1fr 1fr; }
}

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