/* Tably */
@charset "UTF-8";
:root {
	font-family: "Inter", sans-serif;
  --app-header-h: 56px;
  --app-nav-h: 65px;
  --glass-bg: rgba(18, 18, 20, 0.62);
  --glass-border: rgba(255,255,255,0.10);
  --scan-size: min(78vw, 360px);
  --scan-radius: 18px;
}
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
}
:root {
	--tblr-font-sans-serif: 'InterVariable', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}
body {font-feature-settings: "cv03", "cv04", "cv11";}
html {scroll-behavior:smooth;}

html, body { height: 100%; }

.no-scroll {
  overflow: hidden !important;
}

.page { min-height: 100vh; }

@media (max-width: 991.98px) {
  #scanner-tab .scanner-stage {
    height: calc(100vh - var(--app-header-h) - var(--app-nav-h));
  }
}

@media (max-width: 767.98px) {
  .card-responsive {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  .card-responsive .card-body {
    padding: 0.75rem;
  }
}
.min-vh-100-m{min-height: calc(100vh - var(--app-header-h) - var(--app-nav-h));}

/* ===== Scanner screen ===== */
#scanner-tab { background: #000; overflow: hidden; }

#scanner-tab .scanner-stage {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--app-header-h) - var(--app-nav-h));
  min-height: 420px;
  background: #000;
  overflow: hidden;
}

/* Fullscreen video */
#qrVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  transform-origin: center center;
  z-index: 0;
}

/* ===== Blur+dim outside scan frame (hole in the middle) ===== */
.scan-dim{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.scan-dim::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: var(--scan-size);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: var(--scan-radius);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
}

/* Top overlay */
.scanner-top {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  padding: 12px;
  padding-top: calc(12px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 7;
  pointer-events: none;
}
.scanner-top .btn { pointer-events: auto; }

.scanner-top-right { display: flex; gap: 10px; }

.btn-dark-soft {
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-dark-soft:hover {
  background: rgba(0,0,0,0.60);
  color: #fff;
}

/* Center frame */
.scanner-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
}

/* Frame */
.scan-frame {
  width: var(--scan-size);
  aspect-ratio: 1 / 1;
  border-radius: var(--scan-radius);
  position: relative;
  background: rgba(255,255,255,0.04);
  outline: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  animation: framePulse 1.8s ease-in-out infinite;
}

@keyframes framePulse {
  0%, 100% { outline-color: rgba(255,255,255,0.30); }
  50% { outline-color: rgba(255,255,255,0.55); }
}

/* Frame corners */
.scan-corners::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--scan-radius);
  background:
    linear-gradient(#fff,#fff) left 14px top 14px / 28px 4px no-repeat,
    linear-gradient(#fff,#fff) left 14px top 14px / 4px 28px no-repeat,
    linear-gradient(#fff,#fff) right 14px top 14px / 28px 4px no-repeat,
    linear-gradient(#fff,#fff) right 14px top 14px / 4px 28px no-repeat,
    linear-gradient(#fff,#fff) left 14px bottom 14px / 28px 4px no-repeat,
    linear-gradient(#fff,#fff) left 14px bottom 14px / 4px 28px no-repeat,
    linear-gradient(#fff,#fff) right 14px bottom 14px / 28px 4px no-repeat,
    linear-gradient(#fff,#fff) right 14px bottom 14px / 4px 28px no-repeat;
  opacity: .92;
}

/* Scan line */
.scan-line{
  position: absolute;
  left: 14px;
  right: 14px;
  height: 3px;
  top: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.90);
  box-shadow: 0 0 18px rgba(255,255,255,0.35);
  opacity: .95;
  animation: scanLine 1.9s linear infinite;
}

@keyframes scanLine{
  0%   { top: 14px; opacity: .15; }
  10%  { opacity: .85; }
  50%  { opacity: .85; }
  90%  { opacity: .85; }
  100% { top: calc(100% - 14px - 3px); opacity: .15; }
}

.scan-frame{
  overflow: hidden;
}

/* Hint bubble */
.scanner-hint {
  padding-bottom: calc(12px + var(--app-nav-h) + env(safe-area-inset-bottom));
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* Bottom overlay */
.scanner-bottom {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  padding-bottom: 1rem;
  z-index: 7;
  pointer-events: none;
}
.scanner-bottom > * { pointer-events: auto; }

/* ===== Bottom sheet ===== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,0.55);
  display: grid;
  align-items: end;
}

.sheet {
  width: 100%;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 10px 12px 16px 12px;
  box-shadow: 0 -16px 40px rgba(0,0,0,0.25);
  transform: translateY(0);
  animation: sheetIn .18s ease-out;
  margin-bottom: 85px;
  will-change: transform;
  touch-action: none;
}

.sheet.is-animating {
  transition: transform .18s ease-out;
}

.sheet, .sheet * {
  user-select: none;
}

@keyframes sheetIn {
  from { transform: translateY(20px); opacity: .5; }
  to   { transform: translateY(0); opacity: 1; }
}

.sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  margin: 6px auto 10px auto;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 10px 2px;
}

.sheet-title { font-weight: 800; font-size: 14px; }
.sheet-body { padding: 2px; }

@media (max-width: 768px) {
  .app-page .container-fluid { padding-bottom: 16px; }
}

/* ===== Notyf ===== */
.notyf {
  z-index: 9999;
}

.notyf__toast--muted {
  background: rgba(120, 120, 120, 0.95);
}

.notyf__toast {
  border-radius: 12px;
}