/* ============================================================================
   TemisDataGrid — Global Styles (non-scoped)
   Location: wwwroot/css/temis-datagrid.css
   
   Styles for dynamically-rendered table content (RenderTreeBuilder rows,
   group headers, RenderFragment templates). These can't use Blazor scoped
   CSS because the scoping attribute isn't applied to programmatic elements.
   
   Static UI (panel shell, search bar, footer) stays in the scoped
   TemisDataGrid.razor.css file.
   ============================================================================ */

/* ═══════════ Table ═══════════ */
.tg-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 65vh;
}

.tg-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.tg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.tg-table thead th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.55rem 0.65rem;
    border-bottom: 2px solid #e0e3e8;
    text-align: left;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s;
}

.tg-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-sortable { cursor: pointer; }
.tg-sortable:hover { background: #eef0f3; }

.tg-table tbody td {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid #eef0f2;
    color: #1a1a2e;
}

/* Zebra striping */
.tg-table tbody tr:nth-child(even):not(.tg-group-header):not(.tg-subgroup-header):not(.tg-row-selected) {
    background: #fafbfc;
}

/* ═══════════ Row States ═══════════ */
.tg-row-clickable {
    cursor: pointer;
    transition: background 0.12s;
}

.tg-row-clickable:hover {
    background: rgba(0, 131, 143, 0.04);
}

.tg-row-selected {
    background: #fefce8 !important;
}

    .tg-row-selected td {
        border-bottom-color: #fef08a !important;
    }

        .tg-row-selected td:first-child {
            box-shadow: inset 3px 0 0 #eab308;
        }

/* ═══════════ Group Headers ═══════════ */
.tg-group-header {
    cursor: pointer;
    user-select: none;
}

.tg-group-header td {
    background: #e8ecf2 !important;
    padding: 0.6rem 0.75rem !important;
    border-bottom: 1px solid #d0d5dd !important;
    border-top: 1px solid #d0d5dd !important;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1a2e;
    box-shadow: inset 3px 0 0 #00838f;
}

.tg-group-header:hover td {
    background: #dfe4ec !important;
}

.tg-group-caret {
    display: inline-block;
    font-size: 0.6rem;
    color: #00838f;
    margin-right: 8px;
    margin-left: 6px;
    transition: transform 0.15s ease;
}

.tg-group-caret.collapsed {
    transform: rotate(-90deg);
}

.tg-group-name {
    font-weight: 600;
    color: #1a1a2e;
    font-size: 0.84rem;
}

.tg-group-count {
    font-weight: 400;
    color: #6c757d;
    font-size: 0.75rem;
    margin-left: 8px;
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 8px;
    border-radius: 10px;
}

/* ─── Sub-group headers ─── */
.tg-subgroup-header {
    cursor: pointer;
    user-select: none;
}

.tg-subgroup-header td {
    background: #f0f3f7 !important;
    padding: 0.45rem 0.75rem 0.45rem 2.25rem !important;
    border-bottom: 1px solid #e2e5ea !important;
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
    box-shadow: inset 3px 0 0 rgba(0, 131, 143, 0.3);
}

.tg-subgroup-header:hover td {
    background: #e8ecf2 !important;
}

/* First row after a group header — no double border */
.tg-group-header + tr td,
.tg-subgroup-header + tr td {
    border-top: none;
}

/* ═══════════ Responsive (table content) ═══════════ */
@media (max-width: 768px) {
    .tg-table { font-size: 0.75rem; }
    .tg-table thead th { font-size: 0.65rem; padding: 0.4rem; }
    .tg-table tbody td { padding: 0.4rem; }
    .tg-subgroup-header td { padding-left: 1.25rem !important; }
}