/**
 * Rekruter twin view — to kolonner, ingen swipe.
 */

.jobmatch-twinview {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.jobmatch-twinview-intro {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.jobmatch-twinview-toolbar {
    margin-bottom: 1.25rem;
}

.jobmatch-twinview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.jobmatch-twinview-btn-primary {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    text-decoration: none;
}

.jobmatch-twinview-hint {
    opacity: 0.6;
    font-size: 0.85rem;
    cursor: help;
}

.jobmatch-twinview-admin-tests {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-left: auto;
    align-items: center;
}

.jobmatch-twinview-btn-delete {
    border-color: #c3c4c7;
    color: #1d2327;
}

.jobmatch-twinview-btn-delete:hover {
    border-color: #8c8f94;
    background: #fff;
}

.jobmatch-twinview-search-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jobmatch-twinview-search-input {
    width: 100%;
    max-width: 480px;
    padding: 0.5rem 0.65rem;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
}

.jobmatch-twinview-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.jobmatch-twinview-filter,
.jobmatch-twinview-status-filter,
.jobmatch-twinview-active-filter,
.jobmatch-twinview-filter-btn {
    padding: 0.25rem 0.6rem;
    border: 1px solid #c3c4c7;
    background: #f6f7f7;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: normal;
    color: #000;
}

.jobmatch-twinview-filter.is-active,
.jobmatch-twinview-status-filter.is-active,
.jobmatch-twinview-active-filter.is-active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

/* Kolonne-faner (Rekruter): samme grå stil som print-knapperne, valgt fane i mørkere grå. */
.jobmatch-twinview-col-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
}

.jobmatch-twinview-col-tab {
    padding: 0.25rem 0.6rem;
    border: 1px solid #c3c4c7;
    background: #f6f7f7;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: normal;
    color: #000;
}

.jobmatch-twinview-col-tab.is-active {
    background: #dcdcde;
    border-color: #8c8f94;
    color: #000;
    font-weight: 600;
}

.jobmatch-twinview-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 782px) {
    .jobmatch-twinview-columns {
        grid-template-columns: 1fr;
    }
}

.jobmatch-twinview-col-title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2e8f0;
}

/* Header-række i opgavekolonnen: titel til venstre, print-knap til højre. */
.jobmatch-twinview-col-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2e8f0;
}

.jobmatch-twinview-col-head .jobmatch-twinview-col-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.jobmatch-twinview-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jobmatch-twinview-item {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    margin-bottom: 0.35rem;
    background: #fff;
}

.jobmatch-twinview-item-head {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
}

.jobmatch-twinview-item-head:hover {
    background: #f8fafc;
}

.jobmatch-twinview-item-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Jobsøgende-række: kun titel uden wrapper */
.jobmatch-twinview-item-head > .jobmatch-twinview-item-title {
    flex: 1;
    min-width: 0;
}

.jobmatch-twinview-item-title {
    font-weight: 600;
}

.jobmatch-twinview-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    vertical-align: middle;
    line-height: 1.2;
}

.jobmatch-twinview-badge-besat {
    background: #dcfce7;
    color: #166534;
}

.jobmatch-twinview-item.is-besat {
    border-left: 3px solid #16a34a;
    background: #f0fdf4;
}

.jobmatch-twinview-item.is-besat .jobmatch-twinview-item-title {
    color: #166534;
}

.jobmatch-twinview-btn-besat {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.jobmatch-twinview-btn-besat:hover {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

.jobmatch-twinview-badge-draft {
    background: #e5e7eb;
    color: #4b5563;
}

.jobmatch-twinview-item.is-draft {
    opacity: 0.7;
}

.jobmatch-twinview-item.is-draft .jobmatch-twinview-item-title {
    font-style: italic;
}

.jobmatch-twinview-badge-unfilled {
    background: #fee2e2;
    color: #991b1b;
}

.jobmatch-twinview-item.is-unfilled {
    border-left: 3px solid #dc2626;
    background: #fef2f2;
}

.jobmatch-twinview-item.is-unfilled .jobmatch-twinview-item-title {
    color: #991b1b;
}

.jobmatch-twinview-item-tasktypes {
    font-size: 0.78rem;
    font-weight: 500;
    color: #334155;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jobmatch-twinview-item-meta {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
}

.jobmatch-twinview-item-toggle::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s ease;
}

.jobmatch-twinview-item.is-open .jobmatch-twinview-item-toggle::before {
    transform: rotate(90deg);
}

.jobmatch-twinview-item-panel {
    padding: 0 0.65rem 0.65rem;
    border-top: 1px solid #f1f5f9;
}

.jobmatch-twinview-detail {
    font-size: 0.85rem;
    line-height: 1.45;
}

.jobmatch-twinview-detail-primary {
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.jobmatch-twinview-detail-primary-row {
    margin: 0 0 0.35rem;
}

.jobmatch-twinview-detail-primary-row:last-child {
    margin-bottom: 0;
}

.jobmatch-twinview-detail-section-title {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.jobmatch-twinview-detail-section-subtitle {
    margin: 0.65rem 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d2327;
}

.jobmatch-twinview-detail-jobmatch {
    margin-top: 0.25rem;
}

.jobmatch-twinview-detail-thumb-wrap {
    margin-bottom: 0.5rem;
}

.jobmatch-twinview-detail-thumb {
    max-width: 100%;
    height: auto;
    max-height: 160px;
    border-radius: 4px;
    display: block;
}

.jobmatch-twinview-detail-row {
    margin: 0.35rem 0;
}

.jobmatch-twinview-detail-row strong {
    font-weight: 600;
}

.jobmatch-twinview-detail-desc {
    margin: 0.35rem 0 0.65rem;
    padding: 0.5rem 0.65rem;
    background: #f8fafc;
    border-radius: 4px;
    border: 1px solid #f1f5f9;
}

.jobmatch-twinview-detail-desc p {
    margin: 0 0 0.5rem;
}

.jobmatch-twinview-detail-desc p:last-child {
    margin-bottom: 0;
}

.jobmatch-twinview-detail-incomplete .jobmatch-twinview-detail-note {
    margin: 0.35rem 0 0;
    color: #64748b;
}

.jobmatch-twinview-panel-loading,
.jobmatch-twinview-error {
    margin: 0.35rem 0;
    font-size: 0.85rem;
}

.jobmatch-twinview-empty {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.jobmatch-twinview-login,
.jobmatch-twinview-forbidden {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

/* Aktive matches + matchscore (udvidet række) */
.jobmatch-twinview-matches {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.jobmatch-twinview-matches-title {
    margin-top: 0;
}

/* Match-tabel: samme collapse/trekant som liste-rækker (.jobmatch-twinview-item-head) */
.jobmatch-twinview-matches-fold {
    margin-top: 0.35rem;
}

/*
 * Match-tabel: header og body deler samme 3-kolonne grid:
 *   KANDIDAT (1fr) | MATCH (5rem) | AFSTAND (7rem)
 * Header har desuden en toggle-pil yderst til højre; body-tabellen reserverer
 * samme plads (--jm-toggle-space) så kolonnerne aligner præcist.
 */
.jobmatch-twinview-matches-fold {
    --jm-matches-grid-cols: minmax(0, 1fr) 5rem 7rem;
    --jm-matches-grid-gap: 0.35rem 0.5rem;
    --jm-toggle-space: 1.5rem;
}

/* Opgave-visning: ekstra «Ansøgning»-kolonne (Søgt + status + send-mail). */
.jobmatch-twinview-matches-fold[data-match-entity="task"] {
    --jm-matches-grid-cols: minmax(0, 1fr) 3.5rem 5.5rem minmax(12.5rem, 1.1fr);
}

.jobmatch-twinview-appl-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 2rem;
    padding: 0 0.6rem;
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: #2563eb;
    border: 1px solid #1d4ed8;
    border-radius: 6px;
    cursor: pointer;
}

.jobmatch-twinview-appl-send-icon {
    display: block;
    flex: 0 0 auto;
}

.jobmatch-twinview-appl-send:hover {
    background: #1d4ed8;
}

.jobmatch-twinview-appl-send:disabled {
    opacity: 0.5;
    cursor: default;
}

.jobmatch-twinview-appl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
}

.jobmatch-twinview-appl-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #047857;
    background: #d1fae5;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

.jobmatch-twinview-appl-badge[hidden] {
    display: none;
}

.jobmatch-twinview-appl-badge-withdrawn {
    color: #b91c1c;
    background: #fee2e2;
}

.jobmatch-twinview-appl-status {
    font-size: 0.8rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    max-width: 100%;
}

.jobmatch-twinview-badge-applied {
    color: #047857;
    background: #d1fae5;
}

.jobmatch-twinview-badge-applied-negative {
    color: #991b1b;
    background: #fee2e2;
}

/* Faner: én pr. ansøgnings-kategori i match-tabellen. */
.jobmatch-twinview-appl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.jobmatch-twinview-appl-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    cursor: pointer;
}

.jobmatch-twinview-appl-tab.is-active {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
}

.jobmatch-twinview-appl-tab-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0 0.4rem;
}

.jobmatch-twinview-appl-tab:not(.is-active) .jobmatch-twinview-appl-tab-count {
    background: #e2e8f0;
    color: #475569;
}

.jobmatch-twinview-appl-empty {
    margin: 0 0 0.5rem;
    color: #64748b;
    font-size: 0.9rem;
}

.jobmatch-twinview-matches-head .jobmatch-twinview-matches-head-labels {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: var(--jm-matches-grid-cols);
    gap: var(--jm-matches-grid-gap);
    align-items: center;
}

.jobmatch-twinview-matches-hcol {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #334155;
}

.jobmatch-twinview-matches-hcol:nth-child(2),
.jobmatch-twinview-matches-hcol:nth-child(3) {
    text-align: right;
}

.jobmatch-twinview-matches-table-panel {
    padding-top: 0;
    padding-right: var(--jm-toggle-space, 1.5rem);
}

.jobmatch-twinview-matches-table-panel .jobmatch-twinview-match-table {
    margin-top: 0;
}

.jobmatch-twinview-matches-empty {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: #64748b;
}

.jobmatch-twinview-match-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 0.35rem;
    display: block;
}

.jobmatch-twinview-match-table tbody {
    display: block;
}

.jobmatch-twinview-match-table tr {
    display: grid;
    grid-template-columns: var(--jm-matches-grid-cols);
    gap: var(--jm-matches-grid-gap);
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
}

.jobmatch-twinview-match-table th,
.jobmatch-twinview-match-table td {
    padding: 0.35rem 0;
    text-align: left;
    border: none;
    min-width: 0;
}

.jobmatch-twinview-match-table th {
    font-weight: 600;
    color: #334155;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.jobmatch-twinview-match-table td.jobmatch-twinview-match-pct,
.jobmatch-twinview-match-table td.jobmatch-twinview-match-distance {
    text-align: right;
}

.jobmatch-twinview-match-pct {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #0f766e;
}

.jobmatch-twinview-match-distance {
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

.jobmatch-twinview-match-distance .u-text-muted {
    font-size: 0.78rem;
    line-height: 1.2;
}

.jobmatch-twinview-match-date {
    color: #64748b;
    font-size: 0.85rem;
}

/* Match-række: åbn modal (knap som link) */
.jobmatch-twinview-match-open {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    color: #2271b1;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

.jobmatch-twinview-match-open:hover,
.jobmatch-twinview-match-open:focus {
    color: #135e96;
    outline: none;
}

.jobmatch-twinview-match-open:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Modal: opgave + kandidat */
.jobmatch-twinview-match-dialog {
    max-width: min(960px, 96vw);
    width: 100%;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

.jobmatch-twinview-match-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.jobmatch-twinview-match-dialog-inner {
    padding: 0;
}

.jobmatch-twinview-match-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.jobmatch-twinview-match-dialog-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.jobmatch-twinview-match-dialog-close {
    flex-shrink: 0;
    margin: 0;
    padding: 0.1rem 0.45rem;
    font-size: 1.5rem;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: #64748b;
}

.jobmatch-twinview-match-dialog-close:hover,
.jobmatch-twinview-match-dialog-close:focus {
    background: #e2e8f0;
    color: #0f172a;
}

.jobmatch-twinview-match-dialog-banner {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f766e;
    background: #f0fdfa;
    border-bottom: 1px solid #ccfbf1;
}

/* Match-modal: "Hvor I matcher" — felter med rå score over tærskel */
.jobmatch-twinview-match-modal-insight {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #ccfbf1;
    background: #f8fffc;
}

.jobmatch-twinview-match-modal-insight[hidden] {
    display: none !important;
}

.jobmatch-twinview-match-insight-inner {
    margin: 0;
}

.jobmatch-twinview-match-insight-title {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0f766e;
}

.jobmatch-twinview-match-insight-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.jobmatch-twinview-match-insight-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #99f6e4;
    background: #fff;
    font-size: 0.9rem;
}

.jobmatch-twinview-match-insight-label {
    font-weight: 600;
    color: #0f172a;
    flex: 1 1 12rem;
    min-width: 0;
}

.jobmatch-twinview-match-insight-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: #475569;
    font-size: 0.85rem;
}

.jobmatch-twinview-match-insight-pct {
    font-variant-numeric: tabular-nums;
}

.jobmatch-twinview-match-insight-level {
    font-weight: 600;
    color: #0d9488;
}

.jobmatch-twinview-match-insight-empty,
.jobmatch-twinview-match-insight-error {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

.jobmatch-twinview-match-insight-error {
    color: #b45309;
}

.jobmatch-twinview-standards-insight {
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    background: #fff;
}

.jobmatch-twinview-standards-insight-title {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.jobmatch-twinview-standards-insight-score {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    color: #334155;
}

.jobmatch-twinview-standards-insight-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: #475569;
}

.jobmatch-twinview-standards-insight-item {
    margin: 0.15rem 0;
}

/* Match-modal: tydelig sammenligning af opgavetyper (tilbudt vs. ønsket) */
.jobmatch-twinview-modal-opgavetyper {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.jobmatch-twinview-modal-opgavetyper-title {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #334155;
}

.jobmatch-twinview-modal-opgavetyper-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #0f172a;
}

.jobmatch-twinview-match-dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-height: min(70vh, 640px);
    overflow: auto;
}

@media (max-width: 720px) {
    .jobmatch-twinview-match-dialog-grid {
        grid-template-columns: 1fr;
    }
}

.jobmatch-twinview-match-modal-col {
    padding: 0.75rem 1rem;
    border-right: 1px solid #f1f5f9;
    min-width: 0;
}

.jobmatch-twinview-match-modal-col:last-child {
    border-right: none;
}

@media (max-width: 720px) {
    .jobmatch-twinview-match-modal-col {
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
    }

    .jobmatch-twinview-match-modal-col:last-child {
        border-bottom: none;
    }
}

.jobmatch-twinview-match-modal-col .jobmatch-twinview-detail {
    margin: 0;
}

.jobmatch-twinview-match-modal-loading {
    margin: 0.35rem 0;
    font-size: 0.9rem;
    color: #64748b;
}

/* Udvidet række: sektionstitel + rediger opgavetyper */
.jobmatch-twinview-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
}

.jobmatch-twinview-section-head .jobmatch-twinview-detail-section-title {
    margin: 0;
}

/* Handlingsknapper (Print jobordre + Rediger opgave) grupperes samlet til højre. */
.jobmatch-twinview-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

/* Jobordre-modal: handlingsknapper i footerens venstre side, Annuller/Gem til højre. */
#jobmatch-jobordre-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jobmatch-jobordre-footer-actions,
.jobmatch-jobordre-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/*
 * Dialog: rediger opgavetyper. Bredde tilpasset 3-kolonne layout (områder/tree +
 * ugentlig-panel + delopgaver-panel). Falder pænt tilbage til 2 kolonner uden subtasks
 * og 1 kolonne på mobil. Højde holdes inden for 90vh som de øvrige modaler.
 */
.jobmatch-twinview-opgavetyper-dialog {
    max-width: min(96vw, 1180px);
    width: 100%;
    padding: 0;
    border: 1px solid #ccd0d4;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
}

.jobmatch-twinview-opgavetyper-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.jobmatch-twinview-opgavetyper-dialog-inner {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.jobmatch-twinview-opgavetyper-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.jobmatch-twinview-opgavetyper-dialog-title {
    margin: 0;
    font-size: 1.05rem;
}

.jobmatch-twinview-opgavetyper-dialog-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 0 0.25rem;
}

.jobmatch-twinview-opgavetyper-loading {
    margin: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #64748b;
}

.jobmatch-twinview-opgavetyper-toolbar {
    padding: 0.5rem 1rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.jobmatch-twinview-opgavetyper-search {
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
}

.jobmatch-twinview-opgavetyper-body {
    flex: 1;
    overflow: auto;
    padding: 0.5rem 1rem;
    min-height: 120px;
}

.jobmatch-twinview-opgavetyper-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.35rem 0.85rem;
    align-items: start;
}

.jobmatch-twinview-opgavetyper-item {
    margin: 0;
    min-width: 0;
}

.jobmatch-twinview-opgavetyper-label {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.jobmatch-twinview-opgavetyper-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.65rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: #fafafa;
}

.jobmatch-twinview-opgavetyper-footer .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Opgavetyper-modal: branche + områder (accordion) */
.jobmatch-twinview-opgavetyper-root {
    width: 100%;
}

.jobmatch-twinview-opgavetyper-modal-layout.is-task-weekly {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
    gap: 0.9rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.jobmatch-twinview-opgavetyper-modal-layout.is-task-weekly.is-task-subtasks {
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.9fr) minmax(260px, 1.1fr);
}

.jobmatch-twinview-opgavetyper-modal-layout.is-selected-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
    gap: 0.9rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

#jobmatch-jobordre-modal .jobmatch-task-catalog-picker-wrap .jobmatch-twinview-opgavetyper-modal-layout,
#jobmatch-jobordre-modal .jobmatch-task-opgavetyper-picker-wrap .jobmatch-twinview-opgavetyper-modal-layout {
    width: 100%;
}

.jobmatch-twinview-catalog-selected-panel .jobmatch-twinview-catalog-selected-item {
    justify-content: space-between;
}

.jobmatch-twinview-catalog-selected-panel .jobmatch-twinview-catalog-selected-item:hover {
    background: #eef6ff;
}

.jobmatch-twinview-catalog-selected-remove {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.15rem 0.45rem;
    line-height: 1.3;
}

.jobmatch-twinview-catalog-selected-empty {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.field-checkbox-group.borgerdata-opgavetyper-picker .borgerdata-opgavetyper-body {
    min-height: 240px;
}

.jobmatch-twinview-opgavetyper-main {
    min-width: 0;
}

.jobmatch-twinview-opgavetyper-weekly-panel {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fafbfc;
    padding: 0.6rem;
    /*
     * Hold panelet synligt mens venstre tree scrolles. Sticky inde i body-scrolleren;
     * align-self: start hindrer at grid-cellen stretcher hele scrollhøjden så vi mister
     * sticky-effekten. Maks. højde sikrer at panelet ikke selv overstiger det synlige
     * vindue (footer-knapperne i modalen er altid synlige uden for body-scroll).
     */
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(90vh - 220px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.jobmatch-twinview-opgavetyper-weekly-panel .jobmatch-twinview-opgavetyper-weekly-list {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.jobmatch-twinview-opgavetyper-weekly-title {
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.jobmatch-twinview-opgavetyper-weekly-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 44vh;
    overflow: auto;
}

.jobmatch-twinview-opgavetyper-weekly-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.jobmatch-twinview-opgavetyper-weekly-item:last-child {
    border-bottom: none;
}

.jobmatch-twinview-opgavetyper-weekly-label {
    flex: 1;
    min-width: 120px;
    font-size: 0.88rem;
}

.jobmatch-twinview-opgavetyper-weekly-inputs {
    display: flex;
    gap: 0.3rem;
}

.jobmatch-twinview-opgavetyper-weekly-inputs input {
    width: 3.4rem;
    padding: 0.2rem 0.3rem;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    font-size: 0.82rem;
}

.jobmatch-twinview-opgavetyper-weekly-drag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    min-width: 1.35rem;
    height: 1.6rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: -0.08em;
    cursor: grab;
    touch-action: none;
}

.jobmatch-twinview-opgavetyper-weekly-drag:active {
    cursor: grabbing;
}

.jobmatch-twinview-opgavetyper-weekly-drag:hover,
.jobmatch-twinview-opgavetyper-weekly-drag:focus-visible {
    color: #475569;
    background: #e2e8f0;
    outline: none;
}

.jobmatch-twinview-opgavetyper-weekly-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #dc2626;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.jobmatch-twinview-opgavetyper-weekly-remove:hover,
.jobmatch-twinview-opgavetyper-weekly-remove:focus-visible {
    background: #fee2e2;
    color: #b91c1c;
    outline: none;
}

.jobmatch-twinview-opgavetyper-weekly-item.is-dragging {
    opacity: 0.55;
}

.jobmatch-twinview-opgavetyper-weekly-item.is-drag-over {
    box-shadow: inset 0 2px 0 #2563eb;
}

.jobmatch-twinview-opgavetyper-weekly-total {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid #dbe2ea;
    font-size: 0.9rem;
}

.jobmatch-twinview-opgavetyper-weekly-timer-range {
    margin-top: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid #dbe2ea;
}

.jobmatch-twinview-opgavetyper-weekly-timer-title {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.jobmatch-twinview-opgavetyper-weekly-timer-range .jobmatch-weekly-panel-timer-range {
    display: flex;
    gap: 0.5rem;
}

.jobmatch-twinview-opgavetyper-weekly-timer-range .jobmatch-weekly-panel-timer-range .cm-input-w-100 {
    flex: 1;
    min-width: 0;
}

/* Klikbare weekly-items (fokus-skift til delopgaver-panel). */
.jobmatch-twinview-opgavetyper-weekly-panel--clickable .jobmatch-twinview-opgavetyper-weekly-item.is-focusable {
    cursor: pointer;
    border-radius: 4px;
    padding: 0.35rem 0.45rem;
    margin: 0 -0.2rem;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.jobmatch-twinview-opgavetyper-weekly-panel--clickable .jobmatch-twinview-opgavetyper-weekly-item.is-focusable:hover,
.jobmatch-twinview-opgavetyper-weekly-panel--clickable .jobmatch-twinview-opgavetyper-weekly-item.is-focusable:focus-visible {
    background: #eef2f7;
    outline: none;
}

.jobmatch-twinview-opgavetyper-weekly-panel--clickable .jobmatch-twinview-opgavetyper-weekly-item.is-focused {
    background: #e0ecff;
    box-shadow: inset 3px 0 0 #2563eb;
}

/* Delopgaver-panel (3. kolonne). */
.jobmatch-twinview-opgavetyper-subtasks-panel {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0.6rem;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(90vh - 220px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.jobmatch-twinview-opgavetyper-subtasks-header {
    margin-bottom: 0.35rem;
}

.jobmatch-twinview-opgavetyper-subtasks-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
}

.jobmatch-twinview-opgavetyper-subtasks-focused-label {
    color: #2563eb;
    font-weight: 700;
}

.jobmatch-twinview-opgavetyper-subtasks-empty {
    padding: 0.55rem 0.4rem;
    font-size: 0.88rem;
    color: #64748b;
}

.jobmatch-twinview-opgavetyper-subtasks-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    flex: 1;
}

.jobmatch-twinview-opgavetyper-subtasks-section-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.jobmatch-twinview-opgavetyper-subtasks-chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.35rem;
    max-height: 22vh;
    overflow: auto;
    padding-right: 0.1rem;
}

.jobmatch-twinview-opgavetyper-subtasks-chip-empty {
    padding: 0.25rem 0.2rem;
    font-size: 0.85rem;
    color: #64748b;
    list-style: none;
}

.jobmatch-twinview-opgavetyper-subtasks-chip {
    display: inline-flex;
    align-items: stretch;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    overflow: hidden;
    line-height: 1.2;
}

.jobmatch-twinview-opgavetyper-subtasks-chip.is-mine {
    background: #e8f0ff;
    border-color: #93b4f0;
}

.jobmatch-twinview-opgavetyper-subtasks-chip-text {
    border: none;
    background: transparent;
    padding: 0.3rem 0.55rem;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-align: left;
    max-width: 32ch;
    color: #1f2937;
}

.jobmatch-twinview-opgavetyper-subtasks-chip-text:hover {
    background: rgba(37, 99, 235, 0.08);
}

.jobmatch-twinview-opgavetyper-subtasks-chip-text:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.jobmatch-twinview-opgavetyper-subtasks-chip-badge {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

.jobmatch-twinview-opgavetyper-subtasks-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.jobmatch-twinview-opgavetyper-subtasks-chip-delete {
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    padding: 0 0.5rem;
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.jobmatch-twinview-opgavetyper-subtasks-chip-delete:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.jobmatch-twinview-opgavetyper-subtasks-library-hint {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}

.jobmatch-twinview-opgavetyper-subtasks-textarea-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 0;
}

.jobmatch-twinview-opgavetyper-subtasks-textarea-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.jobmatch-twinview-opgavetyper-subtasks-textarea {
    width: 100%;
    min-height: 7em;
    max-height: 18em;
    resize: vertical;
    padding: 0.45rem 0.55rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.88rem;
    font-family: inherit;
}

.jobmatch-twinview-opgavetyper-subtasks-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: center;
}

.jobmatch-twinview-opgavetyper-subtasks-add {
    flex: 0 0 auto;
}

.jobmatch-twinview-opgavetyper-subtasks-add-hint {
    font-size: 0.78rem;
    color: #64748b;
    flex: 1 1 14rem;
}

.jobmatch-twinview-opgavetyper-subtasks-error {
    margin: 0;
    color: #b91c1c;
    font-size: 0.82rem;
}

/* Delopgaver-blok i task-detail panel (under opgavetyper-listen). */
.jobmatch-twinview-detail-subtasks {
    margin: 0.5rem 0 0.75rem;
    padding: 0.55rem 0.75rem;
    background: #f8fafc;
    border-left: 3px solid #2563eb;
    border-radius: 0 4px 4px 0;
}

.jobmatch-twinview-detail-subtasks-title {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
}

.jobmatch-twinview-detail-subtasks-row {
    margin-top: 0.4rem;
}

.jobmatch-twinview-detail-subtasks-row:first-of-type {
    margin-top: 0;
}

.jobmatch-twinview-detail-subtasks-head {
    margin: 0 0 0.2rem;
    font-size: 0.85rem;
    color: #334155;
}

.jobmatch-twinview-detail-subtasks-text,
.jobmatch-twinview-detail-subtasks-list {
    margin: 0;
    padding: 0;
    font-size: 0.86rem;
    color: #475569;
}

.jobmatch-twinview-detail-subtasks-list {
    padding-left: 1.1rem;
    list-style: disc;
}

.jobmatch-twinview-opgavetyper-branch-row {
    margin-bottom: 0.75rem;
}

.jobmatch-twinview-opgavetyper-branch-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.jobmatch-twinview-opgavetyper-branch-label-text {
    color: #334155;
}

.jobmatch-twinview-opgavetyper-branch-select {
    width: 100%;
    max-width: 100%;
    padding: 0.45rem 0.5rem;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    font-size: 0.9rem;
    background: #fff;
}

.jobmatch-twinview-opgavetyper-areas {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.jobmatch-twinview-opgavetyper-area {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.jobmatch-twinview-opgavetyper-area-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    list-style: none;
}

.jobmatch-twinview-opgavetyper-area-summary::-webkit-details-marker {
    display: none;
}

.jobmatch-twinview-opgavetyper-area-summary::before {
    content: '\2212';
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
    color: #64748b;
    font-weight: normal;
}

.jobmatch-twinview-opgavetyper-area:not([open]) .jobmatch-twinview-opgavetyper-area-summary::before {
    content: '+';
}

.jobmatch-twinview-opgavetyper-area-title {
    flex: 1;
    min-width: 0;
}

.jobmatch-twinview-opgavetyper-area-actions {
    flex-shrink: 0;
}

.jobmatch-twinview-opgavetyper-select-all.button-link {
    margin: 0;
    padding: 0.15rem 0.35rem;
    border: none;
    background: transparent;
    color: #2271b1;
    text-decoration: underline;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: normal;
}

.jobmatch-twinview-opgavetyper-select-all.button-link:hover,
.jobmatch-twinview-opgavetyper-select-all.button-link:focus {
    color: #135e96;
    outline: none;
}

.jobmatch-twinview-opgavetyper-area .jobmatch-twinview-opgavetyper-list {
    padding: 0 0.65rem 0.65rem 1.85rem;
    margin: 0;
}

/* Smalle vinduer håndteres af auto-fill ovenfor — ingen ekstra @media nødvendigt */

/* Udvid katalog (ny opgave / område / branche) */
.jobmatch-twinview-opgavetyper-extend {
    margin: 0 1rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    padding: 0.35rem 0.65rem;
    font-size: 0.88rem;
}

.jobmatch-twinview-opgavetyper-extend > summary {
    cursor: pointer;
    font-weight: 600;
    color: #1e293b;
    list-style: none;
}

.jobmatch-twinview-opgavetyper-extend > summary::-webkit-details-marker {
    display: none;
}

.jobmatch-twinview-opgavetyper-extend-inner {
    padding: 0.5rem 0 0.25rem;
}

.jobmatch-twinview-opgavetyper-extend-section {
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #e2e8f0;
}

.jobmatch-twinview-opgavetyper-extend-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.jobmatch-twinview-opgavetyper-extend-h {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.jobmatch-twinview-opgavetyper-extend-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.45rem;
}

.jobmatch-twinview-opgavetyper-extend-label span {
    font-size: 0.82rem;
    color: #475569;
}

.jobmatch-twinview-opgavetyper-extend-fieldset {
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    padding: 0.45rem 0.5rem;
    margin: 0.45rem 0;
}

.jobmatch-twinview-opgavetyper-extend-fieldset legend {
    font-size: 0.82rem;
    padding: 0 0.25rem;
}

.jobmatch-twinview-opgavetyper-extend-cb {
    display: block;
    margin: 0.2rem 0;
    font-size: 0.86rem;
}

.jobmatch-twinview-opgavetyper-extend-hint {
    margin: 0.35rem 0;
    font-size: 0.82rem;
    color: #64748b;
}

.jobmatch-twinview-opgavetyper-extend-msg {
    margin: 0.45rem 0 0;
    font-size: 0.84rem;
}

.jobmatch-twinview-opgavetyper-extend-msg.is-error {
    color: #b91c1c;
}

.jobmatch-twinview-opgavetyper-extend-msg.is-success {
    color: #15803d;
}

/* Opgavetyper der kun findes i det flade katalog, ikke i et område */
.jobmatch-twinview-opgavetyper-area--orphan {
    border-style: dashed;
    background: #fafbfc;
}

.jobmatch-twinview-opgavetyper-empty-branch {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: #64748b;
}

/* Avanceret kandidatsøgning (Rekruter) */
.jobmatch-twinview-advanced {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    background: #fafbfc;
}

.jobmatch-twinview-advanced-summary {
    cursor: pointer;
    font-weight: 600;
}

.jobmatch-twinview-advanced-body {
    margin-top: 0.75rem;
}

.jobmatch-twinview-advanced-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.5rem;
}

.jobmatch-twinview-advanced-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.jobmatch-twinview-discovery-group {
    margin-bottom: 0.75rem;
}

.jobmatch-twinview-discovery-group strong {
    display: block;
    margin-bottom: 0.35rem;
}

.jobmatch-twinview-discovery-cb {
    display: inline-flex;
    align-items: center;
    margin-right: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.jobmatch-twinview-discovery-opg-list {
    max-height: 240px;
    overflow-y: auto;
}

.jobmatch-twinview-discovery-opg-filter-row {
    margin-bottom: 0.5rem;
    max-width: 420px;
}

.jobmatch-twinview-discovery-opg-filter-row .input-field {
    width: 100%;
    max-width: 420px;
}

.jobmatch-twinview-discovery-opg-title {
    margin: 0.75rem 0 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.jobmatch-twinview-discovery-opg-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .jobmatch-twinview-discovery-opg-cols {
        grid-template-columns: 1fr;
    }
}

.jobmatch-twinview-discovery-opg-col--browse .jobmatch-twinview-discovery-opg-filter-row {
    max-width: none;
}

.jobmatch-twinview-discovery-opg-selected-title {
    margin: 0 0 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.jobmatch-twinview-discovery-opg-selected-empty {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    opacity: 0.85;
}

.jobmatch-twinview-discovery-opg-selected-list {
    min-height: 2rem;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.jobmatch-twinview-discovery-selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    font-size: 0.9rem;
}

.jobmatch-twinview-discovery-selected-label {
    flex: 1;
    min-width: 0;
}

.jobmatch-twinview-discovery-selected-remove {
    flex-shrink: 0;
    min-width: 2rem;
    padding: 0.1rem 0.4rem;
    line-height: 1.2;
}

.jobmatch-twinview-discovery-komp-block {
    margin-top: 1.25rem;
}

@media (max-width: 640px) {
    .jobmatch-twinview-opgavetyper-modal-layout.is-task-weekly,
    .jobmatch-twinview-opgavetyper-modal-layout.is-task-weekly.is-task-subtasks,
    .jobmatch-twinview-opgavetyper-modal-layout.is-selected-summary {
        grid-template-columns: 1fr;
    }

    .jobmatch-twinview-opgavetyper-branch-select {
        max-width: none;
    }

    .jobmatch-twinview-opgavetyper-weekly-panel,
    .jobmatch-twinview-opgavetyper-subtasks-panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 1024px) {
    .jobmatch-twinview-opgavetyper-modal-layout.is-task-weekly.is-task-subtasks {
        grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
    }

    .jobmatch-twinview-opgavetyper-modal-layout.is-task-weekly.is-task-subtasks .jobmatch-twinview-opgavetyper-subtasks-panel {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
    }
}

/*
 * Kontrast (Rekruter): sort/mørk tekst på filtre, Opret-links og listerækker.
 * Global/common eller tema kan sætte lys tekst på <button> / .button i .module-container.
 */
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-filter:not(.is-active),
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-status-filter:not(.is-active),
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-active-filter:not(.is-active),
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-filter-btn {
    color: #000000 !important;
}

.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-filter.is-active,
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-status-filter.is-active,
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-active-filter.is-active {
    background: #2271b1 !important;
    border-color: #2271b1 !important;
    color: #ffffff !important;
}

.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-col-tab {
    color: #000000 !important;
}

.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-col-tab.is-active {
    background: #dcdcde !important;
    border-color: #8c8f94 !important;
    color: #000000 !important;
    font-weight: 600;
}

.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-actions a.button.jobmatch-twinview-btn-primary {
    color: #000000 !important;
    background: #ffffff !important;
    border-color: #c3c4c7 !important;
}

.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-hint {
    color: #000000 !important;
    opacity: 1;
}

.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-item-head,
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-item-head .jobmatch-twinview-item-title,
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-item-head .jobmatch-twinview-item-tasktypes,
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-item-head .jobmatch-twinview-item-meta {
    color: #000000 !important;
}

.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-item-head:hover,
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-item-head:hover .jobmatch-twinview-item-title,
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-item-head:hover .jobmatch-twinview-item-tasktypes,
.jobmatch-twinview.module.module-container.common-container .jobmatch-twinview-item-head:hover .jobmatch-twinview-item-meta {
    color: #000000 !important;
}