/* Custom layout adjustments */
.container, .container-wide, .container-fluid {
    max-width: 95% !important;  /* Increase from default (usually 1320px at xxl breakpoint) to 95% of viewport width */
    width: 95% !important;
}

/* Maintain responsiveness for different screen sizes */
@media (min-width: 1400px) {
    .container, .container-wide, .container-fluid {
        max-width: 95% !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .container, .container-wide, .container-fluid {
        max-width: 95% !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .container, .container-wide, .container-fluid {
        max-width: 95% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .container, .container-wide, .container-fluid {
        max-width: 95% !important;
    }
}

@media (max-width: 767px) {
    .container, .container-wide, .container-fluid {
        max-width: 95% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Table row and column styles */
.table td, .table th {
    vertical-align: middle !important;
    height: 24px !important; /* Single line row height */
    line-height: 1 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative;
}

/* Default column widths - these will be adjustable */
.table th:nth-child(1), .table td:nth-child(1) { width: 80px; } /* Invoice number */
.table th:nth-child(2), .table td:nth-child(2) { width: 120px; } /* Client name */
.table th:nth-child(3), .table td:nth-child(3) { width: 150px; } /* Address */
.table th:nth-child(4), .table td:nth-child(4) { width: 100px; } /* Issue date */
.table th:nth-child(5), .table td:nth-child(5) { width: 100px; } /* Total amount */
.table th:nth-child(6), .table td:nth-child(6) { width: 100px; } /* Total paid */
.table th:nth-child(7), .table td:nth-child(7) { width: 100px; } /* Balance due */
.table th:nth-child(8), .table td:nth-child(8) { width: 100px; } /* Status */
.table th:nth-child(9), .table td:nth-child(9) { width: 80px; } /* WhatsApp */
.table th:nth-child(10), .table td:nth-child(10) { width: 120px; } /* Actions */

/* Ensure table takes full width but allows column resizing */
.table {
    width: 100% !important;
    table-layout: fixed !important;
}

/* Resizable column styles */
.resizable-column {
    position: relative;
}

.column-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background-color: transparent;
    cursor: col-resize;
    z-index: 10;
}

.column-resizer:hover, .column-resizer.resizing {
    background-color: #007bff;
}

/* Add a subtle visual indicator for resizable columns */
.table th:hover {
    background-color: #f8f9fa;
}

/* Print-specific styles */
@media print {
    body {
        margin: 0;
        padding: 0;
        background-color: #fff;
    }
    
    .container, .container-wide, .container-fluid {
        width: 97% !important;
        max-width: 97% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0.125cm !important;
    }
    
    /* Override any page-specific container settings for print */
    .invoice-container, .statement-container {
        width: 97% !important;
        max-width: 97% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}