/**
 * Log-board: visuelle forbedringer der ikke hører hjemme i common.css.
 * Styler kun via data-attribut + fælles cm-chip-basisklasse (ingen nye styling-klasser).
 */

/* Sub-status chips i «Tilføj log»: tynd adskillerstreg fra de almindelige status-chips,
   så det er tydeligt at der er tale om sub-statusser. Stregen vises kun når der faktisk
   er valgt en status med sub-statusser, dvs. når der er sub-status chips i rækken. */
[data-sub-status-row]:has(.cm-chip),
[data-information-status-row]:has(.cm-chip) {
    border-top: 1px solid rgba(43, 108, 176, 0.35);
    padding-top: 8px;
}

[data-sub-status-row],
[data-information-status-row] {
    align-items: center;
    flex-wrap: wrap;
}

[data-sub-status-row] > .cm-label,
[data-information-status-row] > .cm-label {
    display: inline;
    margin-bottom: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Synlige checkbokse i chip-layout — adskiller fra sub-status (enkeltvalg-knapper). */
[data-information-status-row] .log-information-status-option,
[data-information-status-row] .vl-mq-information-status-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

[data-information-status-row] .log-information-status-cb,
[data-information-status-row] .vl-mq-information-status-cb {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0 10px 0 0;
    cursor: pointer;
}

[data-information-status-row] .log-information-status-option.active .log-information-status-cb,
[data-information-status-row] .vl-mq-information-status-option.active .vl-mq-information-status-cb {
    accent-color: #fff;
}

/* Svag glow når sub-status / oplysningsstatus chips dukker op (de gen-renderes ved hvert statusvalg),
   så de er mere iøjnefaldende uden at være forstyrrende. Spiller to gange og falder til ro. */
[data-sub-status-row] .cm-chip,
[data-information-status-row] .cm-chip {
    animation: vlSubStatusGlow 1.6s ease-in-out 10;
}

@keyframes vlSubStatusGlow {
    0%   { box-shadow: 0 0 0 0 rgba(43, 108, 176, 0); }
    50%  { box-shadow: 0 0 7px 2px rgba(43, 108, 176, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(43, 108, 176, 0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-sub-status-row] .cm-chip,
    [data-information-status-row] .cm-chip {
        animation: none;
    }
}