/* =======================================================
   MASTER AUTO-ADJUST MOBILE CSS (For ALL Pages & Tabs)
   ======================================================= */
@media (max-width: 768px) {

    /* --- 1. GLOBAL SCALING (అన్ని పేజీలకి) --- */
    html, body { font-size: 11px !important; overflow-x: hidden !important; }
    body { padding-bottom: 15px !important; }
    
    .container, .container-fluid, .card-body, .p-3, .p-4, .p-5 { padding: 8px !important; }
    .mb-3, .mb-4, .mb-5 { margin-bottom: 8px !important; }
    .g-2, .g-3, .g-4 { --bs-gutter-y: 6px !important; --bs-gutter-x: 6px !important; }

    /* జనరల్ కార్డ్స్ */
    .card { width: 100% !important; margin-bottom: 8px !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; padding: 6px !important;}
    .card-header { padding: 6px 8px !important; font-size: 12px !important; }

    /* --- 2. FORMS & BUTTONS (Control, Mac Replace, Saved) --- */
    .form-control, .form-select, .form-control-lg, .form-select-lg { 
        font-size: 11px !important; 
        height: 32px !important; 
        min-height: 32px !important; 
        padding: 4px 8px !important; 
        border-radius: 6px !important;
    }
    
    .btn, .btn-lg, .btn-sm { 
        font-size: 11px !important; 
        min-height: 30px !important; 
        height: auto !important; 
        padding: 6px 8px !important; 
        width: 100% !important; /* మొబైల్ లో బటన్స్ ఫుల్ విడ్త్ */
        margin-bottom: 6px !important; 
        display: flex; align-items: center; justify-content: center;
        border-radius: 6px !important;
    }
    
    /* పక్కపక్కన ఉన్న బటన్స్ ని ఆటోమేటిక్ గా అడ్జస్ట్ చేయడం */
    .d-grid, .btn-group, .d-flex.gap-2, .d-flex.gap-3 { 
        display: flex !important; 
        flex-wrap: wrap !important; 
        gap: 6px !important; 
        width: 100% !important; 
    }
    .d-flex > .btn { flex: 1 1 auto !important; } /* జాగాని సమానంగా పంచుకుంటాయి */

    /* --- 3. TABLES (Users, Backup, Reporting) --- */
    .table-responsive { 
        width: 100% !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch !important; 
        border: 1px solid rgba(255,255,255,0.1); 
        border-radius: 6px; 
    }
    .table th, .table td { 
        padding: 6px !important; 
        font-size: 10px !important; 
        white-space: nowrap !important; /* టేబుల్ అడ్డదిడ్డంగా విరగకుండా పక్కకి స్క్రోల్ అవుతుంది */
    }

    /* --- 4. VOUCHERS PAGE FIX (చాలా ముఖ్యం) --- */
    .voucher-studio { height: auto !important; flex-direction: column !important; overflow: visible !important;}
    /* ఎడమవైపు ప్యానెల్ సైజ్ కట్ చేసి ఫుల్ విడ్త్ కి సెట్ చేయడం */
    .left-panel { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--vs-border); min-height: auto !important;}
    .right-panel { width: 100% !important; min-height: 350px !important; }
    .form-row { flex-direction: column !important; align-items: stretch !important; gap: 2px !important; margin-bottom: 8px !important;}
    .form-row label { width: 100% !important; font-size: 10px !important; margin-bottom: 2px !important;}
    .style-btns { flex-wrap: wrap !important; }

    /* --- 5. LOGS PAGE FIX --- */
    .log-header { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
    .log-header .d-flex { flex-wrap: wrap !important; width: 100% !important; justify-content: space-between !important; }
    .log-search { width: 100% !important; }
    .log-search:focus { width: 100% !important; }

    /* --- 6. MODALS (Add Client, Edit, Backup Popups) --- */
    .modal-dialog { margin: 8px !important; width: auto !important; max-width: 100% !important;}
    .modal-content { padding: 6px !important; border-radius: 12px !important;}
    .config-box { flex-direction: column !important; width: 100% !important; height: auto !important; }
    .config-sidebar { width: 100% !important; border-right: none !important; padding: 12px !important;}

    /* --- 7. USERS / ACCESS CONTROL --- */
    .auto-options-grid { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* పర్మిషన్స్ బాక్సులు 2 వరసల్లో */
        gap: 6px !important; 
    }
    .auto-options-grid .form-check { padding: 8px !important; margin: 0 !important; font-size: 10px !important;}

    /* --- 8. DASHBOARD / ACTIONS / MANAGE GRID --- */
    .dynamic-grid { 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; /* 2 కార్డ్స్ పక్కపక్కన */
        gap: 6px !important; 
    }
    .router-card { border-top-width: 3px !important; padding: 0 !important; }
    .router-card h6 { white-space: normal !important; word-wrap: break-word !important; font-size: 11px !important; line-height: 1.2 !important; margin-bottom: 4px !important; }
    .router-card .badge { font-size: 8px !important; padding: 2px 4px !important; }
    .router-card .rounded { padding: 4px !important; font-size: 9px !important; margin-bottom: 4px !important; line-height: 1.2 !important; }
    .router-card .btn { padding: 2px 4px !important; font-size: 9px !important; height: 26px !important; margin: 0 !important; }

    /* --- 9. TOP NAVBAR & TABS --- */
    .custom-nav-tabs { gap: 2px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important;}
    .custom-nav-tabs .nav-link { padding: 6px !important; font-size: 10px !important; border-radius: 6px 6px 0 0 !important;}
    .top-navbar { padding: 6px 8px !important; flex-wrap: wrap !important; gap: 4px !important; }

    /* --- 10. 🔥 TOP STATS (CPU/RAM/UPTIME) PC లాగా ఒకే లైన్లో (FIX) 🔥 --- */
    .top-navbar .bg-dark.bg-opacity-50.rounded-4 {
        flex-direction: row !important; /* అడ్డంగా మారుస్తుంది */
        flex-wrap: nowrap !important; /* లైన్ విరగకుండా ఆపుతుంది */
        overflow-x: auto !important; /* పక్కకి స్క్రోల్ అయ్యేలా (PC ఫీల్) */
        -webkit-overflow-scrolling: touch !important; /* మొబైల్ స్మూత్ స్క్రోల్ */
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 8px 12px !important;
        gap: 15px !important;
    }
    
    /* లోపల ఉన్న ఐటెమ్స్ (CPU, RAM) సైజ్ కుచించుకుపోకుండా (squash అవ్వకుండా) ఆపుతుంది */
    .top-navbar .bg-dark.bg-opacity-50.rounded-4 > div {
        flex-shrink: 0 !important; 
    }
    
    .top-navbar .gap-4 {
        gap: 15px !important;
        width: auto !important;
        justify-content: flex-start !important;
    }
    
    /* కంటికి స్క్రోల్ బార్ కనపడకుండా (కానీ వేలుతో స్క్రోల్ అవుతుంది) */
    .top-navbar .bg-dark.bg-opacity-50.rounded-4::-webkit-scrollbar {
        display: none !important;
    }
}