/* ===== Mobile Responsive Styles ===== */

/* Tablet */
@media (max-width:1024px){
    .sidebar{width:220px}
    .stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
    .dashboard-quick-actions{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

/* Mobile */
@media (max-width:768px){
    .header{
        height:56px;
        padding:0 12px;
        flex-wrap:nowrap;
    }
    .hamburger{
        display:flex;
    }
    .header-logo{
        gap:8px;
        flex-shrink:0;
    }
    .header-logo img{
        height:28px !important;
    }
    .header-actions{
        gap:6px;
    }
    .header-actions .lang-switcher>button{
        padding:5px 8px;
        font-size:0.75rem;
    }
    .header-actions .lang-switcher>button .lang-name,
    .header-actions .lang-switcher>button span:last-of-type{
        display:none;
    }
    .header-actions .header-username{
        display:none;
    }
    .header-actions>span{
        display:none;
    }
    .notification-bell{
        font-size:1rem;
        padding:6px;
    }
    .notif-count{
        width:16px;
        height:16px;
        font-size:0.6rem;
        top:0;
        left:0;
    }
    .header-nav{
        display:none;
    }

    /* ===== CRITICAL: Sidebar Mobile Fix ===== */
    .sidebar{
        position:fixed;
        top:56px;
        bottom:0;
        width:280px;
        height:calc(100vh - 56px);
        z-index:900;
        transform:translateX(100%);
        transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
        box-shadow:-8px 0 40px rgba(0,0,0,0.5);
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        background:rgba(17,17,39,0.98);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        border:none;
        /* Default: slide from RIGHT (RTL) */
        right:0;
        left:auto;
    }
    .sidebar.sidebar-open{
        transform:translateX(0);
    }

    /* LTR: sidebar slides from LEFT */
    [dir="ltr"] .sidebar{
        right:auto;
        left:0;
        transform:translateX(-100%);
        box-shadow:8px 0 40px rgba(0,0,0,0.5);
    }
    [dir="ltr"] .sidebar.sidebar-open{
        transform:translateX(0);
    }

    .sidebar .user-info{
        padding:24px 16px 18px;
        text-align:center;
    }
    .sidebar .user-avatar{
        width:52px;
        height:52px;
        font-size:1.2rem;
        margin-bottom:12px;
    }
    .sidebar .user-name{
        font-size:0.92rem;
    }
    .sidebar .user-status{
        font-size:0.78rem;
    }

    /* Sidebar nav links on mobile - RTL friendly */
    .sidebar-nav a{
        justify-content:flex-start;
        text-align:start;
        padding:12px 16px;
        font-size:0.88rem;
        min-height:44px;
        border:none;
        margin:2px 8px;
        border-radius:10px;
        gap:12px;
    }
    .sidebar-nav a i{
        margin:0;
        flex-shrink:0;
    }
    .sidebar-nav a.active{
        border-radius:10px;
    }
    .sidebar-nav .nav-section{
        text-align:start;
        padding:16px 14px 6px;
        font-size:0.65rem;
        letter-spacing:1.2px;
    }

    /* Sidebar overlay */
    .sidebar-overlay{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:rgba(0,0,0,0.6);
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
        z-index:899;
        opacity:0;
        transition:opacity 0.35s ease;
        pointer-events:none;
    }
    .sidebar-overlay.active{
        opacity:1;
        pointer-events:auto;
    }

    .layout{
        min-height:calc(100vh - 56px);
        flex-direction:column;
    }
    .main-content{
        padding:16px 12px;
    }
    .page-title{
        font-size:1.2rem;
        margin-bottom:20px;
        gap:8px;
    }
    .page-title i{
        font-size:1.1rem;
    }
    .card-body{
        padding:16px;
    }
    .card-header{
        padding:12px 16px;
        font-size:0.88rem;
    }
    .card{
        margin-bottom:16px;
    }
    .stats-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }
    .stat-card{
        padding:16px;
    }
    .stat-card .stat-value{
        font-size:1.3rem;
    }
    .stat-card .stat-label{
        font-size:0.76rem;
    }
    .stat-card .stat-icon{
        width:42px;
        height:42px;
        font-size:1.05rem;
        margin-bottom:12px;
    }
    .dashboard-quick-actions{
        grid-template-columns:1fr;
        gap:10px;
    }
    .card-body{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .table-responsive{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .data-table{
        min-width:520px;
        font-size:0.78rem;
    }
    .data-table th,.data-table td{
        padding:8px 10px;
    }
    .data-table th{
        font-size:0.72rem;
    }
    .offers-grid{
        grid-template-columns:1fr;
    }
    .offer-card{
        padding:18px;
    }
    .offers-filters{
        flex-direction:column;
        gap:8px;
        align-items:stretch;
    }
    .offers-filters .filter-dropdown{
        width:100%;
    }
    .offers-filters .filter-dropdown select{
        width:100%;
        min-width:0;
    }
    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }
    .form-group{
        margin-bottom:16px;
    }
    .auth-card{
        padding:30px 24px;
    }
    .auth-card .auth-logo h1{
        font-size:1.8rem;
    }
    .hero h1{
        font-size:2rem;
    }
    .hero-stats{
        gap:30px;
    }
    .btn-hero{
        padding:14px 30px;
        font-size:1rem;
    }
    .filter-bar{
        flex-direction:column;
        gap:6px;
        align-items:stretch;
    }
    .filter-bar .form-control{
        width:100%;
        min-width:0;
    }
    .notification-panel{
        position:fixed !important;
        top:56px !important;
        left:8px !important;
        right:8px !important;
        width:auto !important;
        max-width:360px;
    }
    .modal{
        width:95%;
        max-height:85vh;
    }
    .modal-header{
        padding:14px 16px;
        font-size:0.92rem;
    }
    .modal-body{
        padding:16px;
    }
    .modal-footer{
        padding:12px 16px;
        flex-wrap:wrap;
    }
    .pagination{
        gap:4px;
        flex-wrap:wrap;
    }
    .page-btn{
        padding:6px 10px;
        font-size:0.8rem;
        min-height:36px;
        min-width:36px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .balance-badge{
        padding:4px 10px;
        font-size:0.75rem;
    }
    .alert{
        padding:12px 14px;
        font-size:0.84rem;
        flex-wrap:wrap;
    }
    .badge{
        padding:3px 9px;
        font-size:0.68rem;
    }
    .btn{
        padding:9px 18px;
        font-size:0.84rem;
    }
    .btn-sm{
        padding:5px 10px;
        font-size:0.74rem;
    }
    .features-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    .feature-card{
        padding:24px 20px;
    }
    .empty-state{
        padding:40px 16px;
    }
    .empty-state i{
        font-size:2.2rem;
    }
    .empty-state h3{
        font-size:1rem;
    }
    .empty-state p{
        font-size:0.84rem;
    }
    .user-info-notice{
        font-size:0.82rem;
        padding:10px 14px;
    }
    .offer-badges{
        gap:4px;
    }
    .offer-tag{
        padding:2px 8px;
        font-size:0.68rem;
    }
    .avail-badge{
        padding:2px 8px;
        font-size:0.68rem;
    }
    .offer-reward-box{
        padding:6px 10px;
    }
    .offer-reward-amount{
        font-size:1rem;
    }
    .toast-container{
        top:64px;
        left:8px;
        right:8px;
    }
    .toast{
        min-width:0;
        width:100%;
        font-size:0.82rem;
        padding:12px 16px;
    }
}

/* Extra small screens */
@media (max-width:480px){
    .header{
        height:52px;
        padding:0 10px;
    }
    .hamburger{
        font-size:1.1rem;
        padding:6px 8px;
    }
    .header-logo img{
        height:26px !important;
    }
    .sidebar{
        width:260px;
        top:52px;
        height:calc(100vh - 52px);
    }
    .sidebar .user-info{
        padding:18px 12px 14px;
    }
    .sidebar .user-avatar{
        width:46px;
        height:46px;
        font-size:1.1rem;
    }
    .sidebar .user-name{
        font-size:0.85rem;
    }
    .sidebar .user-status{
        font-size:0.72rem;
    }
    .sidebar-nav a{
        padding:11px 14px;
        font-size:0.84rem;
        gap:10px;
        min-height:44px;
    }
    .sidebar-nav .nav-section{
        padding:14px 14px 4px;
        font-size:0.62rem;
    }
    .layout{
        min-height:calc(100vh - 52px);
    }
    .main-content{
        padding:12px 10px;
    }
    .page-title{
        font-size:1.05rem;
        margin-bottom:16px;
        gap:6px;
    }
    .card-body{
        padding:14px 12px;
    }
    .card-header{
        padding:10px 12px;
        font-size:0.84rem;
        gap:6px;
    }
    .card{
        margin-bottom:12px;
    }
    .stats-grid{
        grid-template-columns:1fr;
        gap:8px;
    }
    .stat-card{
        padding:14px;
        display:flex;
        align-items:center;
        gap:14px;
    }
    .stat-card .stat-icon{
        width:42px;
        height:42px;
        font-size:1rem;
        margin-bottom:0;
        flex-shrink:0;
    }
    .stat-card .stat-value{
        font-size:1.25rem;
    }
    .stat-card .stat-label{
        font-size:0.74rem;
    }
    .dashboard-quick-actions{
        gap:8px;
    }
    .dashboard-quick-actions a{
        padding:14px 16px !important;
    }
    .dashboard-quick-actions a>div:first-child{
        width:42px !important;
        height:42px !important;
    }
    .dashboard-quick-actions a>div:first-child i{
        font-size:1.05rem !important;
    }
    .data-table{
        min-width:480px;
        font-size:0.74rem;
    }
    .data-table th,.data-table td{
        padding:7px 8px;
    }
    .offer-card{
        padding:14px;
    }
    .offer-card .offer-name{
        font-size:0.92rem;
    }
    .offer-card .offer-payout{
        font-size:1.1rem;
    }
    .offer-card .offer-btn{
        padding:10px;
        font-size:0.85rem;
    }
    .profile-grid{
        grid-template-columns:1fr !important;
    }
    .offers-filters .filter-dropdown select{
        min-width:0;
        width:100%;
        font-size:0.82rem;
        padding:7px 12px;
    }
    .form-group label{
        font-size:0.84rem;
        margin-bottom:6px;
    }
    .form-control{
        padding:10px 14px;
        font-size:0.88rem;
    }
    .form-hint{
        font-size:0.74rem;
    }
    .auth-card{
        padding:24px 18px;
        border-radius:18px;
    }
    .auth-card .auth-logo h1{
        font-size:1.6rem;
    }
    .auth-card .btn{
        padding:12px;
        font-size:0.92rem;
    }
    .hero h1{
        font-size:1.6rem;
    }
    .hero .subtitle{
        font-size:0.92rem;
    }
    .hero-stats{
        flex-direction:column;
        gap:20px;
    }
    .hero-stat .value{
        font-size:1.8rem;
    }
    .hero-stat .label{
        font-size:0.8rem;
    }
    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:12px;
    }
    .btn-hero{
        width:100%;
        justify-content:center;
        padding:14px 24px;
        font-size:0.95rem;
    }
    .balance-badge{
        display:none;
    }
    .notification-panel{
        top:52px !important;
        left:4px !important;
        right:4px !important;
        max-height:60vh;
        max-width:none;
    }
    .notif-item{
        padding:12px 14px;
    }
    .notif-header{
        padding:12px 14px;
        font-size:0.88rem;
    }
    .modal{
        width:96%;
        border-radius:16px;
    }
    .modal-body{
        padding:14px;
    }
    .user-info-notice{
        font-size:0.78rem;
        padding:8px 12px;
    }
    .feature-card{
        padding:20px 16px;
    }
    .feature-icon{
        width:56px;
        height:56px;
        font-size:1.5rem;
    }
    .feature-card h3{
        font-size:1rem;
    }
    .feature-card p{
        font-size:0.82rem;
    }
    .btn{
        padding:8px 14px;
        font-size:0.82rem;
    }
    .pending-box{
        padding:36px 24px;
    }
    .pending-box i{
        font-size:3rem;
    }
    .pending-box h2{
        font-size:1.2rem;
    }
    .setup-container{
        padding:28px 20px;
    }
    .setup-logo h1{
        font-size:1.8rem;
    }
    .country-flag{
        font-size:1rem;
    }
    .offer-badges{
        gap:3px;
    }
    .badge-countries,.badge-device,.badge-type{
        font-size:0.64rem;
        padding:2px 7px;
    }
}

/* ===== Dashboard Sidebar: Always from the END side (right in RTL, left in LTR) ===== */
@media(max-width:768px){
    [dir="ltr"] .sidebar{
        right:auto !important;
        left:0 !important;
        transform:translateX(-100%) !important;
        box-shadow:8px 0 40px rgba(0,0,0,0.5) !important;
    }
    [dir="ltr"] .sidebar.sidebar-open{
        transform:translateX(0) !important;
    }
    [dir="rtl"] .sidebar{
        right:0 !important;
        left:auto !important;
        transform:translateX(100%) !important;
    }
    [dir="rtl"] .sidebar.sidebar-open{
        transform:translateX(0) !important;
    }
}

@media(max-width:480px){
    [dir="ltr"] .sidebar{
        right:auto !important;
        left:0 !important;
        transform:translateX(-100%) !important;
    }
    [dir="ltr"] .sidebar.sidebar-open{
        transform:translateX(0) !important;
    }
    [dir="rtl"] .sidebar{
        right:0 !important;
        left:auto !important;
        transform:translateX(100%) !important;
    }
    [dir="rtl"] .sidebar.sidebar-open{
        transform:translateX(0) !important;
    }
}