@media (max-width: 1100px) {
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .navbar {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
        padding: .8rem .9rem;
    }

    .navbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    .navbar-workspace {
        max-width: 100%;
    }

    .profile-switcher-btn,
    .profile-switcher-menu {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .profile-switcher-menu {
        left: 0;
        right: auto;
    }

    .ndh-lang-select {
        width: 100%;
        min-width: 0;
    }

    .layout {
        max-width: 100%;
        margin: 1rem auto 1.6rem;
        padding: 0 .9rem;
    }

    .page-title {
        flex-direction: column;
        align-items: flex-start;
        gap: .65rem;
    }

    .page-title > div:last-child {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .55rem;
    }

    .page-title .btn {
        width: 100%;
        justify-content: center;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }

    .btn {
        font-size: .9rem;
        padding: .65rem .95rem;
        border-radius: .85rem;
    }

    .btn-sm {
        font-size: .88rem;
        padding: .6rem .9rem;
    }

    .card {
        padding: 1.05rem 1rem;
        border-radius: 1.05rem;
    }

    .ndh-actions {
        width: 100%;
        justify-content: stretch;
    }

    .ndh-actions .btn-ndh-outline {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .layout {
        margin-top: 1rem;
    }

    .page-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .ndh-sum-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ndh-sum-value {
        font-size: clamp(1.1rem, 5.5vw, 1.65rem) !important;
    }
}