/**
 * YOBW MLM - Styles Responsives
 * RCCM: CD/Bbo/RCCM/26-B-561
 */

/* ==================== TABLET (768px - 1024px) ==================== */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .header-main .container {
        flex-wrap: wrap;
    }

    .main-nav ul {
        gap: 20px;
    }

    .hero h2 {
        font-size: 2rem;
    }

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

    .sidebar {
        min-height: auto;
        margin-bottom: 30px;
    }

    .content-wrapper {
        flex-direction: column;
    }
}

/* ==================== MOBILE (< 768px) ==================== */
@media screen and (max-width: 768px) {
    /* Header Mobile */
    .header-top .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .header-main .container {
        flex-direction: column;
        gap: 20px;
    }

    .logo {
        flex-direction: column;
        text-align: center;
    }

    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--color-white);
        font-size: 1.5rem;
        cursor: pointer;
    }

    .main-nav {
        display: none;
        width: 100%;
    }

    .main-nav.active {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .main-nav a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .lang-selector {
        justify-content: center;
        margin-top: 15px;
    }

    /* Hero Mobile */
    .hero {
        padding: 50px 0;
    }

    .hero h2 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Sections Mobile */
    .section {
        padding: 40px 0;
    }

    .section-title h2 {
        font-size: 1.5rem;
    }

    /* Products Grid Mobile */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Gallery Mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Tables Mobile */
    .table-container {
        font-size: 0.85rem;
    }

    .data-table th,
    .data-table td {
        padding: 10px;
    }

    .data-table .actions {
        flex-direction: column;
        gap: 5px;
    }

    /* Forms Mobile */
    .login-box {
        padding: 25px;
    }

    /* Dashboard Mobile */
    .dashboard-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

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

    /* Sidebar Mobile */
    .sidebar-menu {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px;
    }

    .sidebar-menu li {
        flex-shrink: 0;
    }

    .sidebar-menu a {
        white-space: nowrap;
    }

    /* Chat Mobile */
    .chat-box {
        width: calc(100vw - 40px);
        right: -10px;
    }

    /* Footer Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
}

/* ==================== SMALL MOBILE (< 480px) ==================== */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .logo-text h1 {
        font-size: 1.2rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .card-body {
        padding: 15px;
    }

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

    .stat-value {
        font-size: 1.5rem;
    }

    .tree-view {
        padding: 15px;
    }

    .tree-children {
        flex-direction: column;
        gap: 10px;
    }
}

/* ==================== LARGE SCREENS (> 1400px) ==================== */
@media screen and (min-width: 1400px) {
    .container {
        max-width: 1350px;
    }

    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==================== PRINT ==================== */
@media print {
    .no-print,
    .main-header,
    .main-footer,
    .sidebar,
    .chat-widget {
        display: none !important;
    }

    body {
        background: white;
    }

    .content-wrapper {
        margin: 0;
    }
}