/* ============================================================
   EHSIA – assets/css/table.css
   Interactive data tables
   ============================================================ */

.table-container {
    overflow: auto; background: var(--white);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    border: 1px solid var(--border); flex-grow: 1; padding: 0;
}

table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
th, td {
    padding: 8px 10px; text-align: left;
    border: 1px solid var(--border); vertical-align: middle;
    color: var(--dark); min-width: 50px;
}
th {
    background: var(--gradient-primary); color: var(--white);
    font-weight: 700; position: sticky; top: 0; z-index: 10; text-align: center;
}
tbody tr:nth-child(even) { background-color: #f8fafc; }
tr:hover { background-color: rgba(23,125,144,0.05); }

/* ── Sticky first columns ─────────────────────────────────── */
.interactive-table thead th:first-child,
.interactive-table tbody td:first-child {
    position: sticky; left: 0; background-color: #e9ecef; z-index: 5; min-width: 280px;
}
.interactive-table thead th:nth-child(2),
.interactive-table tbody td:nth-child(2) {
    position: sticky; left: 280px; background-color: #f1f5f9; z-index: 5; text-align: center;
}

/* ── Row types ────────────────────────────────────────────── */
.interactive-table .section-row     td { background-color: var(--primary-dark); color: var(--white); font-weight: bold; font-size: 14px; }
.interactive-table .sub-section-row td { background-color: var(--primary);      color: var(--white); font-weight: bold; }
.interactive-table .indented-row td:first-child { padding-left: 30px; }
.calculated-section-row td { background-color: var(--primary); color: var(--white); font-weight: bold; }
.calculated-cell { text-align: right; font-weight: bold; }

/* ── Editable data cells ──────────────────────────────────── */
.data-cell { position: relative; cursor: pointer; text-align: right; min-width: 120px; }
.data-cell:hover { background-color: #e0f2fe; }
.data-cell.empty:hover::after {
    content: 'Click to enter'; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: #999; font-style: italic; font-size: 10px;
}
.data-cell .cell-value { display: block; width: 100%; height: 100%; padding-right: 35px; }
.data-cell input {
    width: 100%; border: 1px solid var(--primary); padding: 6px;
    text-align: right; font-size: 12px; font-family: inherit;
    border-radius: 3px; background-color: #fff;
    position: absolute; top: 0; left: 0; height: 100%;
}
.data-cell .cell-actions {
    position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
    display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s ease;
}
.data-cell.has-data:hover .cell-actions { opacity: 1; }
.cell-actions button {
    background: none; border: none; cursor: pointer;
    padding: 2px; font-size: 12px; line-height: 1;
}
.cell-actions button:hover { transform: scale(1.2); color: var(--primary); }