.notification-menu {
    min-width: min(22rem, calc(100vw - 2rem));
}

/* Gives the Portavis mark its own clean white plate so it stays visible
   against the blue navbar background. */
.portavis-brand-mark {
    width: 2rem;
    height: 2rem;
    padding: 0.2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.portavis-brand-mark-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    min-width: 42rem;
}

input[type="file"] {
    max-width: 100%;
}

code,
.text-break-mobile {
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-top: 0.75rem;
    }

    .mobile-nav-action {
        width: 100%;
        text-align: left;
    }

    .navbar .dropdown-menu {
        position: static;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    main.container {
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }

    h1.h3 {
        font-size: 1.5rem;
    }

    .card-body,
    .card-header,
    .card-footer {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .card-header.d-flex,
    .card-footer.d-flex,
    main > .d-flex.justify-content-between {
        align-items: stretch !important;
        flex-direction: column;
        gap: 0.75rem;
    }

    .d-flex.justify-content-between {
        flex-wrap: wrap;
    }

    .mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .mobile-actions > .btn,
    .mobile-actions > form,
    .mobile-actions > form > .btn {
        width: 100%;
    }

    .portavis-map {
        height: min(360px, 55vh) !important;
    }

    .table-responsive > .table {
        min-width: 38rem;
    }

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

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

    .modal-dialog {
        margin: 0.5rem;
    }
}