/* 
 * css/responsive.css
 * Mobile Responsive Layout Overrides for QMS (Metro UI CSS Compatibility)
 */

@media screen and (max-width: 768px) {

    /* ----------------------------------------------------
     * 3. Responsive Filter Form
     * ---------------------------------------------------- */
    form.mb-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        background: #fcfcfc !important;
        padding: 16px !important;
        /* border-radius: 8px !important; */
        border: 1px solid #e0e0e0 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
        margin-bottom: 20px !important;
    }

    form.mb-2 label {
        font-weight: 600 !important;
        color: #444 !important;
        font-size: 0.95rem !important;
        margin-bottom: -4px !important;
    }

    form.mb-2 .input-control.full-size {
        width: 100% !important;
        margin: 0 !important;
    }

    form.mb-2 select {
        height: 42px !important;
        font-size: 0.95rem !important;
        /* border-radius: 6px !important; */
        border: 1px solid #ccc !important;
        padding: 8px !important;
    }

    form.mb-2 button,
    form.mb-2 a.button {
        width: 100% !important;
        margin: 0 !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        /* border-radius: 6px !important; */
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* Reset spacing on form actions */
    form.mb-2 button[type="submit"] {
        margin-top: 5px !important;
    }

    p {
        text-align: center !important;
        font-size: 0.95rem !important;
        margin: 10px 0 !important;
    }

    /* ----------------------------------------------------
     * 4. Table to Cards Transformation
     * ---------------------------------------------------- */
    table.dataTable {
        border: none !important;
        background: transparent !important;
        margin-top: 15px !important;
        width: 100% !important;
    }

    /* Hide standard headers */
    table.dataTable thead {
        display: none !important;
    }

    table.dataTable,
    table.dataTable tbody,
    table.dataTable tr,
    table.dataTable td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Transform each row into a modern, card-like block */
    table.dataTable tr {
        background-color: #ffffff !important;
        border: 1px solid #e5e5e5 !important;
        border-left: 4px solid #1ba1e2 !important; /* Premium left border accent (Metro Blue) */
        /* border-radius: 8px !important; */
        margin-bottom: 20px !important;
        padding: 12px 16px !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    table.dataTable tr:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
    }

    /* Style cells to act as key-value lines */
    table.dataTable td {
        text-align: right !important;
        padding: 10px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f2f2f2 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 0.95rem !important;
        color: #222 !important;
        font-weight: 500 !important;
        min-height: 40px !important;
    }

    /* Format labels on the left side of cards */
    table.dataTable td::before {
        font-weight: 600 !important;
        color: #777777 !important;
        text-transform: uppercase !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.5px !important;
        text-align: left !important;
        padding-right: 15px !important;
    }

    /* Inject headings sequentially for the database tables based on their unique IDs */

    /* account_list: 8 columns */
    #account_list td:nth-of-type(1)::before { content: "#"; }
    #account_list td:nth-of-type(2)::before { content: "Account Name"; }
    #account_list td:nth-of-type(3)::before { content: "Head"; }
    #account_list td:nth-of-type(4)::before { content: "Sub Head"; }
    #account_list td:nth-of-type(5)::before { content: "Description"; }
    #account_list td:nth-of-type(6)::before { content: "Status"; }
    #account_list td:nth-of-type(7)::before { content: "Created At"; }
    #account_list td:nth-of-type(8)::before { display: none !important; }

    /* category_list: 5 columns */
    #category_list td:nth-of-type(1)::before { content: "#"; }
    #category_list td:nth-of-type(2)::before { content: "Category Name"; }
    #category_list td:nth-of-type(3)::before { content: "Description"; }
    #category_list td:nth-of-type(4)::before { content: "Status"; }
    #category_list td:nth-of-type(5)::before { display: none !important; }

    /* customer_list: 7 columns */
    #customer_list td:nth-of-type(1)::before { content: "#"; }
    #customer_list td:nth-of-type(2)::before { content: "Customer Name"; }
    #customer_list td:nth-of-type(3)::before { content: "Organization"; }
    #customer_list td:nth-of-type(4)::before { content: "City"; }
    #customer_list td:nth-of-type(5)::before { content: "Phone"; }
    #customer_list td:nth-of-type(6)::before { content: "GSTIN"; }
    #customer_list td:nth-of-type(7)::before { display: none !important; }

    /* expense_list: 6 columns */
    #expense_list td:nth-of-type(1)::before { content: "#"; }
    #expense_list td:nth-of-type(2)::before { content: "Debit From"; }
    #expense_list td:nth-of-type(3)::before { content: "Amount"; }
    #expense_list td:nth-of-type(4)::before { content: "Date"; }
    #expense_list td:nth-of-type(5)::before { content: "Remarks"; }
    #expense_list td:nth-of-type(6)::before { display: none !important; }

    /* head_list: 5 columns */
    #head_list td:nth-of-type(1)::before { content: "#"; }
    #head_list td:nth-of-type(2)::before { content: "Head(s)"; }
    #head_list td:nth-of-type(3)::before { content: "Description"; }
    #head_list td:nth-of-type(4)::before { content: "Status"; }
    #head_list td:nth-of-type(5)::before { display: none !important; }

    /* income_list: 6 columns */
    #income_list td:nth-of-type(1)::before { content: "#"; }
    #income_list td:nth-of-type(2)::before { content: "Credit to"; }
    #income_list td:nth-of-type(3)::before { content: "Amount"; }
    #income_list td:nth-of-type(4)::before { content: "Date"; }
    #income_list td:nth-of-type(5)::before { content: "Remarks"; }
    #income_list td:nth-of-type(6)::before { display: none !important; }

    /* ledger: 2 columns (No action column) */
    #ledger td:nth-of-type(1)::before { content: "Account Name"; }
    #ledger td:nth-of-type(2)::before { content: "Balance"; }

    /* member_data: 6 columns (No action column) */
    #member_data td:nth-of-type(1)::before { content: "Sl. No."; }
    #member_data td:nth-of-type(2)::before { content: "Name"; }
    #member_data td:nth-of-type(3)::before { content: "Designation"; }
    #member_data td:nth-of-type(4)::before { content: "Address"; }
    #member_data td:nth-of-type(5)::before { content: "Mobile"; }
    #member_data td:nth-of-type(6)::before { content: "Photo"; }

    /* product_list: 8 columns */
    #product_list td:nth-of-type(1)::before { content: "#"; }
    #product_list td:nth-of-type(2)::before { content: "Item Code"; }
    #product_list td:nth-of-type(3)::before { content: "Item Name"; }
    #product_list td:nth-of-type(4)::before { content: "Brand"; }
    #product_list td:nth-of-type(5)::before { content: "Unit"; }
    #product_list td:nth-of-type(6)::before { content: "Selling Price"; }
    #product_list td:nth-of-type(7)::before { content: "Stock Qty"; }
    #product_list td:nth-of-type(8)::before { display: none !important; }

    /* quotation_list: 7 columns */
    #quotation_list td:nth-of-type(1)::before { content: "#"; }
    #quotation_list td:nth-of-type(2)::before { content: "Quotation No"; }
    #quotation_list td:nth-of-type(3)::before { content: "Customer Details"; }
    #quotation_list td:nth-of-type(4)::before { content: "Quotation Date"; }
    #quotation_list td:nth-of-type(5)::before { content: "Valid Until"; }
    #quotation_list td:nth-of-type(6)::before { content: "Total Amount"; }
    #quotation_list td:nth-of-type(7)::before { display: none !important; }

    /* subhead_list: 5 columns */
    #subhead_list td:nth-of-type(1)::before { content: "#"; }
    #subhead_list td:nth-of-type(2)::before { content: "Sub Head(s)"; }
    #subhead_list td:nth-of-type(3)::before { content: "Description"; }
    #subhead_list td:nth-of-type(4)::before { content: "Status"; }
    #subhead_list td:nth-of-type(5)::before { display: none !important; }

    /* unit_list: 5 columns */
    #unit_list td:nth-of-type(1)::before { content: "#"; }
    #unit_list td:nth-of-type(2)::before { content: "Unit Name"; }
    #unit_list td:nth-of-type(3)::before { content: "Description"; }
    #unit_list td:nth-of-type(4)::before { content: "Status"; }
    #unit_list td:nth-of-type(5)::before { display: none !important; }

    /* user_data: 9 columns */
    #user_data td:nth-of-type(1)::before { content: "Sl. No."; }
    #user_data td:nth-of-type(2)::before { content: "Name"; }
    #user_data td:nth-of-type(3)::before { content: "Section"; }
    #user_data td:nth-of-type(4)::before { content: "Type"; }
    #user_data td:nth-of-type(5)::before { content: "Email"; }
    #user_data td:nth-of-type(6)::before { content: "Mobile"; }
    #user_data td:nth-of-type(7)::before { content: "Status"; }
    #user_data td:nth-of-type(8)::before { content: "Documents Uploaded"; }
    #user_data td:nth-of-type(9)::before { display: none !important; }

    /* Special treatment for Action Column (Edit / Delete buttons) */
    table.dataTable:not(#ledger):not(#member_data) td:last-child {
        border-bottom: none !important;
        justify-content: space-between !important;
        padding-top: 15px !important;
        margin-top: 5px !important;
        display: flex !important;
        gap: 12px !important;
    }

    table.dataTable:not(#ledger):not(#member_data) td:last-child a.button {
        flex: 1 !important;
        text-align: center !important;
        display: inline-block !important;
        padding: 10px 0 !important;
        height: 38px !important;
        line-height: 18px !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        /* border-radius: 6px !important; */
        font-weight: 500 !important;
    }

    /* ----------------------------------------------------
     * 5. DataTable JS Plugin Layout Controls
     * ---------------------------------------------------- */
    /* Stack controls like entries, search filter, and paging */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin: 12px 0 !important;
        display: block !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_filter label {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        height: 38px !important;
        /* border-radius: 6px !important; */
        border: 1px solid #ccc !important;
        padding: 6px 12px !important;
        font-size: 0.9rem !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        display: inline-block !important;
        margin: 2px 4px !important;
        padding: 6px 12px !important;
        /* border-radius: 4px !important; */
        font-size: 0.85rem !important;
    }
}