/* Brescart — tables.css
 * Tables sur fond ink-elev, mono JetBrains, highlight cuivre au hover.
 */

.br-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-xl);
    background: var(--c-ink-elev);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--c-ink-line);
}

table.br-sortable,
table.br-scorecard,
table.br-matrix,
table.br-trj-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--f-mono);
    font-size: 14px;
    color: var(--c-pearl);
    font-variant-numeric: tabular-nums;
    min-width: 560px;
}

.br-sortable thead th,
.br-scorecard thead th,
.br-matrix thead th,
.br-trj-table thead th {
    background: var(--c-ink-deep);
    text-align: left;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-mist);
    font-weight: 600;
    padding: 18px 20px;
    border-bottom: 1px solid var(--c-ink-line);
    white-space: nowrap;
}

.br-sortable tbody td,
.br-scorecard tbody td,
.br-matrix tbody td,
.br-trj-table tbody td {
    padding: 16px 20px;
    border-top: 1px solid var(--c-ink-line);
    vertical-align: middle;
    color: var(--c-cream);
}

.br-sortable tbody tr,
.br-matrix tbody tr,
.br-trj-table tbody tr {
    transition: background var(--dur-fast) var(--ease-out);
}
.br-sortable tbody tr:hover,
.br-matrix tbody tr:hover,
.br-trj-table tbody tr:hover {
    background: rgba(201, 111, 74, 0.06);
}

.br-scorecard tbody tr:nth-child(odd)  { background: transparent; }
.br-scorecard tbody tr:nth-child(even) { background: var(--c-ink-ghost); }
.br-scorecard tbody th {
    text-align: left;
    font-weight: 500;
    font-family: var(--f-body);
    font-size: 14px;
    padding: 16px 20px;
    color: var(--c-pearl);
}
.br-scorecard tbody td {
    color: var(--c-cream);
    text-align: right;
}

/* Section crème inversée */
.br-section--ardoise .br-table-scroll {
    background: var(--c-cream);
    border-color: var(--c-bone);
    box-shadow: var(--shadow-card-light);
}
.br-section--ardoise table.br-sortable,
.br-section--ardoise table.br-scorecard,
.br-section--ardoise table.br-matrix,
.br-section--ardoise table.br-trj-table {
    color: var(--c-ink);
}
.br-section--ardoise thead th {
    background: var(--c-bone);
    color: var(--c-mist-2);
}
.br-section--ardoise tbody td {
    border-top-color: var(--c-bone);
    color: var(--c-ink);
}
.br-section--ardoise tbody tr:hover { background: rgba(201, 111, 74, 0.08); }

th.br-sort {
    cursor: pointer;
    user-select: none;
}
th.br-sort::after {
    content: " ↕";
    color: var(--c-mist-2);
    font-size: 10px;
}
th.br-sort.is-asc::after  { content: " ↑"; color: var(--c-copper); }
th.br-sort.is-desc::after { content: " ↓"; color: var(--c-copper); }

.br-sortable td .br-logo {
    width: 32px; height: 32px;
    object-fit: contain;
    background: var(--c-bone);
    border-radius: var(--r-sm);
    vertical-align: middle;
    padding: 2px;
}

.br-sortable td .br-name-cell {
    font-family: var(--f-body);
    font-weight: 600;
    color: var(--c-cream);
    border-bottom: 0;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.br-sortable td .br-name-cell:hover { color: var(--c-copper); }
.br-section--ardoise .br-sortable td .br-name-cell { color: var(--c-ink); }
.br-section--ardoise .br-sortable td .br-name-cell:hover { color: var(--c-copper-deep); }

/* Table TRJ — logique couleur */
.br-trj-table th[scope="row"] {
    font-family: var(--f-body);
    font-weight: 600;
    text-align: left;
    color: var(--c-cream);
    padding: 16px 20px;
    border-top: 1px solid var(--c-ink-line);
}
.br-section--ardoise .br-trj-table th[scope="row"] {
    color: var(--c-ink);
    border-top-color: var(--c-bone);
}
.br-trj-near {
    color: var(--c-sage);
    font-weight: 600;
}
.br-trj-mid  { color: var(--c-cream); }
.br-trj-low  { color: var(--c-mist); }
.br-trj-over {
    color: var(--c-danger);
    font-weight: 600;
}
.br-section--ardoise .br-trj-near { color: var(--c-sage-deep); }
.br-section--ardoise .br-trj-mid  { color: var(--c-ink); }
.br-section--ardoise .br-trj-low  { color: var(--c-mist-2); }

.br-trj-table thead th:nth-child(n+2) { text-align: right; }
.br-trj-table tbody td:nth-child(n+2) { text-align: right; }

/* Matrix */
.br-matrix td { text-align: center; }
.br-matrix td:first-child,
.br-matrix td:nth-child(2) { text-align: left; }
.br-matrix td.br-yes {
    color: var(--c-sage);
    font-weight: 700;
    font-size: 16px;
}
.br-matrix td.br-no {
    color: var(--c-mist-2);
}
.br-section--ardoise .br-matrix td.br-yes { color: var(--c-sage-deep); }

.br-scorecard td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* TRJ chart SVG */
.br-trj-chart {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: var(--space-block) 0;
    background: var(--c-ink-elev);
    border: 1px solid var(--c-ink-line);
    border-radius: var(--r-xl);
    padding: 24px;
}
.br-section--ardoise .br-trj-chart {
    background: var(--c-cream);
    border-color: var(--c-bone);
}