/**
 * Task editor — inline opgavetyper-picker + faneblade.
 */

.jobmatch-task-form {
    max-width: 960px;
}

/* Jobordre-modalen: brug hele modal-bredden (ingen 960px-kapning). */
.jobmatch-jobordre-task-form {
    max-width: 100%;
    width: 100%;
}

/* Felterne i hver fane flyder i et responsivt grid, så hele bredden udnyttes
   i stedet for ét meget bredt input pr. række. */
.jobmatch-jobordre-task-form .jobmatch-task-section-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0 1.5rem;
    align-items: start;
}

/* Tekstområder og katalog-pickere (opgaver, kompetencer m.fl.) fylder hele fanen. */
.jobmatch-jobordre-task-form .jobmatch-task-section-content > .jobmatch-task-field:has(textarea),
.jobmatch-jobordre-task-form .jobmatch-task-section-content > .jobmatch-task-field:has(.jobmatch-task-opgavetyper-picker-wrap),
.jobmatch-jobordre-task-form .jobmatch-task-section-content > .jobmatch-task-field:has(.jobmatch-task-catalog-picker-wrap) {
    grid-column: 1 / -1;
}

.jobmatch-jobordre-task-form .jobmatch-task-section-content:has(.jobmatch-task-catalog-picker-wrap),
.jobmatch-jobordre-task-form .jobmatch-task-section-content:has(.jobmatch-task-opgavetyper-picker-wrap) {
    grid-template-columns: 1fr;
}

/* Faneblade i task-editoren (genbruger .cm-tab-nav/.cm-tab-btn/.tab-content fra common.css) */
.jobmatch-task-tabs .cm-tab-nav {
    flex-wrap: wrap;
}

.jobmatch-task-tabs .cm-tab-btn {
    border-radius: 6px 6px 0 0;
}

.jobmatch-task-tabs .jobmatch-task-tab-panel {
    margin-bottom: 1rem;
}

/*
 * Jobordre-modal: stabil højde ved tab-skift — body + fane-indhold scroller
 * internt i stedet for at modalen hopper op/ned.
 */
#jobmatch-jobordre-modal > .modal-content.modal-inner:has(.jobmatch-jobordre-task-form) {
    overflow: hidden;
    height: 88vh;
    max-height: 88vh;
}

#jobmatch-jobordre-modal .modal-body.jobmatch-jobordre-modal-body:has(.jobmatch-jobordre-task-form) {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#jobmatch-jobordre-modal .jobmatch-jobordre-task-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#jobmatch-jobordre-modal .jobmatch-task-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#jobmatch-jobordre-modal .jobmatch-task-tabs .cm-tab-nav {
    flex-shrink: 0;
}

#jobmatch-jobordre-modal .jobmatch-task-tab-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 0;
}

#jobmatch-jobordre-modal .jobmatch-task-tab-panel.active:has(.jobmatch-task-opgavetyper-picker-wrap) .jobmatch-task-section-content,
#jobmatch-jobordre-modal .jobmatch-task-tab-panel.active:has(.jobmatch-task-catalog-picker-wrap) .jobmatch-task-section-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Inline katalog-picker (opgaver, kompetencer m.fl.) */
.jobmatch-task-catalog-picker-wrap,
.jobmatch-task-opgavetyper-picker-wrap {
    width: 100%;
    margin-top: 0.25rem;
}

.jobmatch-task-catalog-picker-wrap .jobmatch-twinview-opgavetyper-toolbar,
.jobmatch-task-opgavetyper-picker-wrap .jobmatch-twinview-opgavetyper-toolbar {
    padding: 0.5rem 0 0;
    width: 100%;
    box-sizing: border-box;
}

.jobmatch-task-catalog-picker-wrap .jobmatch-twinview-opgavetyper-body,
.jobmatch-task-opgavetyper-picker-wrap .jobmatch-twinview-opgavetyper-body {
    min-height: 320px;
    max-height: none;
    overflow: auto;
    padding: 0.5rem 0;
    width: 100%;
    box-sizing: border-box;
}

/* I jobordre-modal: picker fylder det tilgængelige fane-areal (modal-højde er fast) */
#jobmatch-jobordre-modal .jobmatch-task-catalog-picker-wrap,
#jobmatch-jobordre-modal .jobmatch-task-opgavetyper-picker-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#jobmatch-jobordre-modal .jobmatch-task-field:has(.jobmatch-task-opgavetyper-picker-wrap),
#jobmatch-jobordre-modal .jobmatch-task-field:has(.jobmatch-task-catalog-picker-wrap) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#jobmatch-jobordre-modal .jobmatch-task-opgavetyper-picker-wrap .jobmatch-twinview-opgavetyper-body,
#jobmatch-jobordre-modal .jobmatch-task-catalog-picker-wrap .jobmatch-twinview-opgavetyper-body {
    flex: 1;
    min-height: 280px;
}

.jobmatch-task-opgavetyper-picker-loading {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #64748b;
}

#jobmatch-jobordre-modal .jobmatch-task-opgavetyper-picker-wrap .jobmatch-twinview-opgavetyper-weekly-panel,
#jobmatch-jobordre-modal .jobmatch-task-catalog-picker-wrap .jobmatch-twinview-opgavetyper-weekly-panel,
#jobmatch-jobordre-modal .jobmatch-task-opgavetyper-picker-wrap .jobmatch-twinview-catalog-selected-panel,
#jobmatch-jobordre-modal .jobmatch-task-catalog-picker-wrap .jobmatch-twinview-catalog-selected-panel,
#jobmatch-jobordre-modal .jobmatch-task-opgavetyper-picker-wrap .jobmatch-twinview-opgavetyper-subtasks-panel,
#jobmatch-jobordre-modal .jobmatch-task-catalog-picker-wrap .jobmatch-twinview-opgavetyper-subtasks-panel {
    max-height: min(50vh, 420px);
}

/* =============================================================
 * Kompakt layout — samme princip som "Tilføj log"-modalen:
 * små paddings/margins så indholdsarealet maksimeres.
 * Alt scoped til #jobmatch-jobordre-modal.
 * ============================================================= */

/* Modal-skal: fjern de store side-/top-paddings (modal-inner = 24px). */
#jobmatch-jobordre-modal > .modal-content.modal-inner {
    padding: 0 16px;
}

#jobmatch-jobordre-modal .modal-header {
    padding: 12px 0 8px;
    margin-bottom: 0;
}

#jobmatch-jobordre-modal .modal-header h3 {
    line-height: 1.2;
}

#jobmatch-jobordre-modal .modal-body.jobmatch-jobordre-modal-body {
    padding: 10px 0;
}

#jobmatch-jobordre-modal .modal-footer {
    padding: 10px 0;
}

/* Faneblade: mindre afstand under nav. */
#jobmatch-jobordre-modal .jobmatch-task-tabs .cm-tab-nav {
    margin-bottom: 12px;
}

/* Felter: tættere lodret rytme + kompakte labels. */
#jobmatch-jobordre-modal .jobmatch-task-field {
    margin-bottom: 12px;
}

#jobmatch-jobordre-modal .jobmatch-task-field label {
    margin-bottom: 4px;
}

#jobmatch-jobordre-modal .jobmatch-task-field-help {
    margin-top: 3px;
}

/* Inputs/tekstområder: lavere indre padding (matcher log-modalens kompakthed). */
#jobmatch-jobordre-modal .jobmatch-task-field input[type="text"],
#jobmatch-jobordre-modal .jobmatch-task-field input[type="email"],
#jobmatch-jobordre-modal .jobmatch-task-field input[type="number"],
#jobmatch-jobordre-modal .jobmatch-task-field input[type="date"],
#jobmatch-jobordre-modal .jobmatch-task-field input[type="time"],
#jobmatch-jobordre-modal .jobmatch-task-field select,
#jobmatch-jobordre-modal .jobmatch-task-field textarea {
    padding-top: 6px;
    padding-bottom: 6px;
}

#jobmatch-jobordre-modal .jobmatch-task-field textarea {
    min-height: 84px;
}

/* Grid mellem felter: lidt mindre kolonneafstand. */
#jobmatch-jobordre-modal .jobmatch-jobordre-task-form .jobmatch-task-section-content {
    gap: 0 1rem;
}