/* ============================================================
   EASY WAY OPERATION SYSTEM
   PHASE 3 — KANBAN WORKFLOW
   FIXED HORIZONTAL BOARD
   ============================================================ */


/* ============================================================
   WORKFLOW PAGE
   ============================================================ */

.workflow-page {

    width:
        min(
            calc(100% - 30px),
            1600px
        );

    max-width:
        1600px;

    padding-bottom:
        65px;
}


/* ============================================================
   HEADER
   ============================================================ */

.workflow-heading-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


/* ============================================================
   FILTERS
   ============================================================ */

.workflow-filters {

    display:
        grid;

    grid-template-columns:
        minmax(260px, 1fr)
        180px
        190px
        auto
        auto;

    gap:
        9px;

    margin-bottom:
        18px;
}


.workflow-search input,
.workflow-filter-select {

    width:
        100%;

    min-height:
        44px;

    padding:
        0 13px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        9px;

    color:
        var(--text);

    outline:
        none;

    font-size:
        11px;
}


.workflow-search input:focus,
.workflow-filter-select:focus {

    border-color:
        var(--border-light);
}


.workflow-filter-button,
.workflow-clear-button {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 16px;

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        900;

    text-decoration:
        none;
}


.workflow-filter-button {

    border:
        1px solid var(--white);

    background:
        var(--white);

    color:
        var(--background);

    cursor:
        pointer;
}


.workflow-clear-button {

    border:
        1px solid var(--border);

    background:
        transparent;

    color:
        var(--muted);
}


/* ============================================================
   IMPORTANT:
   HORIZONTAL SCROLL CONTAINER
   ============================================================ */

.kanban-scroll-container {

    width:
        100%;

    max-width:
        100%;

    box-sizing:
        border-box;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    padding-bottom:
        14px;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        auto;

    overscroll-behavior-x:
        contain;
}


/* ============================================================
   DESKTOP SCROLLBAR
   ============================================================ */

.kanban-scroll-container::-webkit-scrollbar {

    height:
        12px;
}


.kanban-scroll-container::-webkit-scrollbar-track {

    background:
        #101010;

    border:
        1px solid var(--border);

    border-radius:
        10px;
}


.kanban-scroll-container::-webkit-scrollbar-thumb {

    background:
        #3a3a3a;

    border:
        2px solid #101010;

    border-radius:
        10px;
}


.kanban-scroll-container::-webkit-scrollbar-thumb:hover {

    background:
        #555;
}


/* ============================================================
   KANBAN BOARD
   ============================================================ */

.kanban-board {

    display:
        grid;

    /* Fit all workflow columns inside the desktop viewport. */
    grid-template-columns:
        repeat(
            8,
            minmax(
                0,
                1fr
            )
        );

    gap:
        8px;

    width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


/* ============================================================
   COLUMN
   ============================================================ */

.kanban-column {

    width:
        auto;

    min-width:
        0;

    min-height:
        600px;

    box-sizing:
        border-box;

    position:
        relative;

    z-index:
        1;

    background:
        rgba(
            17,
            17,
            17,
            0.78
        );

    border:
        1px solid var(--border);

    border-radius:
        15px;

    overflow:
        hidden;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

/* Expand only the hovered column visually; the board itself keeps its width. */
.kanban-column:hover {

    transform:
        scaleX(1.12);

    z-index:
        20;

    border-color:
        #777;

    background:
        #151515;

    overflow:
        visible;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, .42);
}

.kanban-column:hover .kanban-column-header h2,
.kanban-column:hover .kanban-card-title,
.kanban-column:hover .kanban-card-client span,
.kanban-column:hover .kanban-card-assignee > span:last-child {

    overflow:
        visible;

    text-overflow:
        clip;

    white-space:
        normal;
}


.kanban-column.drag-over {

    border-color:
        #777;

    background:
        #151515;
}


.kanban-column-header {

    min-height:
        58px;

    padding:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid var(--border);

    background:
        #101010;
}


.kanban-column-header > div {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.kanban-column-header h2 {

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        800;
}


.kanban-count {

    min-width:
        24px;

    height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--border);

    border-radius:
        7px;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        900;
}


/* ============================================================
   STATUS INDICATORS
   ============================================================ */

.kanban-status-indicator {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #888;
}


.indicator-new {
    background:
        #555;
}


.indicator-assigned {
    background:
        #777;
}


.indicator-in_progress {
    background:
        #aaa;
}


.indicator-waiting {
    background:
        #666;
}


.indicator-review {
    background:
        #999;
}


.indicator-completed {
    background:
        #ddd;
}


.indicator-delivered {
    background:
        #fff;
}


.indicator-archived {
    background:
        #444;
}


/* ============================================================
   DROP ZONE
   ============================================================ */

.kanban-drop-zone {

    min-height:
        540px;

    padding:
        10px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.kanban-empty {

    display:
        none;

    min-height:
        70px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px dashed #303030;

    border-radius:
        10px;

    color:
        #4a4a4a;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.kanban-drop-zone.drag-target
.kanban-empty {

    display:
        flex;
}


/* ============================================================
   CARD
   ============================================================ */

.kanban-card {

    position:
        relative;

    padding:
        14px;

    background:
        #151515;

    border:
        1px solid #292929;

    border-radius:
        12px;

    cursor:
        grab;

    user-select:
        none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.kanban-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #444;

    box-shadow:
        0 12px 30px rgba(
            0,
            0,
            0,
            .22
        );
}


.kanban-card.dragging {

    opacity:
        .45;

    transform:
        rotate(1deg);

    cursor:
        grabbing;
}


.kanban-card-archived {

    opacity:
        .65;
}


/* ============================================================
   CARD TOP
   ============================================================ */

.kanban-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        11px;
}


.kanban-card-code {

    color:
        #696969;

    font-family:
        monospace;

    font-size:
        9px;

    font-weight:
        800;
}


.kanban-card-priority {

    padding:
        4px 6px;

    border:
        1px solid #2d2d2d;

    border-radius:
        5px;

    color:
        #888;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.kanban-card-priority.priority-urgent {

    color:
        #fff;

    border-color:
        #666;
}


.kanban-card-priority.priority-high {

    color:
        #ccc;
}


.kanban-card-priority.priority-medium {

    color:
        #999;
}


.kanban-card-priority.priority-low {

    color:
        #666;
}


/* ============================================================
   CARD TITLE
   ============================================================ */

.kanban-card-title {

    display:
        block;

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.45;
}


.kanban-card-title:hover {

    text-decoration:
        underline;

    text-decoration-color:
        #555;
}


/* ============================================================
   CLIENT
   ============================================================ */

.kanban-card-client {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    margin-top:
        10px;
}


.kanban-card-client span {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #606060;

    font-size:
        9px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.kanban-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        14px;

    padding-top:
        12px;

    border-top:
        1px solid #242424;
}


.kanban-card-assignee {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.kanban-card-assignee > span:last-child {

    max-width:
        105px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #7d7d7d;

    font-size:
        8px;

    font-weight:
        700;
}


.kanban-card-assignee.unassigned
> span:last-child {

    color:
        #555;
}


.kanban-avatar {

    width:
        25px;

    height:
        25px;

    flex:
        0 0 25px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid #303030;

    border-radius:
        7px;

    background:
        #202020;

    color:
        #aaa;

    font-size:
        8px;

    font-weight:
        900;
}


.kanban-card-deadline {

    flex-shrink:
        0;

    color:
        #686868;

    font-size:
        8px;

    white-space:
        nowrap;
}


.deadline-icon {

    margin-right:
        3px;

    color:
        #888;
}


/* ============================================================
   CARD ACTION
   ============================================================ */

.kanban-card-action {

    margin-top:
        11px;

    opacity:
        0;

    max-height:
        0;

    overflow:
        hidden;

    transition:
        opacity .2s ease,
        max-height .2s ease;
}


.kanban-card:hover
.kanban-card-action {

    opacity:
        1;

    max-height:
        30px;
}


.kanban-card-action a {

    color:
        #888;

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.kanban-card-action a:hover {

    color:
        #fff;
}


/* ============================================================
   HORIZONTAL SCROLL HINT
   ============================================================ */

.workflow-scroll-hint {

    min-height:
        42px;

    margin-top:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        rgba(
            17,
            17,
            17,
            .65
        );

    color:
        #626262;

    font-size:
        9px;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.workflow-scroll-arrow {

    color:
        #999;

    font-size:
        13px;
}


/* ============================================================
   HELP
   ============================================================ */

.workflow-help {

    margin-top:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #4f4f4f;

    font-size:
        9px;

    line-height:
        1.6;
}


/* ============================================================
   NOTIFICATION
   ============================================================ */

.notification-indicator {

    min-width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #555;

    border-radius:
        50%;

    background:
        #1a1a1a;

    color:
        #fff;

    font-size:
        8px;

    font-weight:
        900;
}


/* ============================================================
   TOAST
   ============================================================ */

.kanban-toast {

    position:
        fixed;

    left:
        50%;

    bottom:
        28px;

    z-index:
        3000;

    transform:
        translate(
            -50%,
            15px
        );

    padding:
        11px 16px;

    border:
        1px solid #3a3a3a;

    border-radius:
        9px;

    background:
        #171717;

    color:
        #f5f5f5;

    box-shadow:
        0 20px 50px rgba(
            0,
            0,
            0,
            .4
        );

    font-size:
        11px;

    font-weight:
        700;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.kanban-toast.show {

    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    /* Below the compact-fit threshold, preserve readable cards and scroll. */
    .kanban-board {

        width:
            max-content;

        min-width:
            max-content;

        grid-template-columns:
            repeat(
                8,
                210px
            );
    }

    .kanban-column {

        min-width:
            210px;
    }

}


@media (max-width: 1250px) {

    .workflow-filters {

        grid-template-columns:
            minmax(220px, 1fr)
            160px
            170px
            auto
            auto;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 850px) {

    .workflow-page {

        width:
            calc(100% - 24px);

        padding-top:
            40px;
    }


    .workflow-filters {

        grid-template-columns:
            1fr;
    }


    .workflow-filter-button,
    .workflow-clear-button {

        width:
            100%;
    }


    /*
     * On mobile we intentionally stop using a horizontal
     * board and stack the columns vertically.
     */

    .kanban-scroll-container {

        overflow-x:
            visible;

        overflow-y:
            visible;

        padding-bottom:
            0;
    }


    .kanban-board {

        width:
            100%;

        min-width:
            0;

        display:
            flex;

        flex-direction:
            column;

        gap:
            12px;
    }


    .kanban-column {

        width:
            100%;

        min-width:
            0;

        min-height:
            auto;
    }


    .kanban-drop-zone {

        min-height:
            100px;
    }


    .kanban-empty {

        min-height:
            55px;
    }


    .workflow-scroll-hint {

        display:
            none;
    }


    .workflow-help {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .kanban-card-action {

        opacity:
            1;

        max-height:
            30px;
    }

}