/* Desktop First (Default Styles) */
.login-wrapper {
    display: flex;
    min-height: 600px;
    border-radius: 30px;
}

@media(min-width: 1025px) {
    .dash-content {
        padding: 50px 100px;
    }
}

/* Large Tablets & Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
    .login-wrapper {
        max-width: 90%;
    }
    .login-form-side {
        padding: 40px;
    }
    .nav-links {
        gap: 2px;
    }
    .nav-link-item {
        font-size: 12.5px;
        padding: 6px 10px;
    }
    .lang-btn span { display: none; }
    .dash-content {
        padding: 50px 100px;
    }
}

/* Tablets (max-width: 768px) */
@media (max-width: 1000px) {

    /* ── Navbar ── */
    .navbar-inner {
        height: 56px !important;
        flex-wrap: nowrap !important;
        padding: 0 16px !important;
        gap: 12px !important;
        position: relative !important;
        align-items: center !important;
    }

    /* Hide centered nav links completely */
    .nav-links {
        display: none !important;
    }

    /* Hide language button */
    .lang-btn { display: none !important; }

    /* Show hamburger */
    .hamburger { display: flex !important; }

    /* Mobile dropdown menu */
    .mobile-menu {
        display: none;
        flex-direction: column;
        gap: 2px;
        padding: 8px 16px 12px;
        border-top: 1px solid var(--border);
    }
    .mobile-menu.open { display: flex !important; }

    /* ── Login ── */
    .login-side-img { display: none !important; }
    .login-wrapper  { max-width: 500px; border-radius: 20px; }
    .login-form-side { padding: 40px 30px; width: 100%; }
    .login-title    { font-size: 1.5rem; }

    .illustration-wrap  { width: 200px; height: 200px; margin: 0 auto 32px; }
    .pending-title      { font-size: 20px; }
    .pending-subtitle   { font-size: 13px; margin-bottom: 32px; }
    .btn-back-login     { padding: 14px 48px; font-size: 14px; }

    /* ── Dashboard ── */
    .dash-content { padding: 16px; }
    .stat-number  { font-size: 1.4rem; }
    .stat-card    { padding: 14px; gap: 12px; }
    .stat-icon    { width: 44px; height: 44px; border-radius: 12px; }
}

/* Mobile Phones (max-width: 480px) */
@media screen and (min-width: 320px) and (max-width: 480px) {
    body { padding: 10px!important; }

    .common-wrapper { padding-top: 1rem !important; }

    /* ── Login ── */
    .login-wrapper  { max-width: 100%; border-radius: 15px; box-shadow: none; }
    .login-form-side { padding: 30px 20px !important; }
    .btn-social-outline { font-size: 0.85rem!important; }
    .social-btn-content {
        width: 100%;
        justify-content: center;
        grid-template-columns: 30px auto!important;
        padding-left: 10px;
    }
    .btn-login { padding: 10px; }
    .footer .container span { font-size: 12px; }

    /* ── Pending ── */
    .pending-wrapper    { min-height: 83vh !important; padding: 24px 16px 32px !important; }
    .illustration-wrap  { width: 150px !important; height: 150px !important; margin: 0 auto 24px !important; }
    .pending-title      { font-size: 17px !important; margin-bottom: 6px !important; }
    .pending-subtitle   { font-size: 12px !important; margin-bottom: 24px !important; }
    .pending-card       { padding: 16px !important; }
    .btn-back-login     { padding: 12px 40px !important; font-size: 13px !important; }

    /* ── Navbar ── */
    .navbar-inner {
        height: 52px !important;
        padding: 0 14px !important;
        gap: 10px !important;
    }

    .nav-logo     { height: 26px !important; }
    .nav-logo-sub { display: none !important; }

    /* Keep nav links hidden — hamburger controls them */
    .nav-links { display: none !important; }

    .nav-icon-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .nav-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    /* Hide avatar on mobile — only bell + hamburger shown */
    .nav-avatar    { display: none !important; }
    .lang-btn      { display: none !important; }

    /* ── Dashboard content ── */
    .dash-content { padding: 12px !important; }

    .stat-card {
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }
    .stat-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 1rem !important;
    }
    .stat-number { font-size: 1.2rem !important; }
    .stat-label  { font-size: 11px !important; }

    .dash-card       { padding: 14px !important; border-radius: 12px !important; }
    .dash-card-title { font-size: 13px !important; }
    .chart-legend    { font-size: 11px !important; }

    .mini-icon-wrap {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .btn-pwal-sm,
    .btn-pwal-outline-sm {
        font-size: 11px !important;
        padding: 7px 12px !important;
    }

    .avatar-bubble {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }

    .member-list { max-height: 160px !important; }
    .dash-footer { font-size: 11px !important; padding: 12px !important; }
}