html,
body,
#root {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

main,
main > *,
main .grid,
main .grid > * {
    min-width: 0;
    max-width: 100%;
}

main .overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

aside.admin-sidebar-bg {
    overscroll-behavior: contain;
}

@media (max-width: 639px) {
    main {
        padding: 14px !important;
    }

    main > .grid {
        gap: 14px;
    }

    main .grid > p,
    main .grid > section,
    main .grid > article,
    main .grid > div {
        overflow-wrap: anywhere;
    }

    main input,
    main select,
    main textarea,
    [role='dialog'] input,
    [role='dialog'] select,
    [role='dialog'] textarea {
        font-size: 16px !important;
    }

    [role='dialog'] {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }

    [role='dialog'] form {
        min-width: 0;
    }

    header h1 {
        min-width: 0;
        max-width: calc(100vw - 170px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    table {
        font-size: 13px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    main {
        padding: 22px !important;
    }

    [role='dialog'] {
        max-width: min(680px, calc(100vw - 40px)) !important;
    }
}

@media (display-mode: standalone) {
    body {
        min-height: 100dvh;
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }
}