/* ══════════════════════════════════════════════════ */
/* ══  tables.css — DEN kanoniske tabel-stil        ══ */
/* ══════════════════════════════════════════════════ */
/*
   Én kilde til sandhed for tabel-typografi. Meld en tabel ind med class="crm-table"
   (rå <table class="crm-table"> eller <MudSimpleTable Class="… crm-table">).

   Global (uscoped) stylesheet → reglerne matcher både rå <table> og MudSimpleTable-output,
   uden ::deep. Skift ALDRIG font-size/-weight/-transform i den enkelte tabels scoped CSS —
   ret her, så gælder det alle tabeller. Padding/hover/kolonnebredder er stadig lokalt (layout).

   ÉN størrelse i celle-området: 14px. Rolle-hjælpere og MudBlazor-komponenter inde i en celle
   arver den — de sætter aldrig deres egen font-size, så roller skelnes på vægt og farve.
   Headeren er den ene bevidste undtagelse: 12px UPPERCASE. 14px-headere blev prøvet 2026-08-11
   og rullet tilbage, fordi de brede kolonnenavne (fx "ANTAL INDGÅET FORMIDLINGSAFTALE" på
   Performance-kortene) pressede navnekolonnen så meget, at mæglernavne brækkede over tre linjer.

   !important på HEADER er nødvendigt: .mud-simple-table thead th i mudblazor-overrides.css bruger
   selv !important. Cellens font-size står uden — mud-simple-table har ingen konkurrerende regel,
   og pr-element-vægte (fx links) skal stadig kunne override. tables.css linkes EFTER
   mudblazor-overrides.css + utilities.css i App.razor, så .crm-table vinder ved lige specificitet.

   Se docs/design/tables.md for skalaen pr. celle-rolle.
*/

/* line-height og letter-spacing hører med til definitionen, ikke kun størrelse og vægt:
   en MudSimpleTable arver ellers MudBlazors egen typografi (header 2.0, celle 1.43 +
   0.15px spacing), mens en rå <table> lander på 1.5 — så to tabeller med samme font-size
   fik alligevel forskellig rækkehøjde. 1.5 er den værdi de rå tabeller allerede har. */
.crm-table thead th {
    font-size: var(--mud-typography-caption-size) !important;   /* 12px */
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--mud-palette-text-secondary) !important;
    border-bottom: 1px solid var(--mud-palette-divider);
    text-align: left;
    vertical-align: middle;
}

.crm-table tbody td {
    font-size: var(--mud-typography-body1-size);   /* 14px */
    font-weight: 400;
    /* Kun disse to har !important i celle-blokken: MudBlazor sætter dem via
       `.mud-simple-table table * tr > td`, som med tre elementer i selektoren slår
       `.crm-table tbody td` på specificitet uanset link-rækkefølge. */
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-divider);
    vertical-align: middle;
}

.crm-table tbody tr:last-child td {
    border-bottom: none;
}

/* Alt inde i en tabel er 14px, og størrelsen kommer KUN herfra. MudBlazor-komponenter
   der rendes i en celle tager ellers deres egen skala med — en MudChip Size.Small er
   12px via .mud-chip-size-small. De arver cellen i stedet. */
.crm-table tbody td .mud-chip,
.crm-table tbody td .mud-chip-content {
    font-size: inherit !important;
}

/* ── Rolle-hjælpere (fra tables.md-skalaen) ── */
.crm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;   /* tal flugter; størrelse arves fra tbody td (body1) */
}

/* Størrelsen arves bevidst fra cellen — hjælperne bærer kun rolle-farven, så der er
   præcis én kilde til font-size i en tabel. */
.crm-meta {
    color: var(--mud-palette-text-secondary);
}

.crm-sub {
    color: var(--mud-palette-text-secondary);
}

/* ── Mobile card layout (opt-in: class="crm-table-cards", with or without .crm-table) ──
   Below 600px each row becomes a stacked card and every cell prints its column name from
   data-label. Cells without data-label (icons, row links) render unlabeled; drop cells that
   make no sense stacked with .col-hide-mobile. Typography is untouched, so a table that has
   not migrated to .crm-table yet can still opt in. The :is() prefix exists only for specificity:
   MudBlazor's `.mud-simple-table table thead` and `.mud-simple-table table * tr > td` carry one
   class plus elements, so a lone `.crm-table-cards thead` loses; :is(.mud-table, table) adds one
   class-level step for both the MudSimpleTable root div and a raw <table>. */
@media (max-width: 599px) {
    :is(.mud-table, table).crm-table-cards thead { display: none; }

    /* The table itself goes block too: a display:table box with block children shrink-wraps
       to the widest cell plus padding and overflows its container. */
    :is(.mud-table, table).crm-table-cards,
    :is(.mud-table, table).crm-table-cards table,
    :is(.mud-table, table).crm-table-cards tbody,
    :is(.mud-table, table).crm-table-cards tbody tr,
    :is(.mud-table, table).crm-table-cards tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }

    :is(.mud-table, table).crm-table-cards tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    /* !important on padding and border: mudblazor-overrides.css sets both with !important on
       .mud-simple-table tbody td. */
    :is(.mud-table, table).crm-table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 4px 0 !important;
        border-bottom: none !important;
        text-align: left;
    }

    /* A tap leaves :hover stuck on touch screens, so the whole card turns grey; no row hover
       in card mode. */
    :is(.mud-table, table).crm-table-cards tbody tr:hover {
        background-color: transparent !important;
    }

    /* Flex items default to min-width: auto, so a nowrap value would push past the card. */
    :is(.mud-table, table).crm-table-cards tbody td > * {
        min-width: 0;
    }

    :is(.mud-table, table).crm-table-cards tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-size: var(--mud-typography-caption-size);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }
}