/* responsive.css */

/* General mobile-first adjustments */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Force tables to be scrollable horizontally on small screens */
    .table-responsive {
        border: 0;
        margin-bottom: 1rem;
    }

    /* Stack dashboard cards vertically on mobile */
    .row.g-3 .col-md-3 {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Adjust Card Header Font Sizes */
    .card-header {
        font-size: 0.9rem;
        padding: 10px;
    }

    /* Make Ledger Action Buttons easier to tap on mobile */
    .btn-group .btn, .btn-sm {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* Hide non-essential columns on mobile to save space */
    .hide-on-mobile {
        display: none !important;
    }

    /* Invoice Layout Adjustments */
    #invoice_preview .card {
        padding: 15px !important;
    }

    #invoice_preview h1 {
        font-size: 1.5rem;
    }

    /* Stack Invoice totals on mobile */
    .col-md-7, .col-md-5 {
        width: 100%;
    }
}

/* Specific fix for DataTables on small screens */
div.dataTables_wrapper div.dataTables_length, 
div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
    margin-bottom: 10px;
}

div.dataTables_wrapper div.dataTables_info, 
div.dataTables_wrapper div.dataTables_paginate {
    text-align: center;
    margin-top: 10px;
}

/* Mobile-First Responsive Overrides */
@media (max-width: 768px) {
    /* 1. Layout & Containers */
    .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 2. Login Page Specifics */
    .login-card {
        margin: 20px;
        max-width: 90% !important;
    }

    /* 3. Dashboard Stats Cards */
    /* Forces the 4 cards (Revenue, Expenses, etc.) to stack 1-per-row */
    .row.g-3 .col-md-3, 
    .row.g-4 .col-md-3, 
    .row.mb-4 .col-md-3 {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* 4. DataTables & General Tables */
    /* Wraps tables in a scrollable box so they don't break the page width */
    .table-responsive, 
    div.dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Adjust DataTable Search and Length inputs for mobile */
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_length {
        text-align: left !important;
        margin-top: 10px;
    }

    /* 5. Buttons & Touch Targets */
    .btn {
        width: 100%; /* Make buttons full-width for easier thumb clicking */
        margin-bottom: 8px;
        padding: 10px;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column; /* Stack 'Edit' and 'Delete' buttons */
        width: 100%;
    }

    .btn-group .btn {
        border-radius: 4px !important;
        margin-bottom: 4px;
    }

    /* 6. Ledger/Invoice Specifics */
    /* Ensures the invoice preview doesn't have massive white margins on mobile */
    #invoice_preview {
        padding: 10px !important;
        font-size: 12px; /* Smaller font for mobile printing/viewing */
    }

    .modal-dialog {
        margin: 10px;
    }
}

/* 7. Navbar Fix */
@media (max-width: 991px) {
    .navbar-collapse {
        background: #000;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        margin-top: 0px;
    }
}






/* --- Global Responsive Layout --- */

/* 1. Navbar Mobile Fix */
@media (max-width: 991.98px) {
    .navbar-collapse {
        /* Ensures menu is visible over content when toggled */
        background-color: #000;
        padding: 1rem;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        margin-top: 0px;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
}

/* 2. Dashboard & Module Cards */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Stack all grid columns (col-md-x) to 100% width */
    .col-md-3, .col-md-4, .col-md-6, .col-md-8 {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Adjust headings for small screens */
    h3 { font-size: 1.25rem; }
    
    /* Make buttons full-width for easy thumb-tap */
    .btn:not(.btn-sm) {
        width: 100%;
        margin-bottom: 5px;
    }
}

/* 3. Table Responsiveness (Critical for Ledger & Items) */
.table-responsive {
    border: 0 !important;
}

@media (max-width: 576px) {
    /* Hide non-critical info on very small phones */
    .hide-xs {
        display: none !important;
    }
    
    /* Ensure DataTables controls stack nicely */
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_length {
        text-align: left !important;
        margin-bottom: 10px;
    }
}

/* 4. Modal Fixes */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
    }
}