/* ═══════════════════════════════════════════════════════════
   Record list — the mobile answer to a data table.

   A dense table is unusable on a phone. The two common escapes are both
   bad: horizontally scrolling the table (the user pans a spreadsheet
   through a 390px window) or shrinking type until it fits. This is the
   third option — one CARD PER RECORD, showing the two or three fields
   that identify it, with the rest revealed on tap.

   Derived from ScanEasy's MobileList pattern, which is structurally right
   — card + accordion + label/value detail grid — and rebuilt here on the
   design system's tokens with a stronger type hierarchy, one radius/
   elevation scale, and touch targets designed in rather than patched on.

   Markup:
     <div class="tn-record-list">
       <article class="tn-record is-open">
         <button class="tn-record-header">          <- the whole row is the tap target
           <span class="tn-record-icon"><i class="bi bi-box-seam"></i></span>
           <span class="tn-record-heading">
             <span class="tn-record-title">ORD-2043</span>
             <span class="tn-record-sub">Centrallager · 12 aug</span>
           </span>
           <span class="tn-badge tn-badge--amber">Pågår</span>
           <i class="bi bi-chevron-down tn-record-chevron"></i>
         </button>
         <div class="tn-record-body">
           <dl class="tn-record-fields">
             <div class="tn-record-field">
               <dt class="tn-record-label">Beställare</dt>
               <dd class="tn-record-value">Anna Lind</dd>
             </div>
           </dl>
           <div class="tn-record-actions">…buttons…</div>
         </div>
       </article>
     </div>

   Toggle .is-open on .tn-record to expand. Works as a plain list on
   desktop too, so a product can use one component at every width instead
   of maintaining two parallel render trees.
   ═══════════════════════════════════════════════════════════ */

.tn-record-list {
    display: flex;
    flex-direction: column;
    gap: var(--tn-space-sm);
}

.tn-record {
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-lg);
    overflow: hidden;
    transition: border-color var(--tn-transition), box-shadow var(--tn-transition);
}

.tn-record.is-open {
    border-color: var(--tn-accent);
    box-shadow: 0 0 0 3px rgba(var(--tn-accent-rgb), 0.1);
}

/* ── Header — the always-visible summary row, and the tap target ── */
.tn-record-header {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    width: 100%;
    min-height: var(--tn-touch-target);
    padding: var(--tn-space-md);
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--tn-transition);
}

.tn-record-header:hover {
    background: var(--tn-bg-hover);
}

.tn-record-header:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--tn-accent);
}

.tn-record-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--tn-radius);
    background: var(--tn-accent-light);
    color: var(--tn-accent);
    font-size: 1.15rem;
}

/* Status-toned icon tile — same tint pairs as badges.css's five tones,
   for a record whose icon should carry its status (order state) rather
   than always the neutral accent. */
.tn-record-icon--amber { background: var(--tn-warning-light); color: var(--tn-warning-text); }
.tn-record-icon--green { background: var(--tn-success-light); color: var(--tn-success-text); }
.tn-record-icon--red { background: var(--tn-danger-light); color: var(--tn-danger-text); }
.tn-record-icon--gray { background: var(--tn-bg-page); color: var(--tn-text-secondary); }

/* min-width:0 lets the long-text children actually ellipsis inside flex */
.tn-record-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* The type hierarchy is the point: a clearly dominant title over a
   quiet, smaller sub-line. Records read as scannable entries rather
   than an undifferentiated wall of same-size administrative text. */
.tn-record-title {
    font-size: var(--tn-font-size-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tn-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tn-record-sub {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tn-record-chevron {
    flex-shrink: 0;
    color: var(--tn-text-muted);
    font-size: 1rem;
    transition: transform var(--tn-transition);
}

.tn-record.is-open .tn-record-chevron {
    transform: rotate(180deg);
}

/* ── Body — revealed on expand ── */
.tn-record-body {
    display: none;
    padding: 0 var(--tn-space-md) var(--tn-space-md);
}

.tn-record.is-open .tn-record-body {
    display: block;
    animation: tnRecordReveal 0.18s ease;
}

@keyframes tnRecordReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Field grid — label ⟷ value pairs.
   Two columns where there's room, one on a narrow phone. Each pair is a
   tinted row rather than a bare line, so the eye can separate records
   from fields without needing rules between them. ── */
.tn-record-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--tn-space-xs);
    margin: 0;
    padding-top: var(--tn-space-sm);
    border-top: 1px solid var(--tn-border-light);
}

.tn-record-field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tn-space-sm);
    padding: 10px 12px;
    border-radius: var(--tn-radius);
    background: var(--tn-bg-page);
}

/* A field whose value needs the full width (a progress bar, a long note) */
.tn-record-field--wide {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* text-secondary, not text-muted: muted on the tinted field background
   measures 2.42:1, under WCAG AA. The label is small and uppercase, which
   already de-emphasizes it — it doesn't need the lighter colour too. */
.tn-record-label {
    flex-shrink: 0;
    font-size: var(--tn-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tn-text-secondary);
}

.tn-record-value {
    margin: 0;
    font-size: var(--tn-font-size-base);
    font-weight: 600;
    color: var(--tn-text-primary);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tn-record-field--wide .tn-record-value {
    text-align: left;
    font-weight: 500;
}

/* ── Actions ── */
.tn-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tn-space-sm);
    margin-top: var(--tn-space-md);
    padding-top: var(--tn-space-md);
    border-top: 1px solid var(--tn-border-light);
}

/* ── Phones — actions go full-width and thumb-sized.
   A right-aligned pair of small buttons is a mouse idiom; at this width
   each action takes an equal share of the row at a real touch height. ── */
@media (max-width: 640px) {
    .tn-record-header {
        padding: var(--tn-space-md) var(--tn-space-sm);
        gap: 10px;
    }

    .tn-record-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .tn-record-body {
        padding: 0 var(--tn-space-sm) var(--tn-space-sm);
    }

    .tn-record-fields {
        grid-template-columns: 1fr;
    }

    .tn-record-actions .tn-btn {
        flex: 1 1 calc(50% - var(--tn-space-sm));
        min-height: var(--tn-touch-target);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tn-record.is-open .tn-record-body {
        animation: none;
    }

    .tn-record-chevron {
        transition: none;
    }
}