/* ========================================
   LARGE TABLETS / SMALL LAPTOPS
======================================== */

@media (max-width: 1200px) {

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

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 991px) {

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

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main-content {
        width: 100%;

        margin-left: 0;

        padding: 24px;
    }

    .menu-toggle {
        display: flex;
    }

    .category-layout {
        grid-template-columns: 1fr;
    }

    .blog-form-layout {
        grid-template-columns: 1fr;
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 767px) {

    .main-content {
        padding: 18px;
    }

    .admin-header {
        margin-bottom: 22px;
    }

    .header-title h1 {
        font-size: 22px;
    }

    .header-title p {
        font-size: 12px;
    }

    .admin-info {
        display: none;
    }

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

        gap: 14px;
    }

    .stat-card {
        padding: 18px;
    }

    .stat-info h3 {
        font-size: 22px;
    }

    .page-top {
        flex-direction: column;

        align-items: flex-start;
    }

    .blog-toolbar {
        flex-direction: column;

        align-items: stretch;
    }

    .blog-search {
        max-width: none;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 18px;
    }

    .blog-editor-card,
    .blog-side-card,
    .settings-card,
    .category-form-card,
    .category-list-card {
        padding: 18px;
    }

    .action-buttons {
        min-width: 85px;
    }

}


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

@media (max-width: 480px) {

    .main-content {
        padding: 14px;
    }

    .login-page {
        padding: 15px;
    }

    .login-card {
        padding: 25px 20px;

        border-radius: 18px;
    }

    .login-logo h1 {
        font-size: 21px;
    }

    .admin-header {
        gap: 10px;
    }

    .header-right {
        gap: 8px;
    }

    .admin-profile {
        padding: 6px;
    }

    .admin-avatar {
        width: 35px;
        height: 35px;
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
    }

    .header-title h1 {
        font-size: 19px;
    }

    .header-title p {
        display: none;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
    }

    .page-top h2 {
        font-size: 20px;
    }

    .btn {
        width: 100%;
    }

    .publish-actions {
        flex-direction: column;
    }

    .publish-actions .btn {
        width: 100%;
    }

}



/* ================================
   MOBILE SIDEBAR FIX
================================ */

@media (max-width: 768px) {

    .admin-wrapper {
        display: flex;
        min-height: 100vh;
        width: 100%;
    }


    #sidebarContainer {
        width: 100%;
        max-width: 100%;
    }


    .sidebar {
        width: 100%;
        min-width: 100%;
        height: 100vh;
        min-height: 100vh;

        padding: 30px 20px;

        display: flex;
        flex-direction: column;

        box-sizing: border-box;
    }


    /* LOGO */

    .sidebar-logo,
    .sidebar-brand,
    .brand {
        display: flex;
        align-items: center;
        gap: 10px;

        margin-bottom: 35px;

        flex-wrap: nowrap;
    }


    /* MENU */

    .sidebar-menu,
    .nav-menu,
    .sidebar nav {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        flex-wrap: nowrap;
    }


    /* MENU ITEMS */

    .sidebar-menu a,
    .nav-menu a,
    .sidebar nav a {

        width: 100%;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        gap: 12px;

        white-space: nowrap;

        box-sizing: border-box;

        padding: 14px 16px;

        text-decoration: none;
    }


    .sidebar-menu a i,
    .nav-menu a i,
    .sidebar nav a i {
        width: 20px;

        min-width: 20px;

        text-align: center;
    }


    /* PUSH LOGOUT TO BOTTOM */

    .sidebar-logout,
    .logout-btn,
    .logout {

        margin-top: auto;

        width: 100%;

        display: flex;

        align-items: center;

        gap: 12px;

        white-space: nowrap;
    }


    /* MAIN CONTENT */

    .main-content {

        display: none;

    }

}







/* ==========================================
   MOBILE ADMIN PANEL FIX
========================================== */

@media screen and (max-width: 768px) {

    .admin-wrapper {

        width: 100%;
        min-width: 100%;
        display: block;

    }


    .main-content {

        width: 100%;
        min-width: 100%;
        margin-left: 0;
        padding: 20px 15px;
        box-sizing: border-box;

        display: block;
        visibility: visible;
        opacity: 1;

    }


    #headerContainer {

        width: 100%;
        display: block;

    }


    .page-content {

        width: 100%;
        display: block;

    }


    .sidebar {

        position: fixed;

    }

}