/* Kanban boards (columns + cards). Loaded globally; scoped by #kanban-board / .kanban-* where needed. */

.form-800 .table-card-body .white-bg:has(#kanban-board) {
    background: transparent !important;
}

/* Reusable column kanban wrapper (Tasks, Support Tickets, etc.): stage row + card rhythm. */
.kanban-board-columns .task-stage-container {
    background: transparent !important;
}

.kanban-board-columns .todo-container:not(.task-empty-state-container) {
    margin-bottom: 8px;
}

.kanban-board-columns .todo-item.task-card-v2:not(.task-empty-state-card) {
    padding: 15px !important;
}

.kanban-board {
    width: 100%;
}

.kanban-board-scroll {
    overflow-x: auto;
    overflow-y: hidden !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

    .kanban-board-scroll > * {
        display: inline-block;
        vertical-align: top;
    }

.kanban-columns {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0;
    width: max-content;
    min-width: 100%;
    overflow: visible;
}

.kanban-column {
    padding-left: 6px !important;
    padding-right: 6px !important;
    flex: 0 0 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
}

#kanban-board,
#tasks-dashboard-scope {
    --stageHdrBorderOuter: rgba(15,39,66,.22);
    --stageHdrBorderInner: rgba(15,39,66,.10);
    --stageHdrHighlight: rgba(245,247,250,.95);
    --stageHdrRadius: 10px;
}

.kanban-column-title,
.todo-label {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--KanbanHeaderBackground, #E9ECF7);
    border-radius: var(--stageHdrRadius);
    padding: 10px 14px;
    min-height: 44px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--KanbanHeaderText, #2f4a5e) !important;
    border: 1px solid var(--stageHdrBorderOuter);
    box-shadow: 0 5px 5px rgba(24,32,51,.16), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(15,39,66,.06);
}

    .kanban-column-title::before,
    .todo-label::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: calc(var(--stageHdrRadius) - 1px);
        border: 1px solid var(--stageHdrHighlight);
        pointer-events: none;
    }

    .kanban-column-title::after,
    .todo-label::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: calc(var(--stageHdrRadius) - 2px);
        border: 1px solid var(--stageHdrBorderInner);
        pointer-events: none;
    }

.kanban-card {
    margin-bottom: 12px;
    cursor: pointer;
}

    .kanban-card.is-hidden {
        display: none !important;
    }

.kanban-card-body {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(15,39,66,.05) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    box-shadow: 0 16px 30px rgba(24,32,51,.16) !important;
    transition: transform .15s ease, box-shadow .15s ease;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    overflow: hidden;
}

    .kanban-card-body:hover {
        transform: translateY(-1px);
        box-shadow: 0 20px 40px rgba(24,32,51,.20) !important;
    }

    .kanban-card-body::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(244,241,251,.85) 0%, rgba(255,255,255,0) 60%);
        pointer-events: none;
        z-index: 0;
    }

    .kanban-card-body > * {
        position: relative;
        z-index: 1;
    }

.kanban-card-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1C2430 !important;
    margin: 0 0 10px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(15,39,66,.08) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
}

.kanban-card-title-text {
    flex: 1;
    min-width: 0;
}

.kanban-card-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 12px 0 !important;
}

.kanban-card-pill {
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.kanban-card-contact {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.kanban-card-icon {
    width: 28px !important;
    height: 25px !important;
    border-radius: 10px !important;
    background: #EAF1FF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
}

    .kanban-card-icon svg {
        width: 18px !important;
        height: 18px !important;
        fill: #36506A !important;
    }

.kanban-card-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #1C2430 !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.kanban-card-divider {
    height: 1px !important;
    background: rgba(15,39,66,.10) !important;
    margin: 12px 0 10px 0 !important;
}

.kanban-card-note-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(28,36,48,.55) !important;
    margin: 0 0 10px 0 !important;
}

.kanban-card-note-panel {
    background: #E9ECF7 !important;
    border: 1px solid rgba(15,39,66,.06) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.kanban-card-note-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 8px !important;
}

.kanban-card-note-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(28,36,48,.72) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.kanban-column-empty {
    margin-top: 10px;
    background: #fff;
    border: 1px dashed #d7d7d7;
    border-radius: 10px;
    padding: 14px;
    color: #8a8a8a;
    font-size: 13px;
}

.kanban-drag-placeholder {
    border: 1px dashed #9aa;
    border-radius: 6px;
    background: #f7f9fc;
}

@media (max-width: 767.98px) {
    .table-list-shell .table-card-scroll-top,
    .table-list-shell .table-card-scroll-inner,
    .table-list-shell .kanban-board,
    .table-list-shell .kanban-board-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        transform: none !important;
    }

        .table-list-shell .table-card-scroll-top > *,
        .table-list-shell .kanban-board-scroll > * {
            transform: none !important;
            width: 100% !important;
            max-width: 100% !important;
        }

    .table-list-shell .kanban-columns {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: block !important;
    }

    .table-list-shell .kanban-column {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Tasks dashboard: toolbar row. Outline chip sizing for non-table layouts lives here; table cards use tables.css.
   Grid/list toggle: appearance matches .table-card-header .toolbar-view-segmented in tables.css. */
.kanban-toolbar-scope .kanban-toolbar-row .kanban-toolbar-search {
    min-width: 0;
    flex: 1 1 200px;
    padding-left: 6px;
    padding-top: 5px;
}

.kanban-toolbar-scope .kanban-toolbar-row .kanban-toolbar-controls {
    flex: 0 0 auto;
}

.form-1400 .kanban-toolbar-row .kanban-toolbar-actions {
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.form-1400 .kanban-toolbar-row .toolbar-view-segmented {
    margin-right: 6px;
}

/* Icon-only filter chip: 36×36 like table-card "Customize columns" gear */
.form-1400 .kanban-toolbar-row .kanban-toolbar-actions .dropdown.btn-filter-drop > .btn.table-card-outline-btn.table-card-filter-btn {
    padding: 0 !important;
    width: 36px;
    min-width: 36px;
}

.form-1400 .kanban-toolbar-row .kanban-toolbar-actions .btn.table-card-outline-btn svg path {
    stroke: currentColor;
}

.kanban-toolbar-row .toolbar-view-segmented {
    display: inline-flex;
    align-items: stretch;
    /* 36px OUTSIDE edge to edge so the control matches the 36px outline chips beside it. */
    box-sizing: border-box;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%);
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.kanban-toolbar-row .toolbar-view-segmented .tabs-controls {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.kanban-toolbar-row .toolbar-view-segmented .nav-link {
    /* 34 + the wrapper's 2px of border = the 36px outer height. */
    min-height: 34px !important;
    height: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    /* Card-header ink (not PageTitle — title can be white on a dark bar). */
    color: var(--CardHeaderText, var(--Heading, #154a7e)) !important;
}

.kanban-toolbar-row .toolbar-view-segmented .nav-link svg {
    /* Authored glyph size (viewBox 0 0 16 16); matches tables.css. */
    width: 16px;
    height: 16px;
    display: block;
}

.kanban-toolbar-row .toolbar-view-segmented .nav-link svg path {
    stroke: currentColor;
}

.kanban-toolbar-row .toolbar-view-segmented li + li .nav-link {
    border-left: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
}

.kanban-toolbar-row .toolbar-view-segmented .nav-link.active {
    background: var(--buttonprimarybackground, #154a7e) !important;
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .kanban-toolbar-scope .kanban-toolbar-row {
        row-gap: .5rem;
    }

    .kanban-toolbar-scope .kanban-toolbar-row .kanban-toolbar-search {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .kanban-toolbar-scope .kanban-toolbar-row .kanban-toolbar-controls {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .kanban-toolbar-scope .kanban-toolbar-row .kanban-toolbar-actions {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: .5rem;
        white-space: nowrap;
        padding-bottom: .25rem;
        scrollbar-width: thin;
        max-width: 100%;
        justify-content: flex-end;
    }

    .kanban-toolbar-scope .kanban-toolbar-row .kanban-toolbar-actions::-webkit-scrollbar {
        height: 6px;
    }

    .kanban-toolbar-scope .kanban-toolbar-row .kanban-toolbar-actions > * {
        flex: 0 0 auto;
    }
}

    #searchButton, #searchButtonMobile {
        display: none !important;
    }

    :root {
        --tile-bg: #F6F4FB;
        --tile-bg-top: #F4F1FB;
        --tile-border: rgba(15,39,66,.05);
        --tile-shadow: 0 16px 30px rgba(24,32,51,.16);
        --tile-shadow-hover: 0 20px 40px rgba(24,32,51,.20);
        --text: #1C2430;
        --text-soft: rgba(28,36,48,.78);
        --section: rgba(28,36,48,.55);
        --brand-navy: #0F2742;
        --panel-bg: #E9ECF7;
        --panel-border: rgba(15,39,66,.06);
        --row-divider: rgba(15,39,66,.10);
        --stageHdrBorderOuter: rgba(15,39,66,.22);
        --stageHdrBorderInner: rgba(15,39,66,.10);
        --stageHdrHighlight: rgba(245,247,250,.95);
        --stageHdrRadius: 10px;
    }

    .search-input {
        width: 100%;
        max-width: 400px;
    }

    .todo-container.draggable {
        cursor: move;
    }

    .todo-container {
        margin-bottom: 12px;
        cursor: pointer;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .placeholder {
        border: 1px dashed #9aa;
        border-radius: 6px;
        margin-bottom: 10px;
        height: 60px;
        background: rgba(0,0,0,.02);
    }

    .dragging {
        opacity: 0.5;
    }

    .task-list-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 12px;
    }

        .task-list-scroll .task-list-table {
            min-width: 760px;
            margin-bottom: 0 !important;
        }

    .task-board-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

        .task-board-scroll .task-stage-container {
            min-width: 100%;
        }

        .task-board-scroll::-webkit-scrollbar,
        .task-list-scroll::-webkit-scrollbar {
            height: 8px;
        }

    .task-stage-container {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0;
        width: max-content;
        min-width: 100%;
        overflow: visible;
    }

    .stage-column {
        padding-left: 6px !important;
        padding-right: 6px !important;
        flex: 0 0 var(--col-width, 280px) !important;
        max-width: var(--col-width, 280px) !important;
        min-width: var(--col-width, 280px) !important;
        box-sizing: border-box;
    }

    .task-stage-container:not(.is-scroll) .stage-column {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .task-stage-container.is-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .task-stage-container.is-scroll .stage-column {
            flex: 0 0 var(--col-width, 280px) !important;
            max-width: var(--col-width, 280px) !important;
            min-width: var(--col-width, 280px) !important;
        }

    .todo-item.task-card-v2 {
        background-color: #FFFFFF !important;
        border: 1px solid var(--tile-border) !important;
        border-radius: 10px !important;
        padding: 12px !important;
        box-shadow: var(--tile-shadow) !important;
        transition: transform .15s ease, box-shadow .15s ease;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

        .todo-item.task-card-v2::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(244,241,251,.85) 0%, rgba(255,255,255,0) 60%);
            pointer-events: none;
            z-index: 0;
        }

        .todo-item.task-card-v2 > * {
            position: relative;
            z-index: 1;
        }

    .todo-container:hover .todo-item.task-card-v2 {
        transform: translateY(-1px);
        box-shadow: var(--tile-shadow-hover) !important;
    }

    .task-card-v2 .task-name {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
        margin: 0 0 10px 0 !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(15,39,66,.08) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
    }

    .task-card-v2 .task-row {
        display: grid !important;
        grid-template-columns: 90px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: start !important;
        margin-bottom: 8px !important;
    }

        .task-card-v2 .task-row:last-child {
            margin-bottom: 0 !important;
        }

    .task-card-v2 .task-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--section) !important;
        line-height: 1.2 !important;
    }

    .task-card-v2 .task-value {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        color: var(--text) !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .task-card-v2 .task-divider {
        height: 1px !important;
        background: rgba(15,39,66,.10) !important;
        margin: 12px 0 10px 0 !important;
    }

    .task-card-v2 .task-panel {
        background: var(--panel-bg) !important;
        border: 1px solid var(--panel-border) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .task-card-v2 .task-panel-row {
        display: grid !important;
        grid-template-columns: 90px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: start !important;
        padding: 8px 10px !important;
    }

        .task-card-v2 .task-panel-row + .task-panel-row {
            border-top: 1px solid var(--row-divider) !important;
        }

    .task-card-v2 .task-panel-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
        line-height: 1.25 !important;
    }

    .task-card-v2 .task-panel-value {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text-soft) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

        .task-card-v2 .task-panel-value.is-overdue {
            color: #dc3545 !important;
        }

    .task-card-v2 .task-note {
        font-style: italic !important;
        color: rgba(28,36,48,.72) !important;
    }

    .task-list-table tr[data-taskid] {
        cursor: pointer;
    }

    /* Vertically center cell text, selects, and action icons on the row midline.
       Match form-control-sm height so plain text / icons share the same center as dropdowns. */
    .task-list-table tbody tr[data-taskid] > td {
        vertical-align: middle !important;
        position: relative;
    }

    .task-list-table tbody tr[data-taskid] > td .todo-title {
        margin: 0;
        padding: 0;
        line-height: 1.25;
        display: flex;
        align-items: center;
        min-height: 31px;
    }

    .task-list-table tbody tr[data-taskid] > td select.form-control-sm {
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
        /* Bootstrap .form-control-sm uses ~0.2rem; match global form controls */
        border-radius: var(--form-radius, 6px);
    }

    .task-list-table tbody tr[data-taskid] > td.row-actions,
    .task-list-table tbody tr[data-taskid] > td.actions {
        text-align: center;
    }

    .task-list-table tbody tr[data-taskid] > td .icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        line-height: 0;
        min-height: 31px;
        min-width: 28px;
    }

    .task-list-table tbody tr[data-taskid] > td .icon-button svg {
        display: block;
    }

    .task-empty-state-container {
        cursor: default !important;
    }

    .task-empty-state-card {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* Overrides .todo-item.task-card-v2 padding — compact "Create new" tile (~half prior height) */
    .todo-item.task-card-v2.task-empty-state-card {
        min-height: 76px;
        padding: 6px 12px !important;
    }

    .task-empty-state-inner {
        width: 100%;
    }

    .task-empty-state-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .todo-item.task-card-v2.task-empty-state-card .task-empty-state-title {
        font-size: 15px;
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .todo-item.task-card-v2.task-empty-state-card .empty-state-actions {
        gap: 6px;
    }

    .todo-item.task-card-v2.task-empty-state-card .empty-state-actions .button {
        height: 30px;
        min-height: 30px;
        min-width: 100px;
    }

    .task-empty-state-help {
        font-size: 14px;
        color: var(--text-soft);
        margin: 0 0 16px 0;
        line-height: 1.5;
    }

    .task-empty-state-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .task-empty-state-btn svg {
            flex: 0 0 auto;
        }

    @media (min-width: 992px) {
        .task-board-scroll {
            overflow-x: visible;
        }

            .task-board-scroll .task-stage-container {
                width: 100%;
                min-width: 100%;
            }

        .task-stage-container:not(.is-scroll) .stage-column {
            flex: 1 1 0 !important;
            max-width: none !important;
            min-width: 0 !important;
        }
    }

    @media (max-width: 991.98px) {
        .task-board-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            margin-left: -6px;
            margin-right: -6px;
            padding-left: 6px;
            padding-right: 6px;
        }

            .task-board-scroll .task-stage-container {
                display: inline-flex;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                width: max-content !important;
                min-width: max-content !important;
                gap: 12px;
            }

            .task-stage-container:not(.is-scroll) .stage-column,
            .task-stage-container.is-scroll .stage-column,
            .task-board-scroll .stage-column {
                flex: 0 0 280px !important;
                max-width: 280px !important;
                min-width: 280px !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
    }

    @media (max-width: 767.98px) {
        .btn-filter-drop .dropdown-menu.filter-card-form.dropdown-menu-right {
            height: 88vh !important;
            max-height: 88vh !important;
            overflow: hidden !important;
            right: 0 !important;
            left: auto !important;
            width: calc(100vw - 24px) !important;
            min-width: 0 !important;
        }

        .btn-filter-drop .dropdown-menu.filter-card-form .form-filter-head,
        .btn-filter-drop .dropdown-menu.filter-card-form .form-filter-footer {
            position: sticky;
            z-index: 2;
            background: #fff;
        }

        .btn-filter-drop .dropdown-menu.filter-card-form .form-filter-head {
            top: 0;
        }

        .btn-filter-drop .dropdown-menu.filter-card-form .form-filter-footer {
            bottom: 0;
        }

        .btn-filter-drop .dropdown-menu.filter-card-form .form-filter-body {
            max-height: calc(88vh - 110px) !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .filter-card-form {
            min-width: 280px;
            max-width: calc(100vw - 24px);
            right: 0 !important;
            left: auto !important;
        }

        .search-bar .form-control {
            width: 100%;
        }

        .task-card-v2 .task-name {
            font-size: 14px !important;
        }

        .task-card-v2 .task-row,
        .task-card-v2 .task-panel-row {
            grid-template-columns: 78px minmax(0, 1fr) !important;
            gap: 6px !important;
        }

        .todo-item.task-card-v2.task-empty-state-card {
            min-height: 64px;
            padding: 5px 10px !important;
        }

        .todo-item.task-card-v2.task-empty-state-card .task-empty-state-title {
            font-size: 14px;
            margin-bottom: 3px;
        }

        .todo-item.task-card-v2.task-empty-state-card .empty-state-actions .button {
            height: 28px;
            min-height: 28px;
            min-width: 92px;
        }

        .task-list-scroll {
            margin-left: -6px;
            margin-right: -6px;
            padding-left: 6px;
            padding-right: 6px;
        }

            .task-list-scroll .task-list-table {
                min-width: 760px;
            }

                .task-list-scroll .task-list-table th:nth-child(1),
                .task-list-scroll .task-list-table td:nth-child(1) {
                    min-width: 220px;
                    white-space: normal;
                }

                .task-list-scroll .task-list-table th:nth-child(2),
                .task-list-scroll .task-list-table td:nth-child(2),
                .task-list-scroll .task-list-table th:nth-child(3),
                .task-list-scroll .task-list-table td:nth-child(3) {
                    min-width: 120px;
                    white-space: nowrap;
                }

                .task-list-scroll .task-list-table th:nth-child(4),
                .task-list-scroll .task-list-table td:nth-child(4) {
                    min-width: 170px;
                    white-space: normal;
                }

                .task-list-scroll .task-list-table th:nth-child(5),
                .task-list-scroll .task-list-table td:nth-child(5) {
                    min-width: 180px;
                    white-space: normal;
                }

                .task-list-scroll .task-list-table th:nth-child(6),
                .task-list-scroll .task-list-table td:nth-child(6) {
                    min-width: 52px;
                    white-space: nowrap;
                    text-align: center;
                }
    }



/* =============================================================================
   Tasks dashboard + pipeline (moved from AcademyTasksList_Partial; shared with
   lead-style board scroll, stage columns, task cards, toolbar).
   ============================================================================= */

/* Lead-style segmented toolbar tabs (replaces inline ul/li list styles) */
.kanban-toolbar-tabs-reset {
    background-color: transparent;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.kanban-toolbar-tabs-reset > li {
    list-style: none !important;
}

/* Category accent: set style="--kanban-accent: #hex" on the same element */
.kanban-accent-left {
    border-left: 6px solid var(--kanban-accent, #ffffff);
}

/* Event / task list shell: full-width rows, header flush under search */
#pipeline-kanban-list.table-list-shell {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Category accent as inset shadow — does not steal layout width (old border-left left a white gutter). */
#pipeline-kanban-data-table.task-list-table tbody tr.task-row-category-accent > td:first-child {
    box-shadow: inset 6px 0 0 0 var(--task-category-accent, transparent);
}

#pipeline-kanban-list.table-list-shell > #pipeline-kanban-data-table.task-list-table {
    width: 100%;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}

/* Task list view: fixed metadata columns; task column takes remaining width */
#pipeline-kanban-data-table.task-list-table {
    table-layout: fixed;
    width: 100%;
}

    #pipeline-kanban-data-table.task-list-table tr.roundheader th.kanban-th-task,
    #pipeline-kanban-data-table.task-list-table tbody td:nth-child(1) {
        width: auto;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #pipeline-kanban-data-table.task-list-table tr.roundheader th.kanban-th-status,
    #pipeline-kanban-data-table.task-list-table tbody td:nth-child(2) {
        width: 200px;
        max-width: 200px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table tbody td:nth-child(2) select.event-task-stage-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* 8-column Tasks board (Task | Status | Priority | Created | Created By | Due | Assigned | Actions).
       These widths are positional (nth-child), so adding or moving a column here means renumbering every
       rule below it. Priority and Created By were added after Status and Created respectively, which is
       why nothing above this block changed: the event board shares columns 1-2 and has its own rules. */
    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tr.roundheader th.kanban-th-priority,
    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tbody td:nth-child(3) {
        width: 120px;
        max-width: 120px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tr.roundheader th.kanban-th-created,
    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tbody td:nth-child(4) {
        width: 150px;
        max-width: 150px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tr.roundheader th.kanban-th-createdby,
    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tbody td:nth-child(5) {
        width: 150px;
        max-width: 150px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tr.roundheader th.kanban-th-due,
    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tbody td:nth-child(6) {
        width: 150px;
        max-width: 150px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tr.roundheader th.kanban-th-assigned,
    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tbody td:nth-child(7) {
        width: 200px;
        max-width: 200px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tr.roundheader th.kanban-th-actions,
    #pipeline-kanban-data-table.task-list-table:not(.task-list-table--event) tbody td:nth-child(8) {
        width: 52px;
        max-width: 52px;
        white-space: nowrap;
        text-align: center;
    }

    /* Event Details tasks (Task | Status | Due | Assigned | Actions) — Task stays widest (auto). */
    #pipeline-kanban-data-table.task-list-table--event tr.roundheader th.kanban-th-status,
    #pipeline-kanban-data-table.task-list-table--event tbody td:nth-child(2) {
        width: 180px;
        max-width: 180px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table--event tr.roundheader th.kanban-th-due,
    #pipeline-kanban-data-table.task-list-table--event tbody td:nth-child(3) {
        width: 150px;
        max-width: 150px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table--event tr.roundheader th.kanban-th-assigned,
    #pipeline-kanban-data-table.task-list-table--event tbody td:nth-child(4) {
        width: 200px;
        max-width: 200px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table--event tbody td:nth-child(4) select.event-task-assignee-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #pipeline-kanban-data-table.task-list-table--event tr.roundheader th.kanban-th-actions,
    #pipeline-kanban-data-table.task-list-table--event tbody td:nth-child(5) {
        width: 52px;
        max-width: 52px;
        white-space: nowrap;
        text-align: center;
    }

#popupbackground.popup-background { display: none; }

/* Task edit / campaign popup helpers — Brand Colors Link Text (same token as .buttonaslink) */
.kanban-link-add {
    color: var(--LinkText, var(--Interactive-Default)) !important;
}
.kanban-link-add:hover,
.kanban-link-add:focus {
    color: var(--LinkText, var(--Interactive-Default)) !important;
    text-decoration: underline;
}
.kanban-assignee-box-spaced { margin-top: 18px; }
input[type="date"].kanban-input-date-narrow { width: 150px; max-width: 100%; }
/* "Task for" searchable combobox: make the text input read like the native <select>s on the popup
   (same box) and force its datalist suggestion popup to render light. The native datalist popup
   follows the OS color-scheme, so without `color-scheme: light` it shows black-bg/white-text on a
   dark-mode OS while the <select> dropdowns stay light. A custom chevron matches the dropdown look. */
.task-for-search-input {
    color-scheme: light;
    width: 100%;
    height: 37px;
    border: 1px solid var(--BorderColor);
    border-radius: 4px;
    padding: 8px 30px 8px 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--Text);
    background-color: var(--form-bg);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
/* Keep the native list-picker click target (opens suggestions) but hide its mismatched arrow so the custom chevron shows. */
.task-for-search-input::-webkit-calendar-picker-indicator { opacity: 0; }
/* "Add time" per-task due-time toggle + revealed time input.
   Match the .formlabel field-header style (13px / 600 / no uppercase) so it reads as a header.
   Selector mirrors ".form-signle label" specificity (+1 class) so it wins over that uppercase rule. */
.form-signle label.add-time-toggle,
.add-time-toggle { font-weight: 600; font-size: 13px; letter-spacing: .01em; text-transform: none; color: var(--form-label); margin-left: 12px; margin-bottom: 0; cursor: pointer; white-space: nowrap; }
.add-time-toggle input[type="checkbox"] { vertical-align: middle; margin-right: 4px; }
input[type="time"].add-time-input { width: 150px; max-width: 100%; }
/* Keep the Due date | Importance | Status row symmetrical: top-align the columns and give every
   header the same height so the field headers AND the inputs below them line up across the row.
   (The "Add time" checkbox makes the Due date header taller; min-height levels the others to match.) */
.task-3col-row { align-items: flex-start; }
.task-3col-row > .form-signle > .formlabel { min-height: 18px; display: flex; align-items: center; white-space: nowrap; }
/* Share the row width across the three columns and have each control fill its column, so the areas
   stay even whether or not "Add time" is checked (Importance/Status no longer shrink to content).
   The Due date column carries the extra "Add time" label, so give it a little more room to keep that
   header on one line. */
.task-3col-row > .form-signle { flex: 1 1 0; min-width: 0; }
/* Due date (esp. datetime-local) needs more room so time + picker icon aren't clipped;
   Importance labels are short (Low/Medium/High) so that column can stay narrower. */
.task-3col-row > .form-signle:first-child { flex: 1.55 1 0; }
.task-3col-row > .form-signle:nth-child(2) { flex: 0.72 1 0; }
.task-3col-row select,
.task-3col-row input[type="date"],
.task-3col-row input[type="time"],
.task-3col-row input[type="datetime-local"] { width: 100% !important; max-width: 100%; box-sizing: border-box; }
/* Narrow Importance/Status columns: less horizontal padding so labels like "Medium" aren't clipped. */
.task-3col-row select {
    padding-left: 6px !important;
    padding-right: 4px !important;
}
.kanban-doc-row .kanban-doc-icon-cell { width: 28px; cursor: pointer; }
.kanban-doc-row .kanban-doc-name-cell { cursor: pointer; }
.kanban-doc-row .kanban-doc-meta { font-size: 0.75rem; line-height: 1.3; }
.kanban-doc-row .kanban-doc-menu-cell { width: 48px; }
.kanban-doc-row .kanban-doc-kebab { color: #333; }

/* Document preview overlay (Tasks) */
.kanban-doc-preview-modal { display: block; position: fixed; z-index: 1060; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
.kanban-doc-preview-modal-content { background-color: #fefefe; margin: 3% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 960px; position: relative; }
.kanban-doc-preview-modal .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; text-decoration: none; }
.kanban-doc-preview-modal .close:hover,
.kanban-doc-preview-modal .close:focus { color: #000; text-decoration: none; }
.kanban-media-iframe { border: 0; }
.kanban-media-fluid { width: 100%; height: auto; }

/* Tasks dashboard board: no lavender panel behind columns; flat metadata (no blue pills) */
#tasks-dashboard-scope .table-card-body > .white-bg.table-card-white-bg-flush {
    background: transparent !important;
}

#tasks-dashboard-scope .task-board-scroll,
#tasks-dashboard-scope .kanban-board-columns .task-stage-container {
    background: transparent !important;
}

#tasks-dashboard-scope .todo-item.task-card-v2::before {
    display: none;
}

#tasks-dashboard-scope .task-card-v2 .task-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-top: 4px;
}

#tasks-dashboard-scope .task-card-v2 .task-panel-row {
    padding: 0 !important;
    margin-bottom: 8px !important;
}

#tasks-dashboard-scope .task-card-v2 .task-panel-row + .task-panel-row {
    border-top: none !important;
}

#tasks-dashboard-scope .task-card-v2 .task-panel-row:last-child {
    margin-bottom: 0 !important;
}

#tasks-dashboard-scope .task-card-v2 .task-panel-label {
    color: var(--section, rgba(28, 36, 48, .55)) !important;
}

#tasks-dashboard-scope .task-card-v2 .task-panel-value {
    color: var(--text, #1C2430) !important;
}

#tasks-dashboard-scope .todo-container.draggable {
    cursor: default;
}

#tasks-dashboard-scope .task-card-v2 .task-card-drag-handle {
    cursor: grab;
    user-select: none;
}

#tasks-dashboard-scope .task-card-v2 .task-card-drag-handle:active,
#tasks-dashboard-scope .todo-container.draggable.dragging .task-card-drag-handle {
    cursor: grabbing;
}

#tasks-dashboard-scope .task-card-v2 .task-card-body {
    cursor: pointer;
    min-height: 8px;
}

#tasks-dashboard-scope .task-card-v2 .task-created-meta,
.task-card-v2 .task-created-meta,
.task-created-meta,
.task-created-meta--list {
    font-size: 10px !important;
    line-height: 1.2;
    font-weight: 400;
    color: rgba(28, 36, 48, 0.65);
}

#tasks-dashboard-scope .task-card-v2 .task-created-meta,
.task-card-v2 .task-created-meta {
    margin-top: 2px;
    margin-bottom: -8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3em;
    cursor: help;
}

.task-created-meta__tip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.task-created-meta__icon {
    display: block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.task-created-meta {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.task-created-meta--list {
    margin-top: 2px;
}

.task-created-meta--popup {
    margin: 6px 0 0;
    padding-top: 4px;
    border-top: 1px solid rgba(15, 39, 66, 0.08);
    font-size: 12px !important;
    line-height: 1.35;
    font-weight: 400;
    color: rgba(28, 36, 48, 0.68);
    display: flex;
    align-items: center;
    gap: 0.3em;
    width: 100%;
}