/* ═══════════════════════════════════════════════════════════════════════════
   SUPERSHEET REDESIGN — GRID TYPE-AWARE STYLES
   Defines the .ds-cell type-aware classes (num, text, date, key, link, fx,
   select, user) that mirror the column kind. SuperSheet.razor will adopt
   these wrappers in Phase 1.C; for now they are also used by simpler grid
   renderers that mount inside the new shell.

   The .ds-preview-* classes that used to drive the temporary
   DataTablesPreview demo page are kept here too because the shell still
   renders empty/loading affordances when no table is selected. They live
   under unique selectors that won't collide with the production grid.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Empty / loading states ─────────────────────────── */
.ds-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ss-muted);
    font-size: 13px;
    padding: 40px;
    text-align: center;
}

/* ── Left sidebar — flat list of tables ─────────────── */
.ds-preview-lsidebar {
    background: var(--ss-surface);
    border-right: 1px solid var(--ss-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.ds-preview-lsidebar-head {
    padding: 12px;
    border-bottom: 1px solid var(--ss-border-soft);
}

.ds-preview-lsidebar-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ss-ink);
}

.ds-preview-lsidebar-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 6px;
}

.ds-preview-table-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--ss-ink-2);
    position: relative;
    margin-bottom: 2px;
}

.ds-preview-table-item:hover {
    background: var(--ss-surface-2);
}

.ds-preview-table-item.active {
    background: var(--ss-primary-soft);
    color: var(--ss-primary);
}

.ds-preview-table-item.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--ss-primary);
}

.ds-preview-table-item .ico {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    font-size: 12px;
    background: var(--ss-surface-2);
    color: var(--ss-muted);
    flex-shrink: 0;
}

.ds-preview-table-item.active .ico {
    background: var(--ss-primary);
    color: #fff;
}

.ds-preview-table-item .meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ds-preview-table-item .name {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-preview-table-item .rows {
    font-size: 10.5px;
    color: var(--ss-muted);
    font-family: var(--ss-font-mono);
}

.ds-preview-table-item.active .rows {
    color: var(--ss-primary);
    opacity: .7;
}

/* ── Right rail (collapsed icons) ───────────────────── */
.ds-preview-rrail {
    background: var(--ss-surface);
    border-left: 1px solid var(--ss-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 4px;
}

.ds-preview-rrail .ico {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: var(--ss-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.ds-preview-rrail .ico:hover {
    background: var(--ss-surface-2);
    color: var(--ss-ink-2);
}

/* ── Read-only grid preview ─────────────────────────── */
.ds-preview-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--ss-surface);
}

.ds-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    color: var(--ss-ink-2);
}

.ds-preview-table thead {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--ss-surface);
}

.ds-preview-table thead th {
    height: var(--ss-header-h);
    padding: 0 10px;
    border-right: 1px solid var(--ss-border);
    border-bottom: 2px solid var(--ss-border-strong);
    text-align: start;
    font-weight: 500;
    color: var(--ss-ink-3);
    background: var(--ss-surface);
    white-space: nowrap;
}

.ds-preview-table thead th.rowhead {
    width: 40px;
    background: var(--ss-surface-2);
    color: var(--ss-muted);
    font-family: var(--ss-font-mono);
    font-size: 11px;
    text-align: center;
    position: sticky;
    left: 0;
    z-index: 5;
}

.ds-preview-table thead th .type-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: var(--ss-surface-2);
    margin-right: 6px;
    vertical-align: -2px;
}

.ds-preview-table tbody tr {
    height: var(--ss-row-h);
}

.ds-preview-table tbody tr:hover {
    background: var(--ss-surface-alt);
}

.ds-preview-table tbody td {
    padding: 8px 10px;
    border-right: 1px solid var(--ss-border-soft);
    border-bottom: 1px solid var(--ss-border-soft);
    vertical-align: top;
    line-height: 1.45;
    color: var(--ss-ink-2);
}

.ds-preview-table tbody td.rowhead {
    width: 40px;
    background: var(--ss-surface-alt);
    border-right: 1px solid var(--ss-border);
    color: var(--ss-muted);
    font-family: var(--ss-font-mono);
    font-size: 11px;
    text-align: center;
    position: sticky;
    left: 0;
    z-index: 1;
}

/* ── Type-aware cell renderers (.ds-cell.{type}) ───── */
/* These classes will also be picked up by the production SuperSheet grid in
   Phase 1.B once we migrate the cell wrappers. */

.ds-cell {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ss-ink-2);
}

.ds-cell.num {
    text-align: end;
    font-family: var(--ss-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ss-ink-3);
}

.ds-cell.date {
    font-family: var(--ss-font-mono);
    color: var(--ss-ink-3);
}

.ds-cell.key {
    font-family: var(--ss-font-mono);
    color: var(--ss-primary);
    font-weight: 500;
}

.ds-cell.link {
    font-family: var(--ss-font-mono);
    color: var(--ss-info-sky);
}

.ds-cell.fx {
    text-align: end;
    font-family: var(--ss-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ss-primary);
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.03), transparent);
}

.ds-cell.select {
    /* Pills are painted at the value level. The cell itself stays neutral. */
}

.ds-cell.user .av-mini {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-deep));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    margin-right: 8px;
    vertical-align: -6px;
}