/* Ebenezer Methodist Academy responsive compatibility layer. */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
main,.card,.toolbar,.formgrid,.grid,.receipt-grid{min-width:0}
.table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table table{width:100%;min-width:720px;border-collapse:collapse}
input,select,textarea{max-width:100%}
textarea{resize:vertical}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.toolbar form,.toolbar label{min-width:0}
.btn,button,input[type="submit"]{min-height:42px;touch-action:manipulation}
.header-actions{display:flex;align-items:center;gap:8px;min-width:0}
.brand{min-width:0}
.brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt-watermarked{position:relative;isolation:isolate;overflow:hidden}
.receipt-watermarked>.receipt-watermark{position:absolute;z-index:-1;left:50%;top:50%;width:min(58%,420px);max-height:none;transform:translate(-50%,-50%);opacity:.065;filter:grayscale(15%);pointer-events:none}
.receipt-content{position:relative;z-index:1}

@media (max-width:800px){
 body{font-size:15px}
 header{display:flex;align-items:center;gap:8px;padding:10px 12px}
 .brand{flex:1}
 .brand-logo{max-width:42px;max-height:42px}
 .user-menu,.icon-btn em{display:none}
 main.logged{width:100%!important;max-width:100%!important;margin-left:0!important;padding:12px!important}
 main>h1{font-size:1.55rem;line-height:1.2}
 .card{padding:14px!important;border-radius:12px}
 .formgrid,.grid,.grid.two,.grid.stats,.receipt-grid{grid-template-columns:minmax(0,1fr)!important}
 .formgrid>*,.grid>*{min-width:0}
 input,select,textarea{width:100%;font-size:16px!important}
 .btn,button,input[type="submit"]{min-height:44px}
 .toolbar{align-items:stretch}
 .toolbar>form,.toolbar>label{width:100%}
 .toolbar>form{display:flex;flex-wrap:wrap;gap:8px}
 .toolbar>form>*{flex:1 1 160px}
 .table table{min-width:640px}
 .receipt-watermarked>.receipt-watermark{width:min(72%,320px)}
 main::before{inset:78px 0 25px!important;background-size:240px auto!important}
}

@media (max-width:480px){
 .brand b{font-size:.9rem}
 .card{padding:12px!important}
 .toolbar>.btn,.toolbar>button{width:100%;justify-content:center;text-align:center}
 .table table{min-width:600px}
}

@media print{
 html,body{overflow:visible!important}
 header,nav,footer,.no-print,.menu-toggle{display:none!important}
 main,main.logged{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
 .table{overflow:visible!important}
 .table table{min-width:0!important}
 .card{box-shadow:none!important;break-inside:avoid}
 .receipt-watermarked{overflow:visible!important}
 .receipt-watermarked>.receipt-watermark{position:fixed;width:360px;opacity:.08;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}