/* =========================================================
   Data table — one look for every table on the site (plan 027)

   The pattern is the attachment spec table (components/attachment-single,
   Anders 2026-10-09: "Jag gillar formen vi har här"). Like filter-ui.css for
   the filters, this file holds the chrome; each table keeps its own grid
   (column widths) in its own file.

     .brokk-table          beige frame, the column labels stand in it
     .brokk-table__head    the label row
     .brokk-table__body    white card 1.2rem in, holding the rows
     .brokk-table__row     one row; hairline above, hover wash
     .brokk-table__name    first column: Saira 700, uppercase
     .brokk-table__value   a value (500, tabular figures)
     .brokk-table__alt     the second unit after " / " (muted)

   The attachment table itself still has its own copy of these values in
   attachment-single.css (that file has uncommitted work); move it here when
   it is committed.
   ========================================================= */

.brokk-table {
    padding: 0 1.2rem 1.2rem;
    border-radius: var(--radius);
    background: var(--tertiary-ultra-light);
}

.brokk-table__head {
    padding: 2.2rem 1.6rem 1.6rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--accent);
}

.brokk-table__body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-xs);
    background: var(--white);
    list-style: none;
}

.brokk-table__row {
    border-top: 1px solid var(--neutral-ultra-light);
    color: var(--text-dark);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.brokk-table__row:first-child {
    border-top-color: transparent;
}

a.brokk-table__row:hover,
.brokk-table__row:has(> a:hover) {
    color: var(--text-dark);
}

@media (hover: hover) and (pointer: fine) {
    a.brokk-table__row:hover,
    .brokk-table__row:has(> a:hover) {
        background: var(--tertiary-ultra-light);
    }
}

a.brokk-table__row:focus-visible,
.brokk-table__row > a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.brokk-table__name {
    margin: 0;
    font-family: var(--font-condensed);
    font-size: var(--h4);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.brokk-table__value {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.brokk-table__alt {
    font-weight: 400;
    color: var(--accent);
    white-space: nowrap;
}

/* Ikonsetets pil i raden: puttas på hover, som i registret och megamenyn. */
.brokk-table__row .brokk-icon {
    flex: none;
    transition: translate var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    a.brokk-table__row:hover .brokk-icon,
    .brokk-table__row:has(> a:hover) .brokk-icon {
        translate: .3rem 0;
    }
}

@media (max-width: 767px) {
    .brokk-table {
        padding: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brokk-table__row,
    .brokk-table__row .brokk-icon {
        transition: none;
    }

    a.brokk-table__row:hover .brokk-icon,
    .brokk-table__row:has(> a:hover) .brokk-icon {
        translate: none;
    }
}