#board .kb-card-tools > .task-board-expanded,
#board .kb-card-tools > .task-board-collapsed { position: relative; }
#board .kb-card-tools .task-board-header { min-height: 34px; padding-right: 76px; }
#board .kb-card-tools > .task-board-collapsed { padding-right: 86px !important; min-height: 34px; }
#board .kb-card-actions { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; z-index: 2; }
#board .kb-card-actions > a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; box-sizing: border-box; border-radius: 5px;
    background: #ffffffbd; color: #000 !important; border: 1px solid #b86b00;
    font-size: 20px; line-height: 1; opacity: 1;
}
#board .kb-card-actions > a:hover { background: #ffffffe6; }
#board .kb-card-actions .fa { color: inherit !important; }
#board .kb-card-actions > a:focus-visible { outline: 3px solid #195ca8; outline-offset: 2px; }
.kb-card-preview { color: #e6edf5; background: #000; padding: 16px; box-sizing: border-box; }
.kb-card-preview-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; border-color: #465365; }
.kb-card-preview h2 { color: #f0f4f9; overflow-wrap: anywhere; }
.kb-card-preview-header h2 { flex: 1 1 200px; min-width: 0; margin: 0; }
.kb-card-preview-edit {
    display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px;
    min-height: 36px; padding: 0 12px; border: 1px solid #b86b00; border-radius: 5px;
    background: #ffffffbd; color: #000 !important; font-weight: 600; text-decoration: none;
}
.kb-card-preview-edit:hover { background: #ffffffe6; text-decoration: none; }
.kb-card-preview-edit .fa { color: inherit !important; }
.kb-card-preview-edit:focus-visible { outline: 3px solid #8fc7ff; outline-offset: 2px; }
/* Keep button foregrounds black even under native modal link/icon theme rules. */
#board .kb-card-actions > a,
#board .kb-card-actions > a .fa,
#board .kb-card-actions > a .fa::before,
#modal-box #modal-content .kb-card-preview .kb-card-preview-edit,
#modal-box #modal-content .kb-card-preview .kb-card-preview-edit .fa,
#modal-box #modal-content .kb-card-preview .kb-card-preview-edit .fa::before {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}
.kb-card-preview-text { max-height: none; overflow: visible; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
.kb-card-preview-text h1, .kb-card-preview-text h2, .kb-card-preview-text h3,
.kb-card-preview-text h4, .kb-card-preview-text h5, .kb-card-preview-text h6 { color: #f0f4f9; }
.kb-card-preview-text pre { overflow-x: auto; background: #000; color: #e6edf5; border-color: #465365; }
.kb-card-preview-text code { background: #000; color: #e6edf5; }
.kb-card-preview-text pre code { background: transparent; }
.kb-card-preview-text blockquote { color: #cbd5e1; border-color: #6f8196; }
.kb-card-preview-text th, .kb-card-preview-text td { color: #e6edf5; border-color: #465365; background: #000; }
.kb-card-preview-text img { max-width: 100%; height: auto; }
.kb-card-preview-text a { color: #8fc7ff; }
.kb-card-preview-text a:hover, .kb-card-preview-text a:focus { color: #bbddff; }
@media print { #board .kb-card-actions { display: none; } }

/* Theme the complete card-modal surface, including native add and edit forms.
   The form action identifies native task creation/editing without affecting other modals. */
#modal-box:has(.kb-card-preview, form:is([action*="TaskModificationController"], [action*="TaskCreationController"])),
#modal-content:has(.kb-card-preview, form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) {
    background: #000 !important;
    color: #e6edf5;
    color-scheme: dark;
    --color-primary: #e6edf5;
    --color-light: #cbd5e1;
    --color-medium: #cbd5e1;
    --color-dark: #e6edf5;
    --link-color-primary: #8fc7ff;
    --link-color-focus: #bbddff;
    --link-color-hover: #bbddff;
    --input-background-color: #000;
    --input-focus-color: #e6edf5;
    --input-border-color: #6f8196;
    --input-placeholder-color: #b6c2cf;
    --button-default-background-color: #000;
    --button-default-color: #e6edf5;
    --button-default-background-color-focus: #000;
    --button-default-color-focus: #fff;
    --button-primary-background-color: #000;
    --button-primary-color: #e6edf5;
    --button-primary-background-color-focus: #000;
    --button-primary-color-focus: #fff;
    --dropdown-background-color: #000;
}
#modal-content:has(form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) :is(
    form, .page-header, .task-form-container, .task-form-main-column,
    .task-form-secondary-column, .task-form-bottom, .text-editor-preview-area,
    .select2-selection, .select2-selection__choice
) { background: #000 !important; color: #e6edf5; }
#modal-content:has(form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) :is(h2, label, legend, .select2-selection__rendered) {
    color: #e6edf5;
}
#modal-content:has(form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select, option
) { background: #000 !important; color: #e6edf5; border-color: #6f8196; }
#modal-content:has(form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) :is(input, textarea)::placeholder { color: #b6c2cf; }
/* Native Select2 and date-picker popups may be appended outside the modal. */
body:has(#modal-content form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) > .select2-container :is(
    .select2-dropdown, .select2-search__field, .select2-results__option
) { background: #000; color: #e6edf5; }
body:has(#modal-content form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) > .select2-container .select2-results__option--highlighted {
    background: #294b6e; color: #fff;
}
body:has(#modal-content form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) #ui-datepicker-div,
body:has(#modal-content form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) #ui-datepicker-div :is(.ui-datepicker-header, .ui-state-default) {
    background: #000; color: #e6edf5; border-color: #6f8196;
}

/* Shared bluish teal outline for add, edit and full-card view modals. */
#modal-box:has(.kb-card-preview, form:is([action*="TaskModificationController"], [action*="TaskCreationController"])) {
    border: 2px solid #2a9d8f !important;
    box-sizing: border-box;
}