@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
:root{
    --accent-bg:purple;
    --accent-bg-end:teal;
    --accent-fg:white;
}
*{margin:0;padding:0;box-sizing:border-box;user-select:none;scrollbar-color: #dddd transparent;}
.dark *{scrollbar-color: #333d transparent;}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{font-family:'Space Grotesk',Geist,system-ui,sans-serif;font-size:15px;height:100vh;display:flex;flex-direction:column}
.container{display:flex;flex-direction:column;flex:1;height:100dvh}
header{background-color:var(--accent-bg);color:var(--accent-fg);position:sticky;height:calc(48px + env(safe-area-inset-top))!important;top:0;left:0;z-index:100;padding-inline:1rem;padding-block:0.5rem;padding-top:calc(0.5rem + env(safe-area-inset-top))}
main{flex:1;display:flex;flex-direction:column;width:100%;padding:1rem;padding-left:calc(1rem + calc(env(safe-area-inset-left) / 2))}
.max{max-width:1400px;margin:auto}
.g025{gap:0.25rem}.g05{gap:0.5rem}.g15{gap:1.5rem}.g2{gap:2rem}
label[style='color: var(--error);']{color:#333!important}
p[style*='color: var(--error); font-size: 14px']{font-size:13px!important}
.sbc-avatar.pointer{cursor:pointer}
a{color:inherit;text-decoration:none}
.bg-lg{background-image:linear-gradient(to right,var(--accent-bg),var(--accent-bg-end));color:var(--accent-fg)}
.sbc-avatar,span.material-symbols-outlined,.sbc-button{&:active{scale:0.9;transition:200ms ease-in-out}}
.sbc-select button,.sbc-textarea textarea,.sbc-input input{font-weight:500!important}
.sbc-sheet-content{max-height:calc(100dvh - env(safe-area-inset-top))!important;margin-top:env(safe-area-inset-top)!important;overscroll-behavior:contain!important}
/* .sbc-sheet-content button.show-close{margin-top:env(safe-area-inset-top)!important} */
.sbc-data-table-container{height:100%}
.sbc-sheet-content {padding: 0 !important;}
.show-close {background: crimson !important;color: white !important}
.mandatory input,
.mandatory textarea,
.mandatory .sbc-datepicker-button,
.mandatory.sbc-select button {border-left: 2px solid red !important;}
.listing{max-height: calc(100dvh - env(safe-area-inset-top) - 145px);overflow:auto}
kbd{background-color:var(--btn-secondary-bg);padding:0.15rem 0.5rem;border-radius:0.25rem;margin-inline:0.25rem}
.sbc-grid>.sbc-toggle{margin-top:2rem}
.sbc-menubar { border:none !important; }
.light {
    .sbc-menubar-item > button {
        color: inherit !important;
        border:none!important;

        &:hover,&:focus-within,&:focus-visible{
            color:black!important;
        }
    }
}