/* ============================================================
   MOBILE RESPONSIVE CSS
   Sirf Mobile & Tablet ke liye
   Desktop CSS ke BAAD link karo:
   main.min.css → custom.css → desktop-fixes.css → mobile-responsive.css
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   TABLET — 768px to 991px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* ── Tables — horizontally scrollable ──────────────────── */

    .table thead th,
    .table tbody td {
        white-space: nowrap !important;
    }

    .settings-table thead th,
    .settings-table tbody td,
    #accordionTable thead th,
    #accordionTable tbody td {
        white-space: normal !important;
    }

    #accordionTable .hiddenRow .row.p-4{
        padding: 5px  !important;
    }
     #accordionTable .hiddenRow .row .row div:first-child {
        width: 100% !important;
     }
    .card-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .profile-col-mid {
        order: 3 !important;
    }

    /* Profile menu — horizontal */
    .page-container .profile-header-menu {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 4px 0 !important;
    }

    .page-container .profile-header .profile-header-menu ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        justify-content: center;
    }

    .lookup-wrapper .profile-header .profile-header-menu ul {
        place-self: center !important;
    }
    .profile-header .profile-name span {
        color: #000 !important;
    }

     /* ── Lookup Wrapper ──────────────────────────────────────── */
    .lookup-wrapper {
        padding: 20px !important;
    }

}


/* ════════════════════════════════════════════════════════════
   MOBILE — max-width: 767px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    
    
    /* ── Body text ─────────────────────────────────────────────── */
    html , body{
        font-size: 12.5px !important;
    }

    /* ── Table ─────────────────────────────────────────────── */
    table.settings-table{
        min-width: 420px !important;
          overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #accordionTable

    /* ── Navbar ─────────────────────────────────────────────── */
    .page-header .navbar {
        padding: 10px 10px !important;
    }

    /* ── Cards ──────────────────────────────────────────────── */
     .card {
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    .card-body {
        padding: 12px !important;
    }

    .card-header {
        padding: 10px 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px 6px !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .card-header .card-title {
        order: -1 !important;
        margin: 2px auto 2px 0 !important;
        font-size: 15px !important;
    }

    .card-header .btn-right,
    .card-header .btn-addnew,
    .card-header .actions {
        float: none !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        font-size: 12px !important;
    } 


    /* ── Buttons ─────────────────────────────────────────────── */
    .btn {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }


 

    /* ── Profile Header ──────────────────────────────────────── */
  

    .profile-header {
        padding: 0 5px !important;
        margin-bottom: 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .profile-header .profile-img {
        float: none !important;
    }

    .profile-header .profile-img img {
        width: 75px !important;
        height: 75px !important;
    }

    .profile-header .profile-name {
        margin-top: -20px !important;
        margin-left: 10px !important;
        text-align: start   !important;
        flex: 1 !important;
    }
    
    .profile-header .profile-name h3 {
        font-size: 14px !important;
        color: #fff !important;
    }
    
    .profile-header .profile-name span {
        color: #fff !important;
        font-size: 12px !important;
    }



    .profile-header .profile-header-menu ul li {
        padding-left: 0 !important;
        padding-right: 0 !important;

    }

    .page-container .profile-header-menu ul li a {
        display: inline-block !important;
        padding: 4px 4px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #000 !important;
        opacity: 0.8 !important;
    } 
    .profile-header-menu ul li a.active {
        color: #000 !important;
        opacity: 1 !important;
    }

   
    /* ── Modals ──────────────────────────────────────────────── */

    .modal-body {
        height: 70vh !important;
    }


    /* ── Lookup Wrapper ──────────────────────────────────────── */
    .lookup-wrapper {
        padding: 10px !important;
    }

    /* ── Roles Permissions buttons ───────────────────────────── */
     .btn-permission {
        font-size: 10.5px !important;
        padding: 3px 8px !important;
        margin-bottom: 5px !important;
    }

 

    /* ── Collections report form ─────────────────────────────── */
    .card-header form{
        width: 100% !important;
    } 
    .card-header form .input-group {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .card-header form .input-group>* {
        width: 49% !important;
        border-radius: 7px !important;
        flex-grow: 1;
    }



    /* ── Bottom Notice ───────────────────────────────────────── */
    .bottomNotice {
        left: 8px !important;
        bottom: 10px !important;
    }

    .bottomNotice .notice-item {
        font-size: 12px !important;
        padding: 10px !important;
    }
}