/* Responsive UI layer */
:root{--brand:#15549a;--ink:#17243a;--muted:#64748b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#f4f7fb;color:var(--ink);min-width:320px}
main{min-height:calc(100vh - 130px)}
.navbar-brand{max-width:min(72vw,520px);font-size:clamp(.95rem,2.5vw,1.2rem)}
.navbar .nav-link{border-radius:8px}
.navbar .nav-link:hover,.navbar .nav-link:focus{background:rgba(255,255,255,.14);color:#fff}
.card{border:0;border-radius:14px;box-shadow:0 5px 20px rgba(24,48,84,.07);min-width:0}
.card h2,.card h3,.card h4{overflow-wrap:anywhere}
.stat{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;line-height:1.15}
.scan-result{border-radius:14px;padding:clamp(16px,4vw,22px);text-align:center;font-weight:800;font-size:clamp(1rem,3vw,1.3rem);overflow-wrap:anywhere}
.accepted{background:#e5f7ed;color:#147a43;border:2px solid #35a66b}
.rejected{background:#fdebec;color:#b42332;border:2px solid #dc5964}
.pending{background:#fff6df;color:#885d00;border:2px solid #e8bd4a}
.qr-box{background:white;padding:14px;border-radius:12px;display:inline-block;max-width:100%}
#reader{width:100%;max-width:100%;overflow:hidden}
#reader video{width:100%!important;height:auto!important;object-fit:cover;border-radius:10px}
#reader__scan_region{min-height:180px}
.table-responsive{border-radius:10px}
.table{vertical-align:middle;margin-bottom:0}
.table thead th{white-space:nowrap;background:#f1f5f9}
.form-control,.form-select,.btn{min-height:42px}
.form-control:focus,.form-select:focus{border-color:#6ca1d6;box-shadow:0 0 0 .2rem rgba(21,84,154,.14)}
.btn{white-space:normal}
.alert{overflow-wrap:anywhere}
@media(max-width:767.98px){
 main{padding-left:12px!important;padding-right:12px!important}
 .card{border-radius:12px}
 .navbar .container-fluid{padding-left:14px;padding-right:14px}
 .navbar-collapse{max-height:calc(100vh - 70px);overflow-y:auto}
 .navbar-nav .nav-link{padding:.65rem .8rem}
 .navbar-nav .btn{margin-left:0!important;align-self:flex-start}
 .table{font-size:.86rem}
 .table td,.table th{padding:.55rem .5rem}
 #reader__scan_region{min-height:150px}
 .qr-box canvas,.qr-box img{max-width:100%;height:auto}
}
@media(max-width:575.98px){
 h1,.h1{font-size:1.65rem}h2,.h2{font-size:1.4rem}
 h3,.h3{font-size:1.2rem}
 .stat{font-size:1.6rem}
 .d-flex.justify-content-between{gap:.75rem;flex-wrap:wrap}
 .d-flex.justify-content-between>*{max-width:100%}
 .scan-result{padding:16px 10px}
 .card.p-4{padding:1rem!important}
 .btn{font-size:.92rem}
}
@media print{
 nav,button,.no-print{display:none!important}
 body{background:white}
 main{max-width:100%!important;padding:0!important}
 .card{box-shadow:none;border:1px solid #ccc}
}