/* responsive.css - ریسپانسیو حرفه‌ای موبایل */

/* ===== Tablet (768px - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 769px) {
    .container { max-width: 100%; padding: 0 15px; }
    .stats-grid, .dash-stats { grid-template-columns: repeat(3, 1fr); }
    .admin-sidebar { width: 200px; }
    .admin-main { margin-right: 200px; }
    .tm-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Mobile (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* ===== عمومی ===== */
    * { -webkit-tap-highlight-color: transparent; }
    html { font-size: 14px; }
    body { font-size: 13px; overflow-x: hidden; }
    .container { padding: 0 10px; width: 100%; max-width: 100%; }
    
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 14px !important; }
    h4 { font-size: 13px !important; }
    h5 { font-size: 12px !important; }
    
    /* ===== Layout ===== */
    .admin-main { margin-right: 0 !important; padding: 10px !important; padding-bottom: 85px !important; }
    main { padding-bottom: 85px !important; }
    
    /* ===== Sidebar ===== */
    .admin-sidebar {
        width: 280px !important;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        position: fixed !important;
        top: 0;
        right: 0;
        height: 100vh !important;
        z-index: 1000;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .sidebar-overlay.show { display: block !important; }
    
    /* ===== هدر ادمین ===== */
    .admin-top-header { padding: 8px 10px !important; }
    .admin-top-header span { font-size: 13px !important; }
    .user-info { display: none !important; }
    .user-avatar { width: 30px !important; height: 30px !important; }
    .header-btn { padding: 4px !important; }
    .header-btn svg { width: 18px !important; height: 18px !important; }
    
    /* ===== هدر اصلی ===== */
    .main-header-inner { padding: 8px 10px !important; gap: 5px !important; flex-wrap: nowrap !important; }
    .main-logo-text { font-size: 14px !important; }
    .main-search { display: none !important; }
    .main-nav { gap: 3px !important; }
    .main-nav a { padding: 3px !important; }
    .main-nav svg { width: 20px !important; height: 20px !important; }
    .main-login-btn { padding: 5px 10px !important; font-size: 11px !important; }
    .main-login-btn svg { width: 16px !important; height: 16px !important; }
    .main-header-cats { 
        overflow-x: auto; 
        white-space: nowrap; 
        -webkit-overflow-scrolling: touch; 
        padding: 5px 8px !important;
        display: flex;
        gap: 4px;
    }
    .main-cat { font-size: 10px !important; padding: 4px 8px !important; flex-shrink: 0; }
    
    /* ===== کارت‌ها ===== */
    .card, .dash-card { padding: 12px !important; border-radius: 10px !important; margin-bottom: 10px !important; }
    
    /* ===== گریدها ===== */
    .stats-grid, .dash-stats { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 8px !important; 
    }
    .stat-card, .dash-stat { padding: 12px 8px !important; }
    .stat-value, .dash-stat .num { font-size: 22px !important; }
    .stat-label, .dash-stat .lbl { font-size: 9px !important; }
    
    /* ===== جدول‌ها ===== */
    .table-responsive { 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
    }
    .table { font-size: 11px !important; min-width: 500px; }
    .table th, .table td { padding: 7px 6px !important; }
    
    /* ===== فرم‌ها ===== */
    .form-control, input, select, textarea { font-size: 16px !important; }
    .form-group { margin-bottom: 10px !important; }
    
    /* ===== دکمه‌ها ===== */
    .btn, .dash-btn { padding: 8px 12px !important; font-size: 11px !important; }
    .quick-actions, .dash-actions { flex-direction: column !important; }
    .quick-actions a, .dash-actions a { justify-content: center !important; width: 100%; }
    
    /* ===== مدیریت قالب ===== */
    .tm-header { padding: 15px 18px !important; }
    .tm-header h1 { font-size: 16px !important; }
    .tm-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .tm-section { padding: 12px !important; }
    .tm-card { padding: 10px !important; }
    .tm-card-icon { width: 30px !important; height: 30px !important; }
    .tm-card-name { font-size: 10px !important; }
    .tm-card-path { font-size: 7px !important; }
    
    /* ===== منوی شناور ===== */
    .mobile-bottom-nav, .mobile-main-nav {
        display: block !important;
        bottom: 10px !important;
        right: 10px !important;
        left: 10px !important;
        border-radius: 18px !important;
    }
    .floating-center-btn, .floating-media-btn {
        width: 48px !important;
        height: 48px !important;
        top: -18px !important;
        border-radius: 14px !important;
    }
    .floating-center-btn svg, .floating-media-btn svg { width: 22px !important; height: 22px !important; }
    .nav-icon { width: 26px !important; height: 26px !important; }
    .nav-icon svg { width: 18px !important; height: 18px !important; }
    .nav-label { font-size: 7px !important; }
    
    /* ===== فوتر ===== */
    footer { font-size: 10px !important; padding: 15px 8px !important; }
    
    /* ===== مودال ===== */
    #loginModal > div { max-width: 95% !important; margin: 20px auto !important; }
}

/* ===== Mobile کوچک (max-width: 480px) ===== */
@media (max-width: 480px) {
    .stats-grid, .dash-stats, .tm-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .stat-value { font-size: 18px !important; }
    .admin-top-header span { display: none; }
    .admin-top-header .hamburger { display: flex !important; }
    .main-logo-text { font-size: 12px !important; }
    .main-nav svg { width: 18px !important; height: 18px !important; }
}

/* ===== Landscape ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-bottom-nav, .mobile-main-nav { bottom: 0 !important; border-radius: 0 !important; }
    .floating-center-btn, .floating-media-btn { top: -12px !important; width: 40px !important; height: 40px !important; }
    .admin-sidebar { width: 250px !important; }
}