/* Mobile-first tweaks on top of Bootstrap 5 (FR-049).
   Goal: touch-friendly targets, no horizontal page scroll on phones. */

:root {
  --bt-touch-target: 44px;
}

html,
body {
  overflow-x: hidden;
}

/* Comfortable tap targets for the controls the owner uses constantly. */
.btn,
.form-control,
.form-select {
  min-height: var(--bt-touch-target);
}

.btn-sm {
  min-height: 36px;
}

/* Numbers read better right-aligned and tabular so columns line up. */
.amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Wide tables scroll inside their own container rather than the page. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.stat-card .stat-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Empty states: descriptive, with room for a call to action (FR-050). */
.empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
}

.empty-state .empty-icon {
  font-size: 2rem;
  opacity: 0.5;
}

/* HTMX request feedback (FR-050 loading states). */
.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Sticky action bar so "save" stays reachable on small screens. */
@media (max-width: 575.98px) {
  .form-actions {
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg);
    padding: 0.75rem 0;
    border-top: 1px solid var(--bs-border-color);
    z-index: 5;
  }
}

/* ---------------------------------------------------------------------------
   Theme switch
   --------------------------------------------------------------------------- */

/* Both icons ship in the markup; only the one matching the current theme is
   shown, so switching is instant and needs no re-render. */
.theme-toggle-icon {
  display: none;
  line-height: 1;
}

[data-bs-theme="light"] .theme-toggle-icon[data-theme-icon="to-dark"],
[data-bs-theme="dark"] .theme-toggle-icon[data-theme-icon="to-light"] {
  display: inline;
}

.theme-toggle {
  /* Square, so the button does not resize as the icon glyph changes. */
  min-width: var(--bt-touch-target);
  padding-inline: 0.5rem;
}

/* Login, MFA and first-run setup have no navbar to hang the button on. */
.theme-toggle-floating {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
}

/* ---------------------------------------------------------------------------
   Dark theme adjustments
   --------------------------------------------------------------------------- */

/* The QR code is read by a camera, which expects dark-on-light. Keep its plate
   white in both themes and give it a light border so it does not float. */
[data-bs-theme="dark"] .qr-plate {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* `text-bg-light` badges keep a light background in dark mode, so force the
   pairing back to a readable one. */
[data-bs-theme="dark"] .badge.text-bg-light {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}