/* =========================================================
   NANES — RESPONSIVE
   29 — RESPONSIVE
   30 — RTL / LTR
   31 — REDUCED MOTION
   ========================================================= */


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --sidebar-width: 230px;
    }


    .content {
        padding: 24px;
    }


    .grid-4 {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .grid-3 {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .overview-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .shell {

        display: block;
    }


    .sidebar {

        position: sticky;

        top: 0;

        height: auto;

        padding: 8px;

        flex-direction: row;

        align-items: center;

        overflow-x: auto;

        border-inline-end: 0;

        border-bottom:
            1px solid var(--border);
    }


    .sidebar-brand {
        display: none;
    }


    .sidebar-nav {

        flex-direction: row;

        overflow: visible;
    }


    .nav-btn {

        width: auto;

        min-width:
            max-content;
    }


    .nav-spacer {
        display: none;
    }


    .nav-exit {

        width: auto;

        min-width:
            max-content;
    }


    .topbar {

        position: relative;

        padding:
            12px 18px;
    }


    .content {

        padding:
            20px 15px;
    }


    .page-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns:
            1fr;
    }


    .overview-stats-grid {
        grid-template-columns: 1fr;
    }


    .form-grid {

        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .topbar-sub h2 {

        font-size: 17px;
    }


    .topbar-badge {
        display: none;
    }


    .topbar > .row-between {

        gap: 5px;
    }


    .topbar .input {

        max-width: 100px;
    }


    .landing {

        padding:
            25px 15px;
    }


    .hero-logo-wrapper {

        width: 115px;
        height: 115px;

        border-radius: 30px;
    }


    .landing-title {

        font-size: 46px;
    }


    .landing-desc {

        font-size: 14px;
    }


    .landing-actions {

        flex-direction:
            column;
    }


    .landing-actions .btn {

        width: 100%;
    }


    .card {

        padding: 16px;
    }


    .stat-value {

        font-size: 25px;
    }


    .chat-bubble {

        max-width: 90%;
    }


    .toast-container {

        left: 12px;

        right: 12px;

        bottom: 12px;
    }


    .toast {

        min-width: 0;

        width: 100%;
    }
}


/* =========================================================
   RTL / LTR
   ========================================================= */

[dir="ltr"] .sidebar {

    border-inline-end: 0;

    border-inline-start:
        1px solid var(--border);
}


[dir="ltr"] .nav-btn:hover {

    transform:
        translateX(2px);
}


[dir="ltr"] th,
[dir="ltr"] td {

    text-align: left;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}