﻿/* 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-column-title {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(180deg, #E2E6F0 0%, #C7D0E2 55%, #B6C1D8 100%);
    border-radius: 10px;
    padding: 10px 14px;
    min-height: 44px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #2f4a5e;
    border: 1px solid rgba(15,39,66,.22);
    box-shadow: 0 10px 10px rgba(24,32,51,.16), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(15,39,66,.06);
}

.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;
    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 {
    min-height: 36px !important;
    width: 36px !important;
    min-width: 36px !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;
    color: rgba(21, 74, 126, 0.45) !important;
}

.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-label {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        background: var(--KanbanHeaderBackground);
        border-radius: var(--stageHdrRadius);
        padding: 10px 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
        border: 1px solid var(--stageHdrBorderOuter);
        box-shadow: 0 10px 10px rgba(24,32,51,.16), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(15,39,66,.06);
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--KanbanHeaderText) !important;
        margin: 0;
    }

        .todo-label::before {
            content: "";
            position: absolute;
            inset: 1px;
            border-radius: calc(var(--stageHdrRadius) - 1px);
            border: 1px solid var(--stageHdrHighlight);
            pointer-events: none;
        }

        .todo-label::after {
            content: "";
            position: absolute;
            inset: 2px;
            border-radius: calc(var(--stageHdrRadius) - 2px);
            border: 1px solid var(--stageHdrBorderInner);
            pointer-events: none;
        }

    .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;
    }

    .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);
}

/* 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: 150px;
        max-width: 150px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table tr.roundheader th.kanban-th-created,
    #pipeline-kanban-data-table.task-list-table tbody td:nth-child(3) {
        width: 150px;
        max-width: 150px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table tr.roundheader th.kanban-th-due,
    #pipeline-kanban-data-table.task-list-table tbody td:nth-child(4) {
        width: 150px;
        max-width: 150px;
        white-space: nowrap;
    }

    #pipeline-kanban-data-table.task-list-table tr.roundheader th.kanban-th-assigned,
    #pipeline-kanban-data-table.task-list-table tbody td:nth-child(5) {
        width: 200px;
        max-width: 200px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #pipeline-kanban-data-table.task-list-table tr.roundheader th.kanban-th-actions,
    #pipeline-kanban-data-table.task-list-table tbody td:nth-child(6) {
        width: 52px;
        max-width: 52px;
        white-space: nowrap;
        text-align: center;
    }

#popupbackground.popup-background { display: none; }

/* Task edit / campaign popup helpers */
.kanban-link-add { color: #2d6cdf; }
.kanban-assignee-box-spaced { margin-top: 18px; }
input[type="date"].kanban-input-date-narrow { width: 150px; max-width: 100%; }
.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; }

