/* ==========================================================================
   Generic Data Grid Layout Matrices
   ========================================================================== */
.grid-data-canvas {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

table.interactive-grid {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 15px;
}

table.interactive-grid thead tr {
    background-color: #182659 !important;
}

table.interactive-grid thead th {
    color: #ffffff !important;
    padding: 14px 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    border-bottom: 2px solid #eb8d00;
}

table.interactive-grid tbody td {
    padding: 12px 10px;
    color: #333333;
    border-bottom: 1px solid #e9ecef;
}

table.interactive-grid tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

table.interactive-grid tbody tr.linkable-row:hover {
    background-color: #fef5e6 !important;
    color: #eb8d00;
}

/* ==========================================================================
   Text Alignment Grid Utilities & Header Alignment Synchronisation
   ========================================================================== */

/* 1. Set the default fallback look for all table text blocks to center */
table.interactive-grid thead th,
table.interactive-grid tbody td {
    text-align: center;
}

/* 2. Left Alignment Utility Overrides */
table.interactive-grid th.align-left,
table.interactive-grid td.align-left {
    text-align: left !important;
}

/* 3. Right Alignment Utility Overrides (Great for numerical scores/points) */
table.interactive-grid th.align-right,
table.interactive-grid td.align-right {
    text-align: right !important;
}

/* 4. DataTables Library Alignment Shield Fix */
/* Stops the third-party library from forcing left alignments on fixed headers */
table.dataTable th,
table.dataTable td {
    box-sizing: border-box;
}
