:root {
    --app-radius: 0.75rem;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-size: 0.95rem;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: .2px;
}

.navbar .nav-link {
    border-radius: .5rem;
    padding: .55rem .75rem;
}

.navbar .nav-link.active {
    background: rgba(255,255,255,.12);
}

main.container {
    max-width: 1440px;
}

h1, h2, h3, h4 {
    overflow-wrap: anywhere;
}

.card,
.alert {
    border-radius: var(--app-radius);
}

.form-control,
.form-select,
.btn {
    min-height: 42px;
}

.form-label {
    font-weight: 600;
    margin-bottom: .35rem;
}

.table-responsive {
    margin-bottom: 1rem;
    border-radius: var(--app-radius);
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    margin-bottom: 0;
}

.table th {
    white-space: nowrap;
    vertical-align: middle;
}

.table td {
    vertical-align: middle;
}

.table form {
    margin: 0;
}

.btn-sm {
    min-height: 34px;
}

@media (max-width: 767.98px) {
    body {
        font-size: .92rem;
    }

    main.container {
        padding-left: .75rem;
        padding-right: .75rem;
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }

    h3 {
        font-size: 1.35rem;
        margin-bottom: 1rem;
    }

    .navbar {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }

    .navbar-collapse {
        padding-top: .75rem;
    }

    .navbar-nav {
        gap: .2rem;
    }

    .navbar .nav-link {
        padding: .7rem .8rem;
    }

    .card-body {
        padding: 1rem;
    }

    .row.g-3 {
        --bs-gutter-y: .8rem;
    }

    .form-control,
    .form-select {
        font-size: 16px;
        min-height: 46px;
    }

    textarea.form-control {
        min-height: 90px;
    }

    form.card .btn,
    form.card button[type="submit"],
    form.card input[type="submit"] {
        width: 100%;
        min-height: 46px;
    }

    .table-responsive {
        border: 1px solid var(--bs-border-color);
        background: #fff;
    }

    .table-responsive .table {
        min-width: 760px;
    }

    .table-responsive .table.table-sm {
        font-size: .86rem;
    }

    .table-responsive th,
    .table-responsive td {
        padding: .55rem .6rem;
    }

    .table-responsive .btn {
        white-space: nowrap;
    }

    .alert {
        padding: .85rem;
    }
}

@media (max-width: 420px) {
    main.container {
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .card-body {
        padding: .85rem;
    }

    .table-responsive .table {
        min-width: 700px;
    }
}


.login-card {
    max-width: 440px;
}

@media (max-width: 767.98px) {
    .login-card {
        max-width: 100%;
    }
}