/* INFO: app */
#app{--header-height: 100px;--footer-height: 60px;}

@media only screen and (max-width: 1366px){
    #app {--header-height: 80px;}
}
@media only screen and (max-width: 768px){
    #app {--header-height: 60px;}
}



body:not(.support-install) .support-install-required{display: none;}

#app-content > .content{display: flex;flex-direction: column;gap: var(--gap-lg);background-color: var(--color-background-dark);min-height: calc(100vh - var(--header-height) - var(--footer-height));padding-bottom: var(--footer-height);}
#app-content > .content > section > [class^="package"]{padding: var(--padding-xl) 0;}
@media only screen and (max-width: 1024px){
    #app-content > .content > section > .package{padding: var(--padding-lg) 0;}
}
/* INFO: app-login */
#app-header{background-color: var(--color-alternative-light);position: sticky;top: 0;z-index: 5;}
#app-header > [class^="package"] {height: var(--header-height);display: flex;align-items: center;gap: var(--gap-lg);}
#app-header .title{color: var(--color-white);font-size: var(--h-font-size-sm);margin: 0;}
#app-header .back{width: calc(var(--header-height) / 2);height: calc(var(--header-height) / 2);display: inline-flex;align-items: center;justify-content: center;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);background-color: var(--color-alternative);color: var(--color-white);outline: 2px solid transparent;transition: var(--transition-all);font-size: 12px;}
#app-header .back:is(:hover, :focus){background-color: var(--color-white);color: var(--color-alternative);outline: 2px solid var(--color-alternative);}
#app-header .logo > picture{display: flex;align-items: center;background-color: var(--color-white);width: calc(var(--header-height) - var(--padding) );height: calc(var(--header-height) - var(--padding));-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-box-shadow: var(--shadow);-webkit-box-shadow: var(--shadow);box-shadow: var(--shadow);-webkit-transition: var(--transition-all);transition: var(--transition-all);}
#app-header .logo:is(:hover, :focus) > picture{-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);}
#app-header .logo img{width: 100%;height: 100%;padding: var(--padding-sm);object-fit: contain;}

@media only screen and (max-width: 768px){
    #app-header > [class^="package"] {gap: var(--gap);}
}
@media only screen and (max-width: 568px){
    #app-header > .package-default{width: calc(100vw - var(--padding-sides));}
    #app-header .logo img{padding: var(--padding-xs);}
}



/* INFO: app-login */
#app-footer {background-color: var(--color-black);color: var(--color-background-darkness);position: fixed;bottom: 0;right: 0;left: 0;z-index: 5;font-size: var(--body-font-size-xs);font-weight: var(--body-font-weight-bold);}
#app-footer strong{color: var(--color-alternative);}
#app-footer > .package{height: var(--footer-height);display: flex;align-items: center;justify-content: flex-end;gap: var(--gap);}




.app-content-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-xl);
}

.app-content-grid > .full{grid-column: auto / span 3;}
.app-content-grid > .double{grid-column: auto / span 2;}
@media only screen and (max-width: 1536px){
    .app-content-grid{gap: var(--gap-lg);}
}
@media only screen and (max-width: 1366px){
    .app-content-grid{grid-template-columns: repeat(2, 1fr);}
    .app-content-grid > .full{grid-column: auto / span 2;}
    .app-content-grid > .double{grid-column: auto / span 1;}   
}
@media only screen and (max-width: 1024px){
    .app-content-grid{display: flex;flex-direction: column;}
}




/* INFO: app-login */
section#app-login > .package {padding: var(--padding) 0;height: calc(100vh - var(--header-height) - var(--footer-height));display: flex;align-items: center;justify-content: center;}
section#app-login > .package > form{width: min(100%, 600px);padding: var(--padding-lg);background-color: var(--color-white);border-radius: var(--border-radius);outline: 2px solid var(--color-background-darkness);outline-offset: -2px;}
/* INFO: app-landing */
section#app-landing > .package{padding-top: var(--padding); padding-bottom: var(--padding);min-height: calc(100vh - var(--header-height));display: flex;flex-direction: column;justify-content: center;}


form#filters  {display: flex;gap: var(--gap);align-items: flex-end;flex-wrap: wrap;}
form#filters + * {
    margin-top: var(--gap);
}
form#filters > fieldset{display: flex;flex-grow: 1;gap: var(--gap);}
@media only screen and (max-width: 768px){
    form#filters > fieldset{flex-direction: column;width: 100%;}
}


#qr-scanner {border: none !important;}
#qr-scanner img[alt="Info icon"]{display: none !important;}
#qr-scanner video{border-radius: var(--border-radius);box-shadow: var(--shadow-dark);width: 100%;}
#qr-scanner__dashboard {margin-top: var(--gap-lg);}
#qr-scanner #qr-scanner__dashboard_section{display: flex;flex-direction: column;gap: var(--gap);}
#qr-scanner #qr-scanner__dashboard_section > br{display: none;}
#qr-scanner #qr-scanner__scan_region{min-height: 0 !important;}
#qr-scanner #qr-scanner__scan_region img{display: none;}
#qr-scanner #html5-qrcode-select-camera {margin: var(--gap) 0;}
#qr-scanner #html5-qrcode-anchor-scan-type-change{display: none !important;}
#qr-response{width: min(600px, calc(100vw - var(--padding) * 2));--outline-width: 4px;padding: var(--padding-lg);background-color: var(--color-white);outline: var(--outline-width) solid var(--color-alternative);outline-offset: calc(0px - var(--outline-width));border-radius: calc(var(--border-radius) + var(--outline-width));overflow: hidden;-webkit-box-shadow: var(--shadow);box-shadow: var(--shadow);}
#qr-response.error{outline-color: var(--color-red-light);}
#qr-response > .info{display: flex;flex-direction: column;gap: var(--gap-lg);}
#qr-response > .info > [class^="material"]{background-color: var(--color-alternative-light);color: var(--color-white);width: 80px;height: 80px;display: inline-flex;justify-content: center;align-items: center;font-size: 40px;border-radius: 50%;-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);}
#qr-response.error > .info > [class^="material"]{background-color: var(--color-red);}
@media only screen and (max-width: 1366px){
    #qr-response{--outline-width: 3px;}
    #qr-response > .info > [class^="material"]{width: 72px;height: 72px;font-size: 36px;}
}
@media only screen and (max-width: 1024px){
    #qr-response{--outline-width: 2px;}
    #qr-response > .info > [class^="material"]{width: 64px;height: 64px;font-size: 32px;}
}


/* INFO: app-event-summary */
.app-event-summary{background: var(--color-gradient);color: var(--color-white);padding: var(--padding);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);display: flex;align-items: flex-start;gap: var(--gap-lg);-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);}
.app-event-summary > picture{width: 130px;aspect-ratio: 3 / 4;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);background: var(--color-gradient);-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);overflow: hidden;outline: 1px solid var(--color-alternative);outline-offset: -1px;flex-shrink: 0;}
.app-event-summary > .info {flex-grow: 1;}
.app-event-summary > picture > span[class^="material"]{width: 100%;height: 100%;object-fit: cover;display: flex;align-items: center;justify-content: center;font-size: 24px;color: var(--color-white);}
.app-event-summary > picture > img{width: 100%;height: 100%;object-fit: cover;padding: var(--gap-xs);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
@media only screen and (max-width: 1366px){
    .app-event-summary{padding: var(--padding);gap: var(--gap);}
}
@media only screen and (max-width: 1024px){
    .app-event-summary{flex-direction: column;gap: var(--gap-lg);}
    .app-event-summary > picture{width: 25%;}
}

/* INFO: app-session-summary */

.app-session-summary{background-color: var(--color-background-light);padding: var(--padding);outline: 1px solid var(--color-background-darkness);outline-offset: -1px;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-box-shadow: var(--shadow);box-shadow: var(--shadow);}
.app-session-summary > .info{display: flex;flex-direction: column;gap: var(--gap-lg);}

@media only screen and (max-width: 1366px){
    .app-session-summary{padding: var(--padding);}
}