/**
 * Gedeelde variabelen en basisstijl voor alle PM-schermen (projectmanagement-tool).
 * Elk scherm deelt dit bestand — nieuwe shortcodes hergebruiken dezelfde classes/variabelen.
 */

:root {
    --pm-primary: #EC622C;
    --pm-primary-dark: #C94E1F;
    --pm-primary-light: #FBE2D6;
    --pm-text: #24262B;
    /* Donkerder dan een "standaard" muted-grijs voor beter contrast/leesbaarheid (was #767A82,
       haalde net niet de AA-richtlijn van 4.5:1 op een witte achtergrond). */
    --pm-text-muted: #565A61;
    --pm-border: #E2E4E8;
    --pm-bg: #FFFFFF;
    --pm-bg-subtle: #F7F7F8;
    --pm-success: #1F9D55;
    --pm-success-bg: #EAFAF0;
    --pm-success-border: #A9E4C1;
    --pm-error: #D33333;
    --pm-error-bg: #FDEAEA;
    --pm-radius: 8px;
    --pm-radius-sm: 4px;
    --pm-gap: 1em;
    --pm-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pm-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --pm-fw-light: 300;
    --pm-fw-regular: 400;
    --pm-fw-medium: 500;
    --pm-fw-semibold: 600;
    --pm-fw-bold: 700;
    --pm-fw-black: 800;
    --pm-shadow: 0 1px 3px rgba(24, 26, 32, .08);
}

.pm-app {
    max-width: 960px;
    font-family: var(--pm-font);
    font-weight: var(--pm-fw-regular);
    color: var(--pm-text);
    line-height: 1.5;
}

.pm-app h2 {
    font-weight: var(--pm-fw-black);
    font-size: 1.6em;
    letter-spacing: -.01em;
    margin: 0 0 .8em;
}

.pm-app h3 {
    font-weight: var(--pm-fw-bold);
    font-size: 1.05em;
    margin: 1.8em 0 .7em;
}

.pm-app hr {
    border: none;
    border-top: 1px solid var(--pm-border);
    margin: 1.6em 0;
}

/* Formuliervelden */
.pm-app .pm-field {
    margin-bottom: 1.1em;
}

.pm-app .pm-field label {
    display: block;
    font-weight: var(--pm-fw-semibold);
    font-size: .92em;
    margin-bottom: .35em;
    color: var(--pm-text);
}

.pm-app input[type=text],
.pm-app input[type=number],
.pm-app textarea,
.pm-app select {
    width: 100%;
    padding: .6em .7em;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    box-sizing: border-box;
    font: inherit;
    font-weight: var(--pm-fw-regular);
    color: var(--pm-text);
    background: var(--pm-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pm-app input[type=text]:focus,
.pm-app input[type=number]:focus,
.pm-app textarea:focus,
.pm-app select:focus {
    outline: none;
    border-color: var(--pm-primary);
    box-shadow: 0 0 0 3px var(--pm-primary-light);
}

.pm-app input:disabled {
    background: var(--pm-bg-subtle);
    color: var(--pm-text-muted);
}

.pm-app .pm-website-row {
    display: flex;
    align-items: center;
    gap: .6em;
}

.pm-app .pm-website-row input {
    flex: 1;
}

.pm-app .pm-favicon {
    width: 24px;
    height: 24px;
    border-radius: var(--pm-radius-sm);
}

/* Projectkiezer (laden / wijzigen bestaand project) */
.pm-app .pm-project-picker {
    background: var(--pm-bg-subtle);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    padding: .9em 1em;
    margin-bottom: 1.4em;
}

.pm-app .pm-project-picker label {
    color: var(--pm-primary-dark);
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Preset-rij onder een repeater */
.pm-app .pm-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6em;
}

.pm-app .pm-preset-select {
    width: auto;
    min-width: 180px;
}

/* Repeater-tabellen */
.pm-app .pm-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: .6em;
    box-shadow: var(--pm-shadow);
    border-radius: var(--pm-radius);
    overflow: hidden;
}

.pm-app .pm-table th,
.pm-app .pm-table td {
    padding: .5em .6em;
    border: 1px solid var(--pm-border);
    vertical-align: top;
}

.pm-app .pm-table th {
    background: var(--pm-bg-subtle);
    text-align: left;
    font-size: .82em;
    font-weight: var(--pm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pm-text-muted);
}

.pm-app .pm-th-handle {
    width: 28px;
}

.pm-app .pm-row.pm-row-dragging {
    opacity: .4;
}

.pm-app .pm-drag-handle {
    cursor: grab;
    text-align: center;
    color: var(--pm-text-muted);
    user-select: none;
    font-weight: var(--pm-fw-bold);
}

.pm-app .pm-drag-handle:active {
    cursor: grabbing;
}

/* Knoppen */
.pm-app .pm-btn-add {
    background: var(--pm-primary-light);
    color: var(--pm-primary-dark);
    border: 1px solid var(--pm-primary);
    border-radius: var(--pm-radius-sm);
    padding: .55em 1.1em;
    font-family: inherit;
    font-weight: var(--pm-fw-semibold);
    font-size: .92em;
    cursor: pointer;
    transition: background .15s ease;
}

.pm-app .pm-btn-add:hover {
    background: var(--pm-primary);
    color: #fff;
}

.pm-app .pm-btn-remove {
    background: var(--pm-error-bg);
    color: var(--pm-error);
    border: 1px solid var(--pm-error);
    border-radius: var(--pm-radius-sm);
    width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
}

.pm-app .pm-btn-save {
    background: var(--pm-primary);
    color: #fff;
    border: none;
    border-radius: var(--pm-radius-sm);
    padding: .8em 1.8em;
    font-family: inherit;
    font-weight: var(--pm-fw-bold);
    font-size: 1em;
    cursor: pointer;
    transition: background .15s ease;
}

.pm-app .pm-btn-save:hover:not(:disabled) {
    background: var(--pm-primary-dark);
}

.pm-app .pm-btn-save:disabled {
    opacity: .6;
    cursor: default;
}

.pm-app .pm-btn-secondary {
    background: var(--pm-bg);
    color: var(--pm-text);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: .5em 1em;
    font-family: inherit;
    font-weight: var(--pm-fw-medium);
    font-size: .88em;
    cursor: pointer;
}

.pm-app .pm-btn-secondary:hover {
    border-color: var(--pm-primary);
    color: var(--pm-primary-dark);
}

/* Statusmeldingen */
.pm-app .pm-error {
    color: var(--pm-error);
    background: var(--pm-error-bg);
    border: 1px solid var(--pm-error);
    border-radius: var(--pm-radius-sm);
    padding: .7em .9em;
    font-weight: var(--pm-fw-medium);
    font-size: .92em;
    margin-bottom: 1em;
}

.pm-app .pm-success {
    background: var(--pm-success-bg);
    border: 1px solid var(--pm-success-border);
    color: var(--pm-success);
    padding: 1em 1.2em;
    border-radius: var(--pm-radius);
    font-weight: var(--pm-fw-medium);
}

.pm-app .pm-success a {
    color: var(--pm-primary-dark);
    font-weight: var(--pm-fw-semibold);
}

/* JSON-paneel */
.pm-app .pm-json-panel {
    margin-bottom: 1.4em;
}

.pm-app .pm-json-toggle {
    background: none;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: .45em .9em;
    font-family: var(--pm-font-mono);
    font-size: .82em;
    font-weight: var(--pm-fw-medium);
    color: var(--pm-text-muted);
    cursor: pointer;
}

.pm-app .pm-json-toggle:hover {
    color: var(--pm-primary-dark);
    border-color: var(--pm-primary);
}

.pm-app .pm-json-body {
    margin-top: .6em;
    padding: 1em;
    background: var(--pm-bg-subtle);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
}

.pm-app .pm-json-body textarea {
    font-family: var(--pm-font-mono);
    font-size: .82em;
    resize: vertical;
}

.pm-app .pm-json-actions {
    display: flex;
    gap: .6em;
    margin-top: .7em;
}

/* Flatpickr in huisstijlkleur */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
}

.flatpickr-day.inRange {
    background: var(--pm-primary-light);
    border-color: var(--pm-primary-light);
    box-shadow: -5px 0 0 var(--pm-primary-light), 5px 0 0 var(--pm-primary-light);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays {
    background: var(--pm-primary);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff;
}

.flatpickr-weekday {
    background: var(--pm-primary);
    color: #fff;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: #fff;
    color: #fff;
}

/* Dagen die al bezet zijn door een andere hoofdtaak: duidelijk grijs en niet klikbaar */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    background: var(--pm-bg-subtle);
    color: var(--pm-text-muted);
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Ganttschema: beeldvullende wrapper */
.pm-gantt-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--pm-bg);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1.4em 1.8em;
    overflow: hidden;
}

.pm-gantt-fullscreen .pm-gantt-app {
    max-width: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.pm-gantt-fullscreen h2 {
    flex: 0 0 auto;
}

.pm-gantt-fullscreen .pm-gantt-toolbar,
.pm-gantt-fullscreen .pm-gantt-meta,
.pm-gantt-fullscreen .pm-json-panel {
    flex: 0 0 auto;
}

.pm-gantt-fullscreen #pm_gantt_chart {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.pm-gantt-app {
    max-width: 100%;
}

.pm-gantt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8em;
    margin-bottom: 1em;
}

.pm-gantt-toolbar select {
    width: auto;
}

.pm-gantt-debug-toggle {
    display: flex;
    align-items: center;
    gap: .4em;
    font-size: .88em;
    font-weight: var(--pm-fw-medium);
    color: var(--pm-text-muted);
    cursor: pointer;
}

.pm-gantt-debug-toggle input {
    width: auto;
}

.pm-gantt-status {
    color: var(--pm-text-muted);
    font-weight: var(--pm-fw-medium);
    padding: 1em 0;
}

.pm-gantt-meta {
    margin-top: .8em;
    font-size: .82em;
    color: var(--pm-text-muted);
}

#pm_gantt_chart {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow);
    overflow-x: auto;
}

/* Balkjes: de "lap"-kleuring zelf (.pm-gantt-bar-tier0/1/2) staat in gantt.php via
   wp_add_inline_style, gekoppeld aan de frappe-gantt stylesheet — nodig omdat .bar/.bar-progress
   frappe's eigen classes zijn (zie toelichting daar). */
.pm-gantt-app .bar-label {
    font-family: var(--pm-font);
    font-weight: var(--pm-fw-medium);
}

/* Hover-popup (frappe-gantt) in huisstijl. De basisopmaak van .popup-wrapper zelf (achtergrond,
   afronding, padding:0) staat in gantt.php via wp_add_inline_style, gekoppeld aan de frappe-gantt
   stylesheet — dat is nodig omdat .popup-wrapper een class van frappe zelf is en anders willekeurig
   verliest van frappe's eigen CSS al naar gelang de laadvolgorde van bestanden (zie toelichting daar).
   Hier alleen de opmaak van de eigen .pm-gantt-popup-* structuur binnenin die wrapper. */
.pm-gantt-popup-head {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .8em .9em;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.pm-gantt-popup-favicon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
}

.pm-gantt-popup-head-text {
    flex: 1;
    min-width: 0;
}

.pm-gantt-popup-title {
    font-weight: var(--pm-fw-bold);
    font-size: .98em;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-gantt-popup-subtitle {
    font-size: .76em;
    color: rgba(255, 255, 255, .8);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-gantt-popup-pct-badge {
    flex-shrink: 0;
    font-weight: var(--pm-fw-black);
    font-size: .92em;
    padding: .3em .65em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.pm-gantt-popup-pct-open { background: rgba(236, 98, 44, .22); color: #ff9d6b; }
.pm-gantt-popup-pct-done { background: rgba(31, 157, 85, .22); color: #4ade95; }
.pm-gantt-popup-pct-over { background: rgba(211, 51, 51, .25); color: #ff8a8a; }

.pm-gantt-popup-body {
    display: flex;
    flex-direction: column;
    gap: .65em;
    padding: .8em .9em .9em;
}

.pm-gantt-popup-desc {
    color: rgba(255, 255, 255, .9);
    font-size: .85em;
    line-height: 1.4;
}

.pm-gantt-popup-meta {
    font-size: .78em;
    color: rgba(255, 255, 255, .82);
}

.pm-gantt-popup-bar {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, .12);
    border-radius: 4px;
    overflow: hidden;
}

.pm-gantt-popup-bar-sm {
    height: 4px;
    min-width: 60px;
    margin-top: .3em;
}

.pm-gantt-popup-bar-fill {
    height: 100%;
    background: var(--pm-primary);
    border-radius: 4px;
}

/* Over budget: rood + streeppatroon i.p.v. de normale kleur */
.pm-gantt-popup-bar-over .pm-gantt-popup-bar-fill {
    background: repeating-linear-gradient(45deg, #ff5c5c, #ff5c5c 3px, #d33333 3px, #d33333 6px);
}

.pm-gantt-popup-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .78em;
    color: rgba(255, 255, 255, .85);
    margin-top: .4em;
}

.pm-gantt-popup-overbudget {
    color: #ff8a8a;
    font-weight: var(--pm-fw-semibold);
}

.pm-gantt-popup-row-over td {
    background: rgba(211, 51, 51, .1);
}

.pm-badge-error {
    background: #D33333;
}

.pm-gantt-popup-bron {
    display: inline-block;
    font-size: .74em;
    font-weight: var(--pm-fw-semibold);
    padding: .12em .5em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    white-space: nowrap;
}

.pm-gantt-popup-bron-tijd {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .95);
}

.pm-gantt-popup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8em;
    color: #fff;
}

.pm-gantt-popup-table th {
    text-align: left;
    padding: 0 .4em .35em 0;
    color: rgba(255, 255, 255, .7);
    font-weight: var(--pm-fw-semibold);
    font-size: .72em;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.pm-gantt-popup-table td {
    padding: .45em .4em .45em 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    text-align: left;
    vertical-align: middle;
    color: #fff;
}

.pm-gantt-popup-table tr:last-child td {
    border-bottom: none;
}

.pm-gantt-popup-subtaak-naam {
    font-weight: var(--pm-fw-medium);
    margin-bottom: .1em;
}

.pm-gantt-popup-check {
    display: flex;
    align-items: center;
    gap: .4em;
    cursor: pointer;
    white-space: nowrap;
}

.pm-gantt-popup-check input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: var(--pm-success);
    cursor: pointer;
}

.pm-gantt-popup-check input[type=checkbox]:disabled {
    opacity: .5;
    cursor: default;
}

.pm-badge {
    display: inline-block;
    background: var(--pm-primary);
    color: #fff;
    border-radius: 999px;
    padding: .05em .5em;
    font-size: .78em;
    font-weight: var(--pm-fw-semibold);
}

.pm-gantt-popup-debug {
    padding: .6em;
    background: rgba(255, 255, 255, .08);
    border-radius: var(--pm-radius-sm);
    font-family: var(--pm-font-mono);
    font-size: .7em;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* Detail-modal (vervangt de onbetrouwbare hover-popup): klik op een balkje opent dit gecentreerd,
   met dezelfde .pm-gantt-popup-* inhoudsopmaak als hierboven (kop/body/tabel). */
.pm-gantt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 12, .55);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5em;
}

.pm-gantt-modal {
    position: relative;
    background: var(--pm-text);
    color: #fff;
    border-radius: 14px;
    width: 400px;
    max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
    font-family: var(--pm-font);
}

.pm-gantt-modal-close {
    position: absolute;
    top: .6em;
    right: .6em;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.pm-gantt-modal-close:hover {
    background: rgba(255, 255, 255, .22);
}

.pm-gantt-modal .pm-gantt-popup-table {
    margin-top: 0;
}

.pm-gantt-modal-edit {
    position: absolute;
    top: .6em;
    right: 3em;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .95em;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.pm-gantt-modal-edit:hover {
    background: rgba(255, 255, 255, .22);
}

/* Schuifbalk-sidebar om hoofdtaak-datums live te verschuiven. Licht thema (i.t.t. de donkere
   modal) omdat dit een werk-/bewerkpaneel is, consistent met de rest van de PM-editor-UI. */
.pm-gantt-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 92vw;
    background: var(--pm-bg);
    border-left: 1px solid var(--pm-border);
    box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
    z-index: 1000001;
    display: flex;
    flex-direction: column;
    font-family: var(--pm-font);
}

.pm-gantt-sidebar-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8em;
    padding: 1.2em 2.6em 1em 1.2em;
    border-bottom: 1px solid var(--pm-border);
}

.pm-gantt-sidebar-header .pm-gantt-modal-close {
    position: absolute;
    top: 1em;
    right: 1em;
    background: var(--pm-bg-subtle);
    color: var(--pm-text);
}

.pm-gantt-sidebar-header .pm-gantt-modal-close:hover {
    background: var(--pm-primary-light);
}

.pm-gantt-sidebar-title {
    font-weight: var(--pm-fw-bold);
    font-size: 1.05em;
    color: var(--pm-text);
}

.pm-gantt-sidebar-desc {
    font-size: .85em;
    color: var(--pm-text-muted);
    margin-top: .35em;
    line-height: 1.4;
}

.pm-gantt-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: .4em 1.2em;
}

.pm-gantt-sidebar-row {
    padding: .9em 0;
    border-bottom: 1px solid var(--pm-border);
}

.pm-gantt-sidebar-row:last-child {
    border-bottom: none;
}

.pm-gantt-sidebar-row-naam {
    font-weight: var(--pm-fw-semibold);
    font-size: .92em;
    margin-bottom: .55em;
    color: var(--pm-text);
}

.pm-gantt-sidebar-datum {
    display: flex;
    align-items: center;
    gap: .5em;
    margin-bottom: .4em;
}

.pm-gantt-sidebar-datum:last-child {
    margin-bottom: 0;
}

.pm-gantt-sidebar-datum-label {
    width: 34px;
    flex-shrink: 0;
    font-size: .78em;
    font-weight: var(--pm-fw-medium);
    color: var(--pm-text-muted);
}

.pm-gantt-sidebar-datum-waarde {
    flex: 1;
    text-align: center;
    font-weight: var(--pm-fw-medium);
    font-size: .88em;
    color: var(--pm-text);
}

.pm-gantt-sidebar-nudge {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--pm-border);
    background: var(--pm-bg-subtle);
    color: var(--pm-text);
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
}

.pm-gantt-sidebar-nudge:hover {
    background: var(--pm-primary-light);
    border-color: var(--pm-primary);
}

.pm-gantt-sidebar-footer {
    padding: 1em 1.2em;
    border-top: 1px solid var(--pm-border);
}

.pm-gantt-sidebar-footer .pm-btn-save {
    width: 100%;
}

.pm-gantt-sidebar-footer .pm-error {
    margin-bottom: .8em;
}

/* Bevestigingsbalk na het verslepen van een balkje (datums pas opgeslagen na "Bevestigen") */
.pm-gantt-drag-confirm {
    background: var(--pm-bg);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 1em 1.2em;
    margin-bottom: 1em;
}

.pm-gantt-drag-confirm-title {
    font-weight: var(--pm-fw-bold);
    font-size: .95em;
    color: var(--pm-text);
    margin-bottom: .6em;
}

.pm-gantt-drag-confirm-list {
    list-style: none;
    margin: 0 0 .9em;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35em;
}

.pm-gantt-drag-confirm-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5em;
    font-size: .85em;
    color: var(--pm-text);
}

.pm-gantt-drag-confirm-list li span {
    color: var(--pm-text-muted);
}

.pm-gantt-drag-confirm-actions {
    display: flex;
    gap: .6em;
}