:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --app-vh: 100vh;
    --app-vh: 100svh;
    --app-vh: 100dvh;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    overscroll-behavior-y: contain;
}

body {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.full-height {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    font-size: 16px;
}

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    button,
    .btn,
    [role="button"],
    a.btn {
        min-height: 44px;
        min-width: 44px;
    }
    .modal,
    .modal-overlay {
        padding: 0 !important;
    }
    .modal-card,
    .modal-content {
        max-width: 100% !important;
        max-height: 100dvh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 769px) {
    .show-mobile { display: none !important; }
}

@media (pointer: coarse) {
    button,
    .btn,
    [role="button"],
    a.btn,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    .tooltip:hover { display: none !important; }
}

@supports not (padding: env(safe-area-inset-top)) {
    :root {
        --safe-top: 0px;
        --safe-bottom: 0px;
        --safe-left: 0px;
        --safe-right: 0px;
    }
}