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

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

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

pre,
code,
.text-break,
.table,
.card,
.alert,
.dropdown-menu {
    overflow-wrap: anywhere;
}

pre {
    white-space: pre-wrap;
}

.container,
.container-fluid {
    min-width: 0;
}

.table-responsive {
    max-width: 100%;
}

.table-responsive > .table,
.table-responsive > table {
    min-width: max-content;
}

.btn,
.form-control,
.form-select,
.input-group-text {
    min-width: 0;
}

.btn-group {
    max-width: 100%;
}

.btn-group.flex-wrap {
    row-gap: 0.5rem;
}

.navbar .container,
.navbar .container-fluid {
    min-width: 0;
}

.navbar-brand {
    min-width: 0;
}

.navbar-brand strong,
.brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-nav,
.navbar-meta,
.navbar .d-flex.ms-auto {
    min-width: 0;
}

.dropdown-menu {
    max-width: min(92vw, 360px);
}

.page-link {
    min-width: 2.25rem;
    text-align: center;
}

.pagination {
    flex-wrap: wrap;
    gap: 0.25rem;
}

.modal,
.offcanvas,
.seodb-helper-panel {
    max-width: 100vw;
}

@media (max-width: 991.98px) {
    h1,
    .display-1 {
        font-size: clamp(2rem, 12vw, 4rem);
        line-height: 1.05;
    }

    .display-6 {
        font-size: clamp(1.6rem, 7vw, 2.25rem);
        line-height: 1.15;
    }

    .fs-4,
    .fs-5 {
        font-size: 1rem !important;
    }

    .navbar .container,
    .navbar .container-fluid {
        gap: 0.5rem;
    }

    .navbar-nav {
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
    }

    .navbar .nav-link,
    .navbar .btn {
        white-space: nowrap;
    }

    .card-header.d-flex,
    .page-heading .container,
    footer .container,
    footer .container-fluid {
        gap: 0.75rem;
    }
}

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

    .container,
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .navbar {
        min-height: 52px;
    }

    .navbar-brand img {
        width: 32px !important;
        height: 32px !important;
        margin-right: 0.45rem !important;
    }

    .navbar-brand strong,
    .brand-text {
        max-width: 7.5rem;
        font-size: 1.05rem !important;
    }

    .navbar .nav-link,
    .navbar .btn {
        font-size: 0.82rem;
        padding: 0.35rem 0.45rem !important;
    }

    .navbar .btn.ms-2,
    .navbar .nav-link.ms-2 {
        margin-left: 0.25rem !important;
    }

    .navbar .text-white.me-3 {
        display: none;
    }

    .navbar .navbar-nav .nav-label,
    .navbar .nav-anchor {
        display: none !important;
    }

    .hero {
        min-height: auto !important;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .hero .card {
        max-width: 100% !important;
    }

    .card-body.p-4,
    .login-body,
    .register-body,
    .forgot-body,
    .reset-body {
        padding: 1rem !important;
    }

    .login-header,
    .register-header,
    .forgot-header,
    .reset-header {
        padding: 1.35rem 1rem !important;
    }

    .input-group {
        align-items: stretch;
    }

    .input-group > .btn {
        flex: 1 0 auto;
    }

    .btn-group:not(.keep-inline),
    .btn-group.btn-group-sm:not(.keep-inline) {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .btn-group:not(.keep-inline) > .btn,
    .btn-group:not(.keep-inline) > .btn-group,
    .btn-group.btn-group-sm:not(.keep-inline) > .btn,
    .btn-group.btn-group-sm:not(.keep-inline) > .btn-group {
        border-radius: 0.25rem !important;
        margin-left: 0 !important;
    }

    .card-header.d-flex,
    .d-flex.mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .table > :not(caption) > * > * {
        padding: 0.55rem 0.65rem;
    }

    .table th,
    .table td {
        font-size: 0.86rem;
    }

    .pagination .page-link {
        padding: 0.32rem 0.55rem;
    }

    footer .d-flex {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .navbar .container,
    .navbar .container-fluid {
        flex-wrap: wrap;
    }

    .navbar-nav,
    .navbar-meta,
    .navbar .d-flex.ms-auto {
        flex: 1 1 auto;
        justify-content: flex-end;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .navbar-nav::-webkit-scrollbar,
    .navbar-meta::-webkit-scrollbar,
    .navbar .d-flex.ms-auto::-webkit-scrollbar {
        display: none;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .input-group > .form-control,
    .input-group > .form-select {
        flex: 1 1 0;
        width: 1%;
    }

    .input-group > .input-group-text {
        flex: 0 0 auto;
    }

    .input-group > .btn {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0 !important;
        margin-top: 0.5rem;
        border-radius: 0.25rem !important;
    }

    .btn.w-100,
    .d-grid .btn {
        white-space: normal;
    }

    .feature-card {
        padding: 1rem !important;
    }

    .page-card .d-flex.justify-content-between,
    .qa-item .d-flex.justify-content-between,
    .new-qa-form .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
    }

    .dashboard-shell,
    .dashboard-shell.sidebar-collapsed {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 0.5rem !important;
    }

    .dashboard-sidebar {
        padding: 0.4rem !important;
    }

    .dashboard-sidebar-toggle {
        width: 32px !important;
        height: 32px !important;
    }

    .dashboard-sidebar-nav .dashboard-panel-nav {
        min-height: 36px !important;
        padding: 0.4rem !important;
    }

    .dashboard-content-toolbar {
        justify-content: stretch !important;
    }

    .dashboard-content-toolbar > .d-flex {
        width: 100%;
        justify-content: space-between;
    }

    .metadata-table textarea,
    .metadata-table input,
    .qa-item textarea,
    .new-qa-form textarea {
        min-width: 14rem;
    }

    .geo-nav .pagination {
        justify-content: flex-start;
    }
}