/* ==========================================================================
   Cross Counties Native Layout - Master Data Grid Layout Matrices
   File: public/custom_code_css/Tables.css
   ========================================================================== */

.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;
}

table.interactive-grid.yearbook {
    margin-bottom: 25px !important;
}

/* Base style for column headers */
table.interactive-grid thead th {
    background-color: #182659 !important;
    color: #ffffff !important;
    padding: 14px 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 2px solid #eb8d00;
}

/* Base style for table rows */
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;
}

/* ==========================================================================
   Stacked Multi-Row Header Style Reset
   ========================================================================== */
table.interactive-grid thead tr th,
table.dataTable thead tr th {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Force the line to ONLY live at the absolute bottom of the entire header stack */
table.interactive-grid thead tr:first-child th {
    border-bottom: none !important;
}

table.interactive-grid thead tr:last-child th {
    border-bottom: 2px solid #eb8d00 !important;
}

/* ==========================================================================
   Text Alignment Grid Utilities & Baseline Centers
   ========================================================================== */

/* CORE RULES: Highly specific selector framework to force complete centering 
   by default, crushing third-party DataTables right/left default overrides */
table.interactive-grid thead th,
table.interactive-grid tbody td,
table.interactive-grid thead th.sorting,
table.interactive-grid thead th.sorting_asc,
table.interactive-grid thead th.sorting_desc,
table.dataTable thead th,
table.dataTable tbody td,
table.dataTable tbody tr td.dt-type-numeric,
table.dataTable thead th.dt-type-numeric {
    text-align: center !important;
}

/* Override utility: Explicitly shifts text back to the left when added to class lists */
table.interactive-grid th.align-left,
table.interactive-grid td.align-left,
table.dataTable thead th.align-left,
table.dataTable tbody td.align-left {
    text-align: left !important;
}

/* Override utility: Explicitly shifts text back to the right when added to class lists */
table.interactive-grid th.align-right,
table.interactive-grid td.align-right,
table.dataTable thead th.align-right,
table.dataTable tbody td.align-right {
    text-align: right !important;
}

/* ==========================================================================
   Explicit Layout Vertical Grid Separators (Borders)
   ========================================================================== */

/* Left column boundary separator accent */
table.interactive-grid th.leftborder,
table.interactive-grid td.leftborder {
    border-left: 2px solid #666666 !important;
    text-align: center !important; /* 💡 Forces center alignment */
}

/* Right column boundary separator accent */
table.interactive-grid th.rightborder,
table.interactive-grid td.rightborder {
    border-right: 2px solid #666666 !important;
    text-align: center !important; /* 💡 Forces center alignment */
}

/* Dual boundary separator accents for boxed segments */
table.interactive-grid th.bothborder,
table.interactive-grid td.bothborder {
    border-left: 2px solid #666666 !important;
    border-right: 2px solid #666666 !important;
    text-align: center !important; /* 💡 Forces center alignment on All Comps */
}

/* ==========================================================================
   DataTables Library Optimization Shield
   ========================================================================== */
table.interactive-grid,
table.interactive-grid *,
table.dataTable,
table.dataTable * {
    box-sizing: border-box !important;
}

/* Keeps sorting arrows crisp on the deep dark blue background strip */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-color: #182659 !important;
    color: #ffffff !important;
}


/* =========================================================================
   Interactive Grid Row Hover States & Clickable Cursors
   ========================================================================= */

/* 1. Changes the mouse cursor to a pointer when hovering over an explicitly selectable row */
.myTable tbody tr.selectable,
.interactive-grid tbody tr.selectable {
    cursor: pointer;
}

/* 2. Soft highlight background change when hovering over an active row */
.myTable tbody tr.selectable:hover,
.interactive-grid tbody tr.selectable:hover {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Soft dark tint */
    transition: background-color 0.15s ease-in-out;    /* Smooth fade in/out */
}

/* 3. Dark mode safety tint */
@media (prefers-color-scheme: dark) {
    .myTable tbody tr.selectable:hover,
    .interactive-grid tbody tr.selectable:hover {
        background-color: rgba(255, 255, 255, 0.08) !important; /* Soft light tint */
    }
}

/* ==========================================================================
   Generic Tab Grid UI Utilites
   ========================================================================== */

/* Safely hides layout index parameters from view while retaining DOM data layers */
.hidden-col {
    display: none !important;
}