/* Stafford Family: responsive and low-cost rendering improvements */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{max-width:100%;overflow-x:hidden}
img,video,svg{max-width:100%}
img{height:auto}
button,a,input,select,textarea{touch-action:manipulation}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid #20aaff;outline-offset:2px}
.app,.main,main,.card,.grid,.panel{min-width:0}
@media(max-width:760px){
  body{font-size:14px}
  .app{display:block!important;min-width:0!important}
  .app > .main,.app > main.main{margin:0!important;width:100%!important;max-width:100%!important;padding:68px 12px 18px!important;min-width:0!important}
  .app > .side{display:flex!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(290px,85vw)!important;min-width:0!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;z-index:3002!important;padding:16px 12px!important;transform:translateX(-105%);transition:transform .22s ease!important;visibility:hidden!important;box-shadow:18px 0 45px rgba(0,0,0,.4)!important}
  body.sf-mobile-menu-open .app > .side{transform:translateX(0)!important;visibility:visible!important}
  .app > .side .logo{justify-content:flex-start!important}
  .app > .side .logo div:last-child,.app > .side .me div:last-child,.app > .side .menu a div{display:block!important}
  .app > .side .me{display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;padding:12px!important}
  .app > .side .menu a{display:grid!important;grid-template-columns:32px 1fr!important;min-height:46px!important}
  .app > .side .menu a small{display:block!important}
  .app > .main .hero{height:auto!important;min-height:110px!important;aspect-ratio:5/1;max-height:230px;overflow:hidden}
  .app > .main .hero img{width:100%!important;height:100%!important;object-fit:cover!important}
  .app > .main .grid,.app > .main .cards,.app > .main .adminlinks{grid-template-columns:minmax(0,1fr)!important}
  .app > .main .grid > *, .app > .main .cards > *{min-width:0!important}
  .app > .main .welcome{padding:14px!important}
  .app > .main .welcome h1{font-size:clamp(19px,5vw,28px)!important;overflow-wrap:anywhere}
  .app > .main .bar{flex-wrap:wrap!important;gap:8px!important}
  .app > .main footer{flex-wrap:wrap!important;gap:6px!important}
  .notif-panel{position:fixed!important;top:62px!important;left:10px!important;right:10px!important;width:auto!important;max-width:none!important;max-height:70dvh!important;z-index:3001!important}
  table{max-width:100%}
  .table-wrap,.table-container,.table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  input,select,textarea{max-width:100%;font-size:16px!important}
  button,.btn{min-height:38px}
}
.sf-mobile-toggle{display:none}
.sf-mobile-shade{display:none}
@media(max-width:760px){
 .sf-mobile-toggle{display:flex;position:fixed;z-index:3000;top:10px;left:12px;align-items:center;gap:9px;min-height:44px;padding:8px 13px;border:1px solid #17699e;border-radius:10px;color:#e9f6ff;background:#071b2c;box-shadow:0 5px 20px rgba(0,0,0,.25);cursor:pointer;font-size:14px;font-weight:700}
 .sf-mobile-toggle svg{width:21px;height:21px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
 .sf-mobile-shade{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:3001}
 body.sf-mobile-menu-open .sf-mobile-shade{display:block}
 body.sf-mobile-menu-open{overflow:hidden}
}
@media(max-width:480px){
  .app > .main,.app > main.main{padding-left:9px!important;padding-right:9px!important}
  .app > .main .hero{min-height:85px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}