/*
 * Ark shared surface primitives.
 *
 * Components that render plain tabular or block markup share these classes
 * rather than each shipping a near-identical scoped stylesheet. Anything
 * specific to one component belongs in that component's .razor.css instead.
 *
 * Every value resolves through ark-tokens.css. No literals.
 */

/* ===== Surfaces ===== */

.ark-surface {
    padding: var(--spacing-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-glass);
}

.ark-demo-surface {
    padding: var(--spacing-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text);
}

/* ===== Tables ===== */

/*
 * Wrapper: keeps wide tables scrolling inside the specimen instead of pushing
 * the page into horizontal overflow.
 *
 * The height bound is load-bearing, not cosmetic. `position: sticky` on the
 * header only engages when an ancestor actually scrolls, and a wrapper with no
 * height constraint always grows to fit its content — so without this the
 * sticky header below is inert. Callers that want a taller or shorter table
 * override --ark-table-max-height rather than redeclaring max-height.
 */
.ark-table-scroll {
    width: 100%;
    max-height: var(--ark-table-max-height, 32rem);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.ark-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
}

.ark-table th,
.ark-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    white-space: nowrap;
}

.ark-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--grid-header-line);
    background: var(--grid-header-bg);
    color: var(--text-header);
    font-weight: var(--font-weight-bold);
}

.ark-table tbody tr + tr td,
.ark-table tbody tr + tr th {
    border-top: 1px solid var(--border);
}

.ark-table tbody tr:nth-child(even) {
    background: var(--surface-subtle);
}

.ark-table tbody tr:hover {
    background: var(--hover-surface);
}

.ark-table tbody th[scope="row"] {
    font-weight: var(--font-weight-bold);
}

.ark-table--numeric td:last-child,
.ark-table--numeric th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ===== Cards ===== */

/* Compact asset summary, used by the list view rows and the drag/drop board. */
.asset-card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-sm) var(--spacing-md);
}

.asset-card__code {
    color: var(--text-header);
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-bold);
}

.asset-card__description {
    color: var(--text);
}

.asset-card__category {
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--selection);
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.asset-card__value {
    margin-left: auto;
    color: var(--text-header);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-bold);
}

/* ===== Records ===== */

/* Definition-list record layout, used by demos that show a single entity. */
.record {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0;
}

.record dt {
    color: var(--text-secondary);
}

.record dd {
    margin: 0;
    color: var(--text-header);
    font-weight: var(--font-weight-bold);
}

.record__list {
    display: grid;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.record__list li {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.record__list span {
    min-width: 5.5rem;
    color: var(--text-secondary);
    font-family: var(--font-family-mono);
    font-size: 0.75rem;
}

/* ===== Workspace ===== */

/* Master-detail workspace, used by the splitter demo. */
.workspace__heading {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workspace__list {
    display: grid;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.workspace__item {
    display: flex;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.workspace__item:hover {
    background: var(--hover-surface);
}

.workspace__item--selected {
    border-color: var(--primary-color);
    background: var(--selection);
}

.workspace__code {
    color: var(--text-header);
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-bold);
}

/* ===== Assignment board ===== */

/* Assignment board: draggable asset cards and technician drop zones. */
.assign-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.assign-board__column {
    display: grid;
    gap: var(--spacing-sm);
    align-content: start;
    min-height: 12rem;
    padding: var(--spacing-md);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.assign-board__empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

[data-ark-draggable] {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-glass-strong);
    cursor: grab;
}

[data-ark-draggable]:active {
    cursor: grabbing;
    opacity: 0.6;
}

/* Keyboard pick-up: the held card stays visible while focus moves to the columns. */
[data-ark-draggable][aria-pressed="true"] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--selection);
}

[data-ark-drop-target] {
    transition: border-color var(--motion-fast), background-color var(--motion-fast);
}

[data-ark-drop-target]:hover,
[data-ark-drop-target]:focus-visible {
    border-color: var(--primary-color);
}

.assign-board__hint,
.assign-board__status {
    margin: 0 0 var(--spacing-sm);
    color: var(--text-muted);
    font-size: 0.8rem;
    min-height: 1.2em;
}

[data-ark-assigned] {
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--selection);
}

/* ===== Tree view ===== */

/*
 * ArkTreeView builds its nodes through RenderTreeBuilder, and the Razor
 * compiler only stamps its scope attribute onto literal markup — so a
 * .razor.css sheet can never reach these rows. They live here instead.
 */
[data-ark-tree-view] {
    padding: var(--spacing-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text);
}

[data-ark-tree-view] ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The rail belongs to the child list, not the row, so one border spans the
   whole branch instead of being redrawn per node. */
[data-ark-tree-view] li ul {
    margin-top: 2px;
    margin-left: var(--spacing-md);
    padding-left: var(--spacing-sm);
    border-left: 1px solid var(--border);
}

.ark-tree-view__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    transition-duration: var(--motion-fast);
    transition-property: background-color, border-color, color;
}

.ark-tree-view__node--branch > .ark-tree-view__row {
    cursor: pointer;
}

.ark-tree-view__row:hover {
    border-color: var(--border);
    background: var(--hover-surface);
}

.ark-tree-view__row:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* Chevron drawn from two borders: no icon dependency, and the collapsed and
   expanded states are one rotation apart so the transition is free. */
.ark-tree-view__chevron {
    flex: none;
    box-sizing: border-box;
    width: 0.45rem;
    height: 0.45rem;
    margin: 0 2px;
    border-top: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    transform: rotate(45deg);
    transition: transform var(--motion-fast) ease;
}

[data-ark-tree-view] [aria-expanded="true"] > .ark-tree-view__row > .ark-tree-view__chevron {
    transform: rotate(135deg);
}

.ark-tree-view__bullet {
    flex: none;
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--text-muted);
}

.ark-tree-view__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ark-tree-view__node--leaf > .ark-tree-view__row > .ark-tree-view__label {
    color: var(--text-secondary);
}

[data-ark-tree-view] > ul > li > .ark-tree-view__row > .ark-tree-view__label {
    color: var(--text-header);
    font-weight: var(--font-weight-bold);
}

/* ===== Tiles ===== */

/* Dashboard tile: a single figure with its label and a supporting line. */
.tile {
    display: grid;
    gap: var(--spacing-xs);
    align-content: start;
    padding: var(--spacing-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-glass);
}

.tile__label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tile__figure {
    color: var(--text-header);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.1;
}

.tile__support {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.tile--wide {
    grid-column: 1 / -1;
}