.tables-section {
    padding: 2rem 0;
    background: var(--bg);
}

#tables-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.category-table {
    background: var(--white);
    border: 1px solid var(--border);
}

.category-header {
    background: var(--dark);
    color: var(--white);
    padding: 0.2rem 1.25rem;
    height: 2.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-header h2 {
    font-size: 0.9rem;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: 0.03em;
}

.category-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

.data-table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-family: var(--font);
}

.data-table thead {
    background: #fafafa;
    border-bottom: 2px solid var(--border);
}

.data-table th {
    padding: 0.2rem 1rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: normal;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: help;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.15s;
}

.data-table th:hover {
    background: #efefef;
    color: var(--text);
}

.data-table th:first-child {
    text-align: left;
}

.data-table th .header-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: calc(13ch * 85 / 72);
}

.data-table th .info-icon {
    width: 11px;
    height: 11px;
    opacity: 0.35;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.data-table th:hover .info-icon {
    opacity: 0.75;
}

.data-table td {
    padding: 0.2rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: #fafafa;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.date-cell {
    font-family: var(--font-mono);
    font-size: 0.83rem;
    white-space: nowrap;
}

.institution-cell {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 0.15rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.value-cell {
    font-family: var(--font-mono);
    text-align: right;
    font-size: 0.85rem;
}

.value-cell.empty             { color: var(--text-light); }
.value-cell.out-of-range-low  { font-weight: bold; color: var(--low); }
.value-cell.out-of-range-high { font-weight: bold; color: var(--danger); }
.value-cell.severity-moderate { font-weight: bold; color: #b7770d; }
.value-cell.severity-high     { font-weight: bold; color: var(--danger); }

.value-cell.text-value {
    font-family: var(--font);
    font-style: italic;
    color: var(--text-muted);
}

.value-input {
    width: 5.5ch;
    text-align: right;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.1rem 0.25rem;
    color: inherit;
}

.value-input:hover  { border-color: var(--border); }
.value-input:focus  { outline: none; border-color: var(--accent); background: #fff; }

.value-cell.out-of-range-low  .value-input { color: var(--low);    font-weight: bold; }
.value-cell.out-of-range-high .value-input { color: var(--danger); font-weight: bold; }

.value-input::placeholder { color: var(--text-light); }

body.clinical-edit .data-table th.quality-header { cursor: pointer; }
body.clinical-edit .data-table th.quality-header:hover .info-icon { opacity: 1; }

.range-editor-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0;
}
.range-editor-key {
    width: 56px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-text-muted);
}
.range-editor-default { font-family: var(--font-mono); font-size: 13px; }
.range-editor-input { width: 84px; }
.range-editor-input::-webkit-outer-spin-button,
.range-editor-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range-editor-input { -moz-appearance: textfield; appearance: textfield; }
.range-editor-sep { color: var(--dark-text-muted); }

.range-editor-reset {
    display: block;
    width: 100%;
    margin: 0.35rem 0 0.2rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--link-d);
    transition: color .12s ease;
    text-align: right;
}
.range-editor-reset:hover { color: var(--link-d-hover); }

.range-editor-units-label { margin-top: 1rem; }

.range-editor-units { display: block; }
.range-editor-units .filter-btn {
    width: 100%;
    background: rgba(255, 255, 255, .06);
    border-color: var(--dark-border-hover);
    color: #f5f5f5;
}
.range-editor-units .filter-btn::after { color: var(--dark-text-muted); }
.range-editor-units .filter-panel {
    top: auto;
    bottom: calc(100% + 2px);
    background: var(--dark);
    border-color: var(--dark-border);
}
.range-editor-units .filter-option { color: #e6e8ec; }
.range-editor-units .filter-option:hover,
.range-editor-units .filter-option.selected { color: var(--accent); background: rgba(255, 255, 255, .06); }

.unit-badge {
    font-size: 0.68rem;
    color: var(--text-light);
    margin-left: 0.2rem;
}

.badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    border: 1px solid currentColor;
}

.badge-intolerant        { color: var(--danger); background: rgba(192, 57, 43, 0.07); }
.badge-tolerant          { color: #27ae60;        background: rgba(39, 174, 96, 0.07); }
.badge-context-dependent { color: #b7770d;        background: rgba(183, 119, 13, 0.07); }
.badge-improved,
.badge-resolved          { color: #27ae60;        background: rgba(39, 174, 96, 0.07); }
.badge-ongoing,
.badge-partial           { color: #b7770d;        background: rgba(183, 119, 13, 0.07); }

.data-table .row-controls {
    text-align: right;
    white-space: nowrap;
    font-size: 0.95rem;
}

.data-table:not(.is-edit) .row-controls { visibility: hidden; }

.data-table .row-controls .glyph + .glyph { margin-left: 12px; }

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .filter-dropdown,
    .filter-btn {
        width: 100%;
        min-width: unset;
    }

    .data-table { font-size: 0.8rem; }

    .data-table th,
    .data-table td {
        padding: 0.45rem 0.65rem;
    }

    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

@media print {
    .tables-section    { padding: 0; }
    .category-table    { break-inside: avoid; }
    .data-table th:hover { background: #fafafa; }
}
