/*
 * Condensed Tables CSS
 * 
 * This stylesheet provides utilities to make Bootstrap tables more compact
 * and responsive to eliminate horizontal scrolling on smaller screens.
<!-- For standard condensed tables -->
<table class="table table-condensed-custom">
    <!-- table content -->
</table>

<!-- For extremely condensed tables -->
<table class="table table-condensed-custom table-ultra-condensed">
    <!-- table content -->
</table>

<!-- For responsive stacking on mobile -->
<table class="table table-condensed-custom table-responsive-stack">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Header 1">Data 1</td>
            <td data-label="Header 2">Data 2</td>
        </tr>
    </tbody>
</table>

<!-- For fixed column widths -->
<table class="table table-condensed-custom table-fixed-column">
    <!-- Apply width classes to th or td elements -->
    <th class="w-10">Narrow Column</th>
    <th class="w-25">Medium Column</th>
</table>
*/

/* Base condensed table - reduces padding and font size */
.table-condensed-custom {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 0.875rem; /* Slightly smaller text */
}

.table-condensed-custom th,
.table-condensed-custom td {
    padding: 0.5rem 0.5rem; /* Reduced padding */
    vertical-align: middle;
    border-top: 1px solid #d3d8de;
}

/* Reduce padding even further on smaller screens */
@media (max-width: 1200px) {
    .table-condensed-custom th,
    .table-condensed-custom td {
        padding: 0.3rem 0.3rem;
        font-size: 0.85rem;
    }
}

/* Tighten up form controls within tables */
.table-condensed-custom .form-control {
    padding: 0.25rem 0.5rem;
    height: auto !important;
    min-height: 30px;
    font-size: 0.875rem;
}

/* Force table to not be like tables on mobile devices */
@media (max-width: 767.98px) {
    .table-responsive-stack {
        display: block;
    }
    
    .table-responsive-stack thead {
        display: none;
    }
    
    .table-responsive-stack tbody,
    .table-responsive-stack tr {
        display: block;
        width: 100%;
    }
    
    .table-responsive-stack td {
        display: flex;
        width: 100%;
        border-top: none;
        position: relative;
        padding-left: 50%;
    }
    
    .table-responsive-stack td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
    
    .table-responsive-stack tr {
        border-bottom: 1px solid #d3d8de;
        margin-bottom: 0.5rem;
    }
}

/* Optimize text overflow for all tables */
.table-condensed-custom th,
.table-condensed-custom td {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fixed column widths - use sparingly for important columns */
.table-fixed-column {
    table-layout: fixed;
}

.table-fixed-column .col-xs {
    width: 5%;
}

.table-fixed-column .col-sm {
    width: 10%;
}

.table-fixed-column .col-md {
    width: 15%;
}

.table-fixed-column .col-lg {
    width: 20%;
}

/* Add nowrap only to headers but allow wrapping in body */
.table-condensed-custom thead th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-condensed-custom tbody td {
    white-space: normal;
}

/* Styles for extremely tight tables */
.table-ultra-condensed th,
.table-ultra-condensed td {
    padding: 0.2rem 0.3rem;
    font-size: 0.8rem;
}

/* Hover effect consistent with your current styling */
.table-condensed-custom tbody tr:hover {
    background-color: #d0eaf5 !important;
}

/* Maintain stripe styling from your existing CSS */
.table-condensed-custom.table-striped tbody tr:nth-of-type(odd) {
    background-color: #e8f4fa !important;
}

/* Header styling consistent with your theme */
.table-condensed-custom thead th {
    background-color: #2c3e50;
    color: #fff;
    font-weight: bold;
    border-bottom: 0;
}

/* Utility classes for column widths */
.w-5 { width: 5% !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-25 { width: 25% !important; }
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-50 { width: 50% !important; }

/* Override any max-width constraints that might cause horizontal scrolling */
.container-fluid .table-responsive,
.container .table-responsive {
    overflow-x: visible;
}

@media (max-width: 992px) {
    .container-fluid .table-responsive,
    .container .table-responsive {
        overflow-x: auto;
    }
}