/* src/components/basic/XWUISpecTable/XWUISpecTable.css */
/* The host tag itself: XWUISpecTable.view.ts puts every class it builds
   (the caller's conf.className included) on the inner <table>, never on the
   <xwui-spec-table> host, so nothing else in this stylesheet or the
   consumer's ever targets the host element. Without this rule a browser's
   default `display: inline` for an unrecognized-looking tag means `width`
   and `max-width` are no-ops on it (an inline non-replaced box ignores
   both), so a host page's own `max-width` + `margin: auto` column can never
   actually constrain or center this component — it just renders at its
   table's natural content width, wherever that lands. */
xwui-spec-table {
    display: block;
}

.xwui-spec-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.xwui-spec-table {
    position: relative;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

.xwui-spec-table__caption {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.xwui-spec-table__head {
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    border-block-end-style: solid;
    border-block-end-width: var(--border-width-thin);
    border-block-end-color: var(--border-color);
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-wide);
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
}

.xwui-spec-table__head--fill {
    width: 100%;
}

.xwui-spec-table__cell {
    padding-block: var(--spacing-md);
    padding-inline: var(--spacing-md);
    border-block-end-style: solid;
    border-block-end-width: var(--border-width-thin);
    border-block-end-color: var(--border-light);
    background: none;
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
}

.xwui-spec-table__cell--fill {
    width: 100%;
    white-space: normal;
}

.xwui-spec-table__cell--mono {
    font-family: var(--font-family-mono);
}

.xwui-spec-table__cell--strong {
    color: var(--text-primary);
}

.xwui-spec-table__cell--success {
    color: var(--accent-success);
}

.xwui-spec-table__cell--warning {
    color: var(--accent-warning);
}

.xwui-spec-table__cell--running {
    color: var(--status-running, var(--text-secondary));
}

.xwui-spec-table__cell--error {
    color: var(--accent-error);
}

.xwui-spec-table__row--selected .xwui-spec-table__cell {
    background: var(--bg-hover);
}