/* ============================================================
   Solubility Table — bảng độ tan tương tác
   ============================================================ */

.sol-wrap { margin: var(--vjol-space-4) 0; }

.sol-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vjol-space-3);
    align-items: center;
    margin-bottom: var(--vjol-space-4);
}
.sol-search input {
    padding: var(--vjol-space-2) var(--vjol-space-3);
    border: 1px solid var(--vjol-color-border);
    border-radius: var(--vjol-radius-md);
    font: inherit;
    min-width: 250px;
}
.sol-legend {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vjol-space-3);
    font-size: var(--vjol-fs-sm);
}
.sol-legend li { display: flex; align-items: center; gap: 6px; }
.sol-legend__dot {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
}

.sol-table-wrap { overflow-x: auto; }
.sol-table {
    border-collapse: separate;
    border-spacing: 2px;
    min-width: max-content;
    font-size: var(--vjol-fs-sm);
}
.sol-table th, .sol-table td {
    padding: 6px 10px;
    text-align: center;
    border-radius: var(--vjol-radius-sm);
    min-width: 60px;
    transition: transform 0.1s;
}
.sol-table__corner {
    background: var(--vjol-color-surface-2);
    color: var(--vjol-color-text-muted);
    font-weight: 600;
    text-align: left;
}
.sol-table__cation,
.sol-table__anion {
    background: var(--vjol-color-surface-2);
    color: var(--vjol-color-text);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.sol-table__cation { text-align: right; }
.sol-table__anion.is-hl,
.sol-table tr.is-hl .sol-table__cation { background: #fef9c3; color: #854d0e; }

.sol-cell {
    cursor: pointer;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,0.05);
}
.sol-cell:hover, .sol-cell:focus-visible {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    outline: 0;
}
.sol-cell--T   { background:#d1fae5; color:#065f46; }
.sol-cell--I   { background:#fef3c7; color:#854d0e; }
.sol-cell--K   { background:#fee2e2; color:#991b1b; }
.sol-cell--B   { background:#ede9fe; color:#5b21b6; }
.sol-cell---   { background:#f3f4f6; color:#9ca3af; cursor:default; }
.sol-cell---:hover { transform: none; box-shadow: none; }

.sol-legend__dot.sol-cell--T { background:#d1fae5; }
.sol-legend__dot.sol-cell--I { background:#fef3c7; }
.sol-legend__dot.sol-cell--K { background:#fee2e2; }
.sol-legend__dot.sol-cell--B { background:#ede9fe; }
.sol-legend__dot.sol-cell--- { background:#f3f4f6; }

.sol-hint {
    margin-top: var(--vjol-space-3);
    font-size: var(--vjol-fs-sm);
    color: var(--vjol-color-text-muted);
}
.sol-detail {
    margin-top: var(--vjol-space-4);
    padding: var(--vjol-space-4);
    background: var(--vjol-color-surface-2);
    border-radius: var(--vjol-radius-md);
    border-left: 4px solid var(--vjol-color-primary);
}
.sol-detail h4 { margin: 0 0 var(--vjol-space-2); }
.sol-detail p { margin: 0; }