/* ===================================================================
   responsive.css
   -------------------------------------------------------------------
   मोबाईल, टॅब्लेट व कॉम्प्युटर — तिन्ही स्क्रीनवर व्यवस्थित हाताळता यावं
   यासाठी सर्व GP/Admin डॅशबोर्ड पानांमध्ये समाविष्ट करण्याची एकमेव
   (Single Source of Truth) CSS फाईल.

   या प्रोजेक्टमधील बहुतेक डॅशबोर्ड पानं sidebar साठी खालील ठराविक
   क्लासेस वापरतात: .sidebar, .col-md-3.col-lg-2, .col-md-9.col-lg-10
   — त्यामुळे हीच एक फाईल सगळीकडे काम करते.
   =================================================================== */

/* हॅम्बर्गर मेनू बटण — फक्त मोबाईल/टॅब्लेटवर दिसेल */
.mobile-toggle-btn {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1060;
    background: var(--primary-earth, #37474F);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    line-height: 42px;
    text-align: center;
}
.mobile-toggle-btn:active { transform: scale(0.95); }

/* Sidebar उघडं असताना मागचा भाग गडद करणारा पडदा (Overlay) */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1040;
}
.sidebar-overlay.active { display: block; }

@media (max-width: 991.98px) {
    .mobile-toggle-btn { display: block; }

    /* Sidebar ला स्क्रीनच्या डावीकडे लपवून ठेवणे, बटण दाबल्यावरच सरकून येईल */
    .sidebar.col-md-3, .col-md-3.col-lg-2.sidebar, div[class*="sidebar"] {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 260px !important;
        max-width: 82vw !important;
        flex: 0 0 260px !important;
        z-index: 1050;
        transform: translateX(-105%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        height: 100vh !important;
        padding-top: 55px !important;
    }
    .sidebar.mobile-active, div[class*="sidebar"].mobile-active {
        transform: translateX(0);
    }

    /* मुख्य कन्टेन्ट पूर्ण रुंदीत, वरती हॅम्बर्गर बटणासाठी थोडी जागा */
    .col-md-9.col-lg-10 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        padding-top: 58px !important;
    }
    .container-fluid > .row { margin-left: 0 !important; margin-right: 0 !important; }
}

@media (max-width: 767.98px) {
    body { font-size: 12px !important; }
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3, h4 { font-size: 16px !important; }
    h5 { font-size: 14px !important; }
    .card-body { padding: 10px !important; }
    .btn { white-space: normal; }
}

/* ===================================================================
   मोठे डेटा तक्ते (tables) मोबाईल/टॅब्लेटवर आडवे स्क्रोल होण्यासाठी
   — table-responsive wrapper नसला तरीही आपोआप लागू होईल
   =================================================================== */
@media (max-width: 991.98px) {
    table.table-custom, table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table.table-custom thead, table.table thead,
    table.table-custom tbody, table.table tbody {
        display: table;
        width: 100%;
    }
}

/* फॉर्म इनपुट्स लहान स्क्रीनवरही सहज दाबता यावेत यासाठी किमान उंची */
@media (max-width: 767.98px) {
    .form-control, .form-select, .btn { min-height: 34px; }
}