/* =========================================================
           மொபைல் போன்களுக்கான டிசைன் (Hamburger Menu & Mobile Fixes) 
           ========================================================= */
      /* --- MOBILE RESPONSIVE CSS (Fixed Header, Scrollable Content, 1cm Border) --- */
      /* --- MOBILE RESPONSIVE CSS (Fixed Header, Scrollable Content, 1cm Border) --- */
        @media (max-width: 768px) {
            body { 
                flex-direction: column !important; 
                overflow: hidden !important; /* பேஜ் ஒட்டுமொத்தமாக ஸ்க்ரோல் ஆவதைத் தடுக்கும் */
                height: 100vh !important; 
                padding: 1cm 0 !important; /* மேலேயும் கீழேயும் 1cm பார்டர் */
                box-sizing: border-box !important;
            }
            .sidebar { 
                position: fixed !important; 
                top: 1cm !important; /* 1cm பேடிங்கிற்கு கீழே மெனு நிற்கும் */
                left: 0 !important; 
                width: 100% !important; 
                height: auto !important; 
                padding: 15px 0 !important; 
                display: block !important; 
                z-index: 2000 !important; 
                overflow: visible !important; /* மெனு கீழே விரிய இது மிகவும் முக்கியம் */
                border-bottom: 1px solid #34495e !important;
                background-color: #2c3e50 !important; /* பின்னணி நிறம் சேர்க்கப்பட்டது */
            }
            .sidebar-header { margin-bottom: 0 !important; padding: 0 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
            .sidebar-header h2 { text-align: left !important; width: auto !important; font-size: 20px !important; margin: 0 !important; }
            .hamburger { display: block !important; font-size: 26px !important;}
            
            .menu-links { 
                display: none; 
                margin-top: 0px !important; 
                flex-direction: column !important; 
                position: absolute !important; /* மெனு விரிந்து வரும் போது பின்னால் உள்ளவற்றை மறைக்காமல் மேலாக வரும் */
                top: 100% !important;
                left: 0 !important;
                width: 100% !important;
                z-index: 2001 !important;
                box-shadow: 0 4px 6px rgba(0,0,0,0.5) !important;
                background-color: #2c3e50 !important; /* <--- இதுதான் ட்ரான்ஸ்பரன்ட் வராமல் தடுக்கும் FIX */
            }
            .menu-links.show { display: flex !important; }
            .menu-links a { padding: 12px 20px !important; border-bottom: 1px solid #34495e !important; font-size: 14px !important; text-align: left !important; color: white !important;}
            .menu-links a.logout { margin-top: 0 !important; }
            
            .content { 
                margin-left: 0 !important; 
                padding: 15px !important; 
                margin-top: 60px !important; /* மெனுவிற்கான இடைவெளி */
                width: 100% !important; 
                height: calc(100vh - 2cm - 60px) !important; /* கன்டென்ட் மட்டும் ஸ்க்ரோல் ஆகும் படி அமைக்கப்பட்ட அளவு */
                overflow-y: auto !important; 
                box-sizing: border-box !important;
            }
            
            /* Forms and Tables adjustments for mobile */
            .form-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
            .form-row > div { width: 100% !important; }
            .table-responsive { overflow-x: auto !important; width: 100% !important; -webkit-overflow-scrolling: touch !important; border: 1px solid #eee !important; border-radius: 4px !important; }
            .inline-form { flex-direction: column !important; align-items: stretch !important; gap: 5px !important; }
            .inline-form input, .inline-form select, .inline-form button { width: 100% !important; height: 34px !important; font-size: 13px !important; box-sizing: border-box !important;}
        }