/**
 * Register tables — desktop table, mobile cards.
 *
 * The registers (offerter, artiklar, maskintyper, modeller, användare) all
 * render as data tables, which don't survive a phone screen: five columns
 * either overflow horizontally or collapse into an unlabelled run-on of
 * values with no way to tell which number is which.
 *
 * Below the breakpoint each row becomes a card. Every cell carries its
 * column heading via data-label, so a value is never orphaned from what it
 * means, and the row actions sit in their own footer instead of being
 * squeezed in beside the data.
 *
 * Lives outside the Tailwind source because the compiled bundle can't be
 * rebuilt without node_modules; move it into assets/src/main.css whenever
 * the build is available again.
 */

/* ==========================================================================
   Shared
   ========================================================================== */

.sit-table {
    width: 100%;
    border-collapse: collapse;
}

.sit-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7280;
    padding: 10px 14px;
    border-bottom: 1px solid #E5E7EB;
    white-space: nowrap;
}

/* Rows are scanned, not read. The cell padding is deliberately tight —
   the status pills and number chips inside already carry their own
   padding, and stacking the two made rows read as twice as tall as the
   content needed. */
.sit-table td {
    padding: 7px 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #1F2937;
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
}

/* Pills and chips rendered inside cells (status, artikelnummer,
   offertnummer) come from the old markup with generous Tailwind padding.
   Trim them so they sit inside the row rather than setting its height. */
.sit-table td > span[class*="bg-"],
.sit-table td .article_sku {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.4;
}

/* Thumbnails in the maskin/modell registers were driving row height on
   their own. */
.sit-table td img {
    max-height: 34px;
    width: auto;
}

.sit-table tbody tr:hover td {
    background: #FAFAF8;
}

/* Row actions: icon buttons, comfortable hit area, quiet until hovered. */
/* The actions read as one control group, so they sit together at the end
   of the row rather than drifting apart across the column. */
.sit-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.sit-table__actions button,
.sit-table__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 30×30 keeps a usable pointer target while letting five icons read as
       a set. They were 52px wide with padding, which spread them out. */
    min-width: 30px;
    min-height: 30px;
    padding: 0 3px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6B7280;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sit-table__actions button:hover,
.sit-table__actions a:hover {
    background: #F3F4F6;
    color: #1F2937;
}

.sit-table__actions .sit-table__action-label {
    display: none;
}

.sit-table__actions button:focus-visible,
.sit-table__actions a:focus-visible {
    outline: 2px solid #BFA572;
    outline-offset: 2px;
}

/* ==========================================================================
   Multi-value cells (an artikel's models)
   --------------------------------------------------------------------------
   Chips rather than a comma-separated run: the eye can pick out one name
   from a row of chips, where a wrapped sentence of names has to be read.
   Only the first two are printed; the rest sit behind a count.
   ========================================================================== */

.sit-models {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.sit-models__item {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 4px;
    background: #F3F4F6;
    color: #374151;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The rule above outranks the browser's own [hidden] { display: none }, so
   the collapsed chips kept taking up space — a maskintyp with 17 models
   rendered all 17 behind a "+15" that toggled nothing. */
.sit-models__item[hidden] {
    display: none;
}

.sit-models__toggle {
    display: inline-block;
    padding: 2px 8px;
    border: 1px dashed #D1D5DB;
    border-radius: 4px;
    background: transparent;
    color: #6B7280;
    font-size: 12.5px;
    line-height: 1.5;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.sit-models__toggle:hover {
    border-color: #BFA572;
    color: #1F2937;
}

.sit-models__toggle:focus-visible {
    outline: 2px solid #BFA572;
    outline-offset: 2px;
}

.sit-models__empty {
    color: #9CA3AF;
    font-size: 13px;
}

/* ==========================================================================
   Column widths (desktop)
   --------------------------------------------------------------------------
   The actions column has an empty heading, and DataTables measures it as a
   full column and hands it an equal share of the table — 426px for two
   icons on the maskintyp register, taken straight out of the column that
   actually needed the room. width:1% collapses a cell to its content under
   auto table layout; !important is needed because DataTables writes the
   measured width inline.

   Scoped to desktop: below the breakpoint every cell is a block in a card
   and must stay full width.
   ========================================================================== */

@media (min-width: 768px) {
    .sit-table th:last-child,
    .sit-table td[data-actions] {
        width: 1% !important;
        white-space: nowrap;
    }

    /* The chip column is the one that benefits from extra room; 100% makes it
       claim everything the other columns don't need, so a short "Bandsågar"
       stops reserving a third of the table. */
    .sit-table th[data-grow],
    .sit-table td[data-grow] {
        width: 100% !important;
    }

    /* Everything the grow column leaves behind is squeezed to min-content,
       which broke "Volpato LBK -150" and "1 323 €" across three lines. These
       two are short by nature, so let them claim the width they need — the
       chip column gives it back. Namn is deliberately left wrapping; article
       names run long enough to push the table wide. */
    .sit-table td[data-primary],
    .sit-table td[data-label="Pris"] {
        white-space: nowrap;
    }

    /* Namn can run long, so it keeps wrapping — but not at min-content, which
       broke a four-word article name over three lines. */
    .sit-table td[data-label="Namn"] {
        min-width: 26ch;
    }
}

/* ==========================================================================
   DataTables chrome — search and page-length controls
   --------------------------------------------------------------------------
   Both inherit the theme's global form styling, which is sized for the big
   offert-editor fields. At the top of a register they read as oversized
   next to the table they belong to.
   ========================================================================== */

/* The search field's pill is drawn on the <label>, with the input left
   transparent inside it (main.css ~line 2024). Keep that design and just
   take the size down — restyling the input instead would draw a second
   box inside the pill. Selectors are prefixed with `body` to match the
   specificity of the rules they override; this file loads later, so an
   equal-specificity rule wins. */
body .dataTables_wrapper .dataTables_filter label {
    padding: 6px 16px;
    font-size: 13px;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body .dataTables_wrapper .dataTables_filter label input {
    font-size: 13px;
    line-height: 1.4;
    padding: 0;
    min-width: 180px;
}

body .dataTables_wrapper .dataTables_filter label:focus-within {
    box-shadow: 0 0 0 3px rgba(191, 165, 114, 0.2);
}

/* The page-length select inherits the offert editor's field sizing, which
   is far taller than the row of text it sits in. */
body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: #6B7280;
}

body .dataTables_wrapper select {
    padding: 3px 8px;
    height: auto;
    min-height: 0;
    font-size: 13px;
    line-height: 1.4;
    border-width: 1px;
    border-color: #E5E7EB;
    border-radius: 6px;
    background-color: #fff;
    margin: 0 6px;
}

body .dataTables_wrapper select:focus {
    outline: none;
    border-color: #BFA572;
    box-shadow: 0 0 0 3px rgba(191, 165, 114, 0.15);
}

/* ==========================================================================
   Mobile — one card per row
   ========================================================================== */

@media (max-width: 767px) {

    /* DataTables measures column widths against the table layout; forcing
       blocks here is what turns each row into a card. */
    .sit-table,
    .sit-table thead,
    .sit-table tbody,
    .sit-table tr,
    .sit-table td {
        display: block;
        width: 100%;
    }

    /* DataTables writes a pixel width straight onto the table and its
       cells after measuring; an inline style outranks the rule above, so
       the card layout has to override it explicitly.

       min-width matters as much as width: the theme used to force
       min-width:640px on .dataTables_wrapper table.dataTable to trigger
       horizontal scrolling, and any leftover rule like it would push the
       cards past the right edge of the screen. */
    .sit-table,
    .sit-table td {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Nothing overflows any more, so the wrapper must not offer a
       sideways scroll of its own. */
    .dataTables_wrapper {
        overflow-x: visible;
    }

    /* Same reason — a fixed layout would keep honouring the measured
       column widths even once the cells are blocks. */
    .sit-table {
        table-layout: auto !important;
    }

    /* Column headings are carried by data-label on each cell instead. */
    .sit-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sit-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .sit-table tbody tr {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
        overflow: hidden;
    }

    .sit-table tbody tr:hover td {
        background: transparent;
    }

    .sit-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 16px;
        border-bottom: 1px solid #F3F4F6;
        text-align: right;
    }

    .sit-table tbody td:last-child {
        border-bottom: 0;
    }

    /* The heading, repeated per cell so a value always reads as a pair. */
    .sit-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #9CA3AF;
        text-align: left;
        white-space: nowrap;
    }

    /* The card's headline — bigger, own line, no repeated label. */
    .sit-table tbody td[data-primary] {
        display: block;
        text-align: left;
        padding: 14px 16px 10px;
        font-size: 16px;
        font-weight: 600;
        color: #1F2937;
    }

    .sit-table tbody td[data-primary]::before {
        display: none;
    }

    /* Cells with nothing in them would otherwise render as a lone label. */
    .sit-table tbody td[data-empty]::before {
        display: none;
    }

    /* Actions become a footer strip with full labels, so the card is
       operable with a thumb rather than a fingertip on a 20px icon. */
    .sit-table tbody td[data-actions] {
        display: block;
        padding: 0;
        background: #FAFAF8;
        border-top: 1px solid #F3F4F6;
    }

    .sit-table tbody td[data-actions]::before {
        display: none;
    }

    /* Wrapping rather than one squeezed row: the offert register has five
       actions, and at phone width that leaves ~78px each — not enough for
       an icon plus a readable label without the text breaking mid-word. */
    .sit-table tbody td[data-actions] .sit-table__actions {
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0;
    }

    .sit-table tbody td[data-actions] .sit-table__actions button,
    .sit-table tbody td[data-actions] .sit-table__actions a {
        flex: 1 0 33.333%;
        min-height: 48px;
        border-radius: 0;
        border-right: 1px solid #F3F4F6;
        border-top: 1px solid #F3F4F6;
        flex-direction: row;
        font-size: 13px;
        white-space: nowrap;
    }

    /* The first row of buttons sits directly under the card's last data
       row, which already draws a divider. */
    .sit-table tbody td[data-actions] .sit-table__actions > *:nth-child(-n+3) {
        border-top: 0;
    }

    .sit-table__actions .sit-table__action-label {
        display: inline;
    }

    /* DataTables chrome takes a lot of room on a phone; let the search and
       length controls stack rather than fight for one line. */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
        margin-bottom: 8px;
    }

    /* The pill spans the row on a phone, but stays a single line high.
       Left as-is it took up a third of the screen before the first card
       came into view. */
    body .dataTables_wrapper .dataTables_filter label {
        display: flex;
        width: 100%;
        padding: 8px 14px;
        box-sizing: border-box;
    }

    body .dataTables_wrapper .dataTables_filter label input {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }

    body .dataTables_wrapper .dataTables_length label {
        display: block;
        width: 100%;
    }
}

/* ==========================================================================
   Two-up on small tablets — cards are short enough to pair
   ========================================================================== */

@media (min-width: 560px) and (max-width: 767px) {
    .sit-table tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* ==========================================================================
   Busy spinner
   --------------------------------------------------------------------------
   Replaces Font Awesome's fa-spin, which was the last thing keeping the icon
   font on the page. Radix's reload glyph plus one keyframe does the same job
   without a webfont.
   ========================================================================== */

.sit-spin {
    animation: sit-spin 1s linear infinite;
    transform-origin: center;
}

@keyframes sit-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sit-spin { animation-duration: 3s; }
}