/* COMP STATS */
/* Responsive wrapper for tables with horizontal scrolling */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-responsive-wrapper table {
    min-width: 100%;
    border-collapse: collapse;
}

/* Scrollbar styling for better UX */
.table-responsive-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-responsive-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-responsive-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Sticky first column functionality */
.sticky-first-col {
    position: relative;
}

.sticky-first-col table {
    border-collapse: separate;
    border-spacing: 0;
}

.sticky-first-col td:first-child,
.sticky-first-col th:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
    border-right: 2px solid #dee2e6;
}

.sticky-first-col tr.darkline td:first-child,
.sticky-first-col tr.darkline th:first-child {
    background: #f8f9fa;
}

/* Table variants - minimum widths */
.table.splits {
    width: 100%;
    min-width: 280px;
}

.table.nohover {
    width: 100%;
    min-width: 600px;
}

.table.records-table {
    width: 100%;
    min-width: 700px;
}

/* Table styling utilities */
.table.splits td {
    padding: 0.3rem;
}

.table.nohover tr:hover {
    background-color: transparent;
}

.table-sm {
    font-size: 0.875rem;
}

/* Row and cell utilities */
.row_description {
    font-weight: normal;
    white-space: nowrap;
    min-width: 120px;
}

.rightline {
    border-right: 1px solid #dee2e6;
}

.leftline {
    border-left: 1px solid #dee2e6;
}

.darkline td, 
.darkline th {
    border-bottom: 2px solid #495057;
    font-weight: bold;
}

.bold {
    font-weight: bold;
}

.neutral {
    background-color: transparent;
}

/* Triangle list styling */
ul.triangle {
    list-style-type: none;
    padding-left: 0;
    font-size: 0.875rem;
}

ul.triangle li:before {
    content: "▸ ";
}

/* Rank colors - light green (best) to light red (worst) through white */
.rankcolor1 { background-color: #A0E6B0 !important; }
.rankcolor2 { background-color: #ACE9BA !important; }
.rankcolor3 { background-color: #B8ECC4 !important; }
.rankcolor4 { background-color: #C4EFCE !important; }
.rankcolor5 { background-color: #D0F3D8 !important; }
.rankcolor6 { background-color: #DBF6E1 !important; }
.rankcolor7 { background-color: #E7F9EB !important; }
.rankcolor8 { background-color: #F3FCF5 !important; }
.rankcolor9 { background-color: #FDE8E8 !important; }
.rankcolor10 { background-color: #FCD1D1 !important; }
.rankcolor11 { background-color: #FAB9B9 !important; }
.rankcolor12 { background-color: #F9A2A2 !important; }
.rankcolor13 { background-color: #F78B8B !important; }
.rankcolor14 { background-color: #F57474 !important; }
.rankcolor15 { background-color: #F45C5C !important; }
.rankcolor16 { background-color: #F24545 !important; }

/* Responsive adjustments */
@media (max-width: 991px) {
    .table-sm {
        font-size: 0.85rem;
    }
    .table-sm td {
        padding: 0.25rem;
    }
}

@media (max-width: 768px) {
    .table td, 
    .table th {
        padding: 0.25rem;
        font-size: 0.8rem;
    }
    
    .table.splits td {
        padding: 0.2rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .table-sm {
        font-size: 0.8rem;
    }
    .table-sm small {
        font-size: 0.7rem;
    }
}