:root{
  --app-primary:#0B3A8F;
  --app-primary-btn:#0A84C6;
  --app-bg:#F2F4F7;
  --app-card:#FFFFFF;
  --app-success:#1FA971;
  --app-warning:#F6C343;
  --app-radius:16px;
}

.app-body{
  background: var(--app-bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.app-header{
  background: var(--app-primary);
  color: #fff;
  padding: 14px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.app-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  max-width: 920px;
  margin:0 auto;
}

.app-brand-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size: 18px;
  line-height: 1.2;
}
.app-brand-sub{
  opacity:.85;
  font-size: 12px;
}

.app-container{
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px 120px;
}

.app-card{
  background: var(--app-card);
  border-radius: var(--app-radius);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(16,24,40,.08);
  border: 1px solid rgba(16,24,40,.06);
}

.app-h1{
  font-size: 22px;
  font-weight: 800;
  margin:0 0 8px;
}
.app-h2{
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.btn-primary-cta{
  background: var(--app-primary-btn);
  border-color: var(--app-primary-btn);
  min-height: 48px;
  border-radius: 14px;
  font-weight: 700;
  width: 100%;
}

.form-control, .form-select{
  min-height: 48px;
  border-radius: 14px;
}

.app-alert{
  border-radius: 14px;
}

.app-alert-yellow{
  background: rgba(246,195,67,.22);
  border: 1px solid rgba(246,195,67,.45);
  border-radius: 14px;
  padding: 12px;
  color: #5a4300;
  font-weight: 600;
}

.fab-menu{
  position: fixed;
  right: 16px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  font-size: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--app-primary-btn);
  border-color: var(--app-primary-btn);
  box-shadow: 0 18px 35px rgba(11,58,143,.35);
  z-index: 9999;
}

.app-offcanvas{
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.scanner-box{
  border: 1px dashed rgba(11,58,143,.35);
  border-radius: 16px;
  padding: 12px;
  background: rgba(11,58,143,.03);
}

#qr-reader{
  width: 100%;
}

.mono-box{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(16,24,40,.04);
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 14px;
  padding: 12px;
  word-break: break-all;
}

.stat-card{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(16,24,40,.08);
  background: rgba(255,255,255,.7);
}
.stat-label{
  font-weight: 700;
  color: rgba(16,24,40,.65);
  font-size: 12px;
}
.stat-value{
  font-size: 28px;
  font-weight: 900;
  margin-top: 2px;
}
.stat-warn{
  background: rgba(246,195,67,.15);
}


/* Desktop: roztáhnout layout přes celou stránku */
@media (min-width: 992px){
  .app-container{
    max-width: none;     /* zruší limit 720px */
    width: 100%;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .app-header-inner{
    max-width: none;     /* zruší limit 920px */
    width: 100%;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ===== QR SCANNER - zmenšení náhledu kamery ===== */
#qr-reader {
  width: 100%;
  max-width: 520px;   /* aby to nebylo "mega široké" */
  margin: 0 auto;
}

/* video element uvnitř html5-qrcode */
#qr-reader video {
  width: 100% !important;
  height: auto !important;
  max-height: 320px;  /* desktop/tablet limit */
  object-fit: cover;  /* pěkné oříznutí */
  border-radius: 14px;
}

/* mobil = ještě menší výška náhledu */
@media (max-width: 576px){
  #qr-reader video{
    max-height: 240px;
  }
}


/* ===== Offcanvas MENU - rozumná výška mobil vs PC ===== */
@media (max-width: 991.98px){
  .app-offcanvas.offcanvas-bottom{
    height: 72vh;       /* mobil: víc do výšky */
    max-height: 72vh;
  }
}

@media (min-width: 992px){
  .app-offcanvas.offcanvas-bottom{
    height: 320px;      /* PC: menší, ať to nepřekáží */
    max-height: 320px;
  }
}