/* ── Zmienne ─────────────────────────────────────────────────────────── */
:root {
  --bottom-nav-h: 60px;
  --primary: #1565c0;
}

/* ── Ogólne ──────────────────────────────────────────────────────────── */
body {
  background: #f5f6fa;
  padding-top: env(safe-area-inset-top, 0px);
  -webkit-tap-highlight-color: transparent;
}

.main-content {
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
}

/* ── Navbar ──────────────────────────────────────────────────────────── */
.navbar {
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
}

/* ── Dolna nawigacja ─────────────────────────────────────────────────── */
.bottom-nav {
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1030;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 6px 4px;
  text-decoration: none;
  color: #757575;
  font-size: 10px;
  line-height: 1;
  gap: 3px;
  transition: color 0.15s;
  min-width: 0;
}

.bottom-nav-item i {
  font-size: 22px;
  line-height: 1;
}

.bottom-nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bottom-nav-item.active {
  color: var(--primary);
}

.bottom-nav-item.scan-btn {
  color: #fff;
  background: var(--primary);
  border-radius: 12px;
  margin: 6px 4px;
  padding: 4px 12px;
  font-size: 9px;
}

/* ── Karty umów ──────────────────────────────────────────────────────── */
.contract-card {
  transition: transform 0.1s, box-shadow 0.1s;
  cursor: pointer;
}

.contract-card:active {
  transform: scale(0.985);
  box-shadow: none !important;
}

/* ── Skaner QR ───────────────────────────────────────────────────────── */
#scanner-wrap {
  min-height: 260px;
  background: #111;
}

.scan-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: #fff;
  border-style: solid;
}
.scan-corner.tl { top: 0; left: 0;  border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.scan-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.scan-corner.bl { bottom: 0; left: 0;  border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.scan-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

.scan-line {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00e676, transparent);
  animation: scanmove 1.8s ease-in-out infinite;
}

@keyframes scanmove {
  0%   { top: 10px;  opacity: 1; }
  50%  { top: calc(100% - 12px); opacity: 1; }
  100% { top: 10px;  opacity: 1; }
}

/* ── Strona logowania ────────────────────────────────────────────────── */
.login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--primary);
  border-radius: 20px;
  color: #fff;
  font-size: 2.2rem;
  box-shadow: 0 4px 16px rgba(21,101,192,.35);
}

/* ── Karty statystyk ─────────────────────────────────────────────────── */
.card {
  border-radius: 12px;
}

/* ── Przycisk QR na liście ───────────────────────────────────────────── */
@media (max-width: 400px) {
  .navbar-brand { font-size: 0.9rem; }
}

/* ── Overflow helper ─────────────────────────────────────────────────── */
.min-w-0 { min-width: 0; }
.overflow-x-auto { overflow-x: auto; }