/* ---------------------------------------------------------------------------------------------------------------
   Typografier (looks) til listesider og spørgeskemaer: Modern, Dæmpet (muted), Mørk (dark) og Høj kontrast (contrast).
   Listesiden vælger på første fane (Indhold); siden sætter klasserne ts-look og ts-look-<navn> på <html>. Spørgeskemaet
   vælger på relationen (survey-look-<navn>) eller arver sidens. Uden valg sættes ingen klasse, og alt ser ud som før.

   Farver og mål er variabler. Et site justerer en typografi med --ts-look-* (fx --ts-look-accent); --survey-* virker
   fortsat for spørgeskemaer. Listesidens regler gælder kun formularen (form tangoraform), filterfelterne og knapperne,
   så resten af sitets design ikke påvirkes.
   --------------------------------------------------------------------------------------------------------------- */

.ts-look-modern,
.survey-look-modern {
    --lk-bg: var(--ts-look-bg, var(--survey-bg, transparent));
    --lk-surface: var(--ts-look-surface, var(--survey-surface, #ffffff));
    --lk-text: var(--ts-look-text, var(--survey-text, #1f2933));
    --lk-muted: var(--ts-look-muted, var(--survey-muted, #5b6770));
    --lk-line: var(--ts-look-line, var(--survey-line, #d5dde3));
    --lk-accent: var(--ts-look-accent, var(--survey-accent, #2b6cb0));
    --lk-accent-text: var(--ts-look-accent-text, var(--survey-accent-text, #ffffff));
    --lk-selected: var(--ts-look-selected, var(--survey-selected, #eef4fa));
    --lk-focus: var(--ts-look-focus, var(--survey-focus, rgba(43, 108, 176, .35)));
    --lk-error: var(--ts-look-error, var(--survey-error, #c0392b));
    --lk-error-bg: var(--ts-look-error-bg, #fff5f5);
    --lk-radius: var(--ts-look-radius, var(--survey-radius, 10px));
    --lk-border: 1px;
    --lk-gap: 1.75em;
    --lk-size: 1em;
}

.ts-look-muted,
.survey-look-muted {
    --lk-bg: var(--ts-look-bg, var(--survey-bg, transparent));
    --lk-surface: var(--ts-look-surface, var(--survey-surface, #ffffff));
    --lk-text: var(--ts-look-text, var(--survey-text, #2d3436));
    --lk-muted: var(--ts-look-muted, var(--survey-muted, #6b7476));
    --lk-line: var(--ts-look-line, var(--survey-line, #dde1e2));
    --lk-accent: var(--ts-look-accent, var(--survey-accent, #4a6670));
    --lk-accent-text: var(--ts-look-accent-text, var(--survey-accent-text, #ffffff));
    --lk-selected: var(--ts-look-selected, var(--survey-selected, #f1f4f4));
    --lk-focus: var(--ts-look-focus, var(--survey-focus, rgba(74, 102, 112, .35)));
    --lk-error: var(--ts-look-error, var(--survey-error, #b03a2e));
    --lk-error-bg: var(--ts-look-error-bg, #fbf3f2);
    --lk-radius: var(--ts-look-radius, var(--survey-radius, 4px));
    --lk-border: 1px;
    --lk-gap: 1.5em;
    --lk-size: 1em;
}

.ts-look-dark,
.survey-look-dark {
    --lk-bg: var(--ts-look-bg, var(--survey-bg, #1f2933));
    --lk-surface: var(--ts-look-surface, var(--survey-surface, #27323d));
    --lk-text: var(--ts-look-text, var(--survey-text, #e6edf3));
    --lk-muted: var(--ts-look-muted, var(--survey-muted, #9fb0bf));
    --lk-line: var(--ts-look-line, var(--survey-line, #3b4754));
    --lk-accent: var(--ts-look-accent, var(--survey-accent, #63b3ed));
    --lk-accent-text: var(--ts-look-accent-text, var(--survey-accent-text, #102030));
    --lk-selected: var(--ts-look-selected, var(--survey-selected, #2f3d4a));
    --lk-focus: var(--ts-look-focus, var(--survey-focus, rgba(99, 179, 237, .5)));
    --lk-error: var(--ts-look-error, var(--survey-error, #ff8a80));
    --lk-error-bg: var(--ts-look-error-bg, #3a2526);
    --lk-radius: var(--ts-look-radius, var(--survey-radius, 10px));
    --lk-border: 1px;
    --lk-gap: 1.75em;
    --lk-size: 1em;
}

.ts-look-contrast,
.survey-look-contrast {
    --lk-bg: var(--ts-look-bg, var(--survey-bg, #ffffff));
    --lk-surface: var(--ts-look-surface, var(--survey-surface, #ffffff));
    --lk-text: var(--ts-look-text, var(--survey-text, #000000));
    --lk-muted: var(--ts-look-muted, var(--survey-muted, #1a1a1a));
    --lk-line: var(--ts-look-line, var(--survey-line, #000000));
    --lk-accent: var(--ts-look-accent, var(--survey-accent, #0b3d91));
    --lk-accent-text: var(--ts-look-accent-text, var(--survey-accent-text, #ffffff));
    --lk-selected: var(--ts-look-selected, var(--survey-selected, #fff3c4));
    --lk-focus: var(--ts-look-focus, var(--survey-focus, #ffbf00));
    --lk-error: var(--ts-look-error, var(--survey-error, #a40000));
    --lk-error-bg: var(--ts-look-error-bg, #fff0f0);
    --lk-radius: var(--ts-look-radius, var(--survey-radius, 4px));
    --lk-border: 2px;
    --lk-gap: 2em;
    --lk-size: 1.125em;
}

/* ------------------------------------------------------------------ listesiden: feltnavne */

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) .vd-caption,
.ts-look [class*="l5box"] > .vd-caption {
    font-size: .95em;
    font-weight: 600;
    color: var(--lk-text);
    margin-bottom: .35em;
}

/* ------------------------------------------------------------------ listesiden: felter i formularen og filtrene */

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) :is(input:not([type]), input[type=text], input[type=email], input[type=number], input[type=tel], input[type=url], input[type=password], input[type=date], input[type=datetime-local], input[type=time], select, textarea),
.ts-look :is(input, select, textarea):is([id^="list_filter"], [name^="filterfromcontrol"], [name^="filtertocontrol"], [name^="searchword"]):not([type=checkbox]):not([type=radio]) {
    box-sizing: border-box;
    min-height: 2.5em;
    padding: .5em .75em;
    font: inherit;
    font-size: var(--lk-size);
    color: var(--lk-text);
    background-color: var(--lk-surface);
    border: var(--lk-border) solid var(--lk-line);
    border-radius: calc(var(--lk-radius) * .6);
    transition: border-color .15s, box-shadow .15s;
}

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) :is(input:not([type]), input[type=text], input[type=email], input[type=number], input[type=tel], input[type=url], input[type=password], input[type=date], input[type=datetime-local], input[type=time], select, textarea) {
    width: 100%;
}

/* flerlinjede tekstfelter: plads til flere linjer og kun lodret traek (et felt paa een linje er for lille til en beskrivelse) */
.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) textarea {
    min-height: 6em;
    resize: vertical;
}

.ts-look :is(select[multiple]):is([id^="list_filter"]),
.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) select[multiple] {
    min-height: 6em;
    padding: .25em;
}

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) :is(input, select, textarea):focus-visible,
.ts-look :is(input, select, textarea):is([id^="list_filter"], [name^="filterfromcontrol"], [name^="filtertocontrol"], [name^="searchword"]):focus-visible {
    outline: 3px solid var(--lk-focus);
    outline-offset: 1px;
    border-color: var(--lk-accent);
}

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) :is(input[type=checkbox], input[type=radio]),
.ts-look :is(input[type=checkbox], input[type=radio])[id^="list_filter"] {
    width: 1.1em;
    height: 1.1em;
    margin-right: .4em;
    vertical-align: middle;
    accent-color: var(--lk-accent);
}

/* ------------------------------------------------------------------ listesiden: fejl (Tangora sætter formreq på afviste felter) */

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) :is(input, select, textarea).formreq {
    border-color: var(--lk-error) !important;
    background-color: var(--lk-error-bg) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-error) 18%, transparent) !important;
}

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) .vd-value:has(:is(input, select, textarea).formreq)::after {
    content: "Udfyld feltet korrekt";
    display: block;
    margin-top: .25em;
    color: var(--lk-error);
    font-size: .8em;
}

/* ------------------------------------------------------------------ listesiden: knapper */

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) .tangorasavebutton,
.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) input[type=button] {
    min-height: 2.5em;
    padding: .55em 1.4em;
    font: inherit;
    font-weight: 600;
    color: var(--lk-accent-text);
    background-color: var(--lk-accent);
    border: var(--lk-border) solid var(--lk-accent);
    border-radius: var(--lk-radius);
    cursor: pointer;
}

    .ts-look :is(form[name=tangoraform], .TangoraRecordEdited) .tangorasavebutton:hover,
    .ts-look :is(form[name=tangoraform], .TangoraRecordEdited) input[type=button]:hover {
        filter: brightness(1.08);
    }

.ts-look .TangoraEditButton,
.ts-look .TangoraDeleteButton {
    display: inline-block;
    padding: .3em .85em;
    font-size: .9em;
    color: var(--lk-accent);
    text-decoration: none;
    background-color: var(--lk-surface);
    border: var(--lk-border) solid var(--lk-line);
    border-radius: calc(var(--lk-radius) * .6);
}

    .ts-look .TangoraEditButton:hover,
    .ts-look .TangoraDeleteButton:hover {
        background-color: var(--lk-selected);
    }

.ts-look .TangoraDeleteButton {
    color: var(--lk-error);
}

/* ------------------------------------------------------------------ listesiden: lightbox-formularen får luft */

.ts-look :is(form[name=tangoraform], .TangoraRecordEdited) .vd-mcp-grid {
    padding: 1em;
    min-width: min(28rem, 90vw);
}

/* Høj kontrast: tydelige feltnavne */
.ts-look-contrast :is(form[name=tangoraform], .TangoraRecordEdited) .vd-caption {
    font-weight: 700;
    color: var(--lk-text);
}

/* ------------------------------------------------------------------ oversigt: MCP's kort (vd-mcp-card i bloklisteskabeloner) */

.ts-look .vd-mcp-card {
    box-sizing: border-box;
    margin: 0 0 1em 0;
    padding: 1em 1.25em;
    color: var(--lk-text);
    background-color: var(--lk-surface);
    border: var(--lk-border) solid var(--lk-line);
    border-radius: var(--lk-radius);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--lk-text) 8%, transparent);
    transition: box-shadow .15s, border-color .15s;
}

    .ts-look .vd-mcp-card:hover {
        border-color: color-mix(in srgb, var(--lk-accent) 40%, var(--lk-line));
        box-shadow: 0 4px 12px color-mix(in srgb, var(--lk-text) 10%, transparent);
    }

    .ts-look .vd-mcp-card .vd-role-title {
        font-size: 1.15em;
        font-weight: 600;
        line-height: 1.3;
    }

    .ts-look .vd-mcp-card .vd-role-meta,
    .ts-look .vd-mcp-card .vd-role-meta .vd-caption {
        font-size: .9em;
        color: var(--lk-muted);
    }

    .ts-look .vd-mcp-card .vd-caption {
        font-size: .8em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--lk-muted);
        margin-bottom: .15em;
    }

    /* "Vis detaljer" (pladsen details) som et diskret link nederst paa kortet */
    .ts-look .vd-mcp-card .vd-role-details a,
    .ts-look .vd-mcp-card .vd-role-details input[type=button] {
        color: var(--lk-accent);
        font-weight: 600;
        text-decoration: none;
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

        .ts-look .vd-mcp-card .vd-role-details a:hover {
            text-decoration: underline;
        }

/* listens handlinger ({action} i MCP's kort og detaljer) som tydelige knapper i stedet for tekstlinks */
.ts-look :is(.vd-mcp-card, .vd-mcp-details) .vd-role-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: .75em;
}

    .ts-look :is(.vd-mcp-card, .vd-mcp-details) .vd-role-actions:not(:has(a.actionlink)) {
        display: none;
    }

.ts-look :is(.vd-mcp-card, .vd-mcp-details) a.actionlink {
    display: inline-block;
    padding: .4em 1em;
    font-size: .9em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lk-accent);
    text-decoration: none;
    background-color: var(--lk-surface);
    border: var(--lk-border) solid var(--lk-accent);
    border-radius: calc(var(--lk-radius) * .6);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .ts-look :is(.vd-mcp-card, .vd-mcp-details) a.actionlink:hover,
    .ts-look :is(.vd-mcp-card, .vd-mcp-details) a.actionlink:focus-visible {
        color: var(--lk-accent-text);
        background-color: var(--lk-accent);
    }

    .ts-look :is(.vd-mcp-card, .vd-mcp-details) a.actionlink:focus-visible {
        outline: 3px solid var(--lk-focus);
        outline-offset: 2px;
    }

/* gruppeoverskrifter fra fields/{group} (vd-group-heading) */
.ts-look .vd-group-heading h3 {
    margin: .25em 0 .5em 0;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--lk-text);
}

/* ------------------------------------------------------------------ detalje: MCP's detaljeskabelon (vd-mcp-details) */

.ts-look .vd-mcp-details .vd-role-title {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: .5em;
}

.ts-look .vd-mcp-details .vd-caption {
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--lk-muted);
}