body:not(.seb) .seb_only {
    display: none;
}

body:not(.stock) .stock_only {
    display: none;
}

body:not(.archive) .archive_only {
    display: none;
}

.seb .seb_hide {
    display: none;
}

.stock .stock_hide {
    display: none;
}

.archive .archive_hide {
    display: none;
}

/* region MENU*/
.board_action {
    position: sticky;
    top: 115px;
    padding: 10px 5px;
    margin: 0 -5px;
    backdrop-filter: blur(1px);
    z-index: 2;
}

.btn-action {
    width: 100%;
}

.btn-action span {
    margin: auto auto;
}

/* endregion MENU*/

/* region BOARD*/
.board_head,
.board_body {
    display: grid;
    grid-template-columns: repeat(3, minmax(var(--card-min-width), 1fr));
}

.board-2 .board_head,
.board-2 .board_body {
    grid-template-columns: repeat(2, minmax(var(--card-min-width), 1fr));
}

.board-3 .board_head,
.board-3 .board_body {
    grid-template-columns: repeat(3, minmax(var(--card-min-width), 1fr));
}

.board-4 .board_head,
.board-4 .board_body {
    grid-template-columns: repeat(4, minmax(var(--card-min-width), 1fr));
}

.board_head {
    position: sticky;
    margin-top: calc((var(--header-height) + 10px) * -1);
    background-color: var(--app-bg-color);
    gap: 15px 25px;
    top: 0;
    padding: calc(var(--header-height) + 10px) 15px 0;
    z-index: var(--z-index-board-head);
}

.board_search {
    padding-bottom: 10px;
}

.board_search input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
    background-position: 10px center;
    background-repeat: no-repeat;
    padding-left: 35px;
    transition: 250ms;
}

.board_search input:focus {
    background-position-x: -30px;
    padding-left: 10px;
}

.board_body {
    padding: 0 15px;
    gap: 25px;
}

.board_list {
    border-radius: 10px;
    background-color: var(--board-list-color);
    padding-bottom: 30px;
    height: 100%;
}

.board_list-name {
    border-radius: 5px;
    position: relative;
    font-weight: 600;
    padding: 5px 35px 10px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    margin: 0 -20px;
    white-space: nowrap;
    height: 40px;
    min-width: var(--card-min-width);
    color: white;
}

.board_list-name:nth-child(1) {
    margin-left: -5px;
    padding-left: 20px;
    background-color: var(--color-blue);
    z-index: 4;
}

.board_list-name:nth-child(2) {
    background-color: var(--color-blue-dark);
    z-index: 3;
}

.board_list-name:nth-child(3) {
    background-color: var(--color-blue-darker);
    z-index: 2;
}

.board_list-name:nth-child(4) {
    background-color: var(--color-blue-darkest);
    z-index: 1;
}

.board_list-name:last-child {
    clip-path: none;
    margin-right: -5px;
}

.board_list-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0 0;
    counter-reset: queue;
}

.board_list-label {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    padding-top: 20px;
    margin-bottom: -15px;
    color: white;
    text-shadow: 0 0 5px #333;
}

@media (max-width: 767px) {
    .board_head, .board_body {
        padding-left: 0;
        padding-right: 0;
    }
}

/* endregion BOARD*/

/* region CARD*/

.board_card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(100px, 15%);
    gap: 10px;
    border-radius: 4px;
    padding: 20px 10px;
    box-shadow: var(--card-shadow);
    background-color: var(--board-card-color);

    font-size: 14px;
    line-height: 16px;
    border-left: 5px solid white;

    text-shadow: #fff;

    cursor: pointer;

    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;

}

.archive .board_card {
    grid-template-columns: 1fr minmax(120px, 20%);
}

.board_card *::-moz-selection,
.board_card *::selection {
    background: transparent;
    color: inherit;
}

.board_card-line {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.board_card-queue {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    text-align: center;
    font-weight: 700;
    padding: 5px 0;
}

.board_card-queue::before {
    counter-increment: queue;
    content: counter(queue);
}

.stock [data-list="2"] .board_card-queue {
    display: block;
}

.board_card-name {
    /*flex: 1 1 auto;*/
    text-align: center;
    font-weight: 600;
    margin-bottom: 15px;
}

.board_card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.board_card-history {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.board_card-history > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.board_card-history .plan {
    color: #bba03e
}

.board_card-status i {
    text-align: center;
    display: inline-block;
    width: 30px;
    font-size: 18px;
}

.seb .registered, /* "Зареєстровано" */
.seb .data_late, /* "Перевищено час присвоєння замовлення" */
.seb .data_filled, /* Заповнені дані" */
.seb .pass, /* "Заїзд" */
.seb .inside, /* "В очікуванні на території" */
.seb .receive, /* "У роботі, прийом товару" */
.seb .over, /* "Відпрацьовано авто в межах норми" */
.seb .completed /* "Виїзд авто" */
{
}

.stock .registered, /* "Зареєстровано" */
.stock .registered_denied, /* "Зареєстровано, відкликан" */
.stock .data_filled, /* Заповнені дані" */
.stock .pass, /* "Заїзд" */
.stock .pass_allowSEB, /* "Дозволено заїзд СЕБ" */
.stock .inside, /* "В очікуванні на території" */
.stock .out, /* "Завершено прийом авто, до виїзд" */
.stock .completed /* "Виїзд авто" */
{
}

/*stripe grey*/
.stock .registered_missing, /* "Зареєстровано, відсутній" */
.stock .data_filled_missing, /* "Заповнені дані, відсутній" */
.seb .registered_missing, /* "Зареєстровано, відсутній" */
.seb .data_filled_missing /* "Заповнені дані, відсутній" */
{
    border-left: 5px solid grey;
    border-right: 5px solid grey;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #EEE 10px, #EEE 20px);
}

/*border red */
.archive .violation,
.stock .data_late, /* "Перевищено час присвоєння замовлення" */
.stock .pass_allowStock_late, /* "Заповнені дані, перевищено час дозволу заїзду СКЛАД" */
.stock .over_late /* "Відпрацьовано авто, перевищено норму" */
{
    border-left: 5px solid red;
    border-right: 5px solid red;
}

/*stripe red*/
.seb .registered_denied, /* "Зареєстровано, відкликан" */
.stock .pass_late, /* "Заповнені дані, превищено час планового заїзду" */
.stock .out_late /* "Перевищено час виїзду авто" */
{
    border-left: 5px solid red;
    border-right: 5px solid red;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #FEE 10px, #FEE 20px);
}

/*full red*/
.stock .inside_late, /* "В очікуванні на території, перевищено ліміт часу" */
.stock .pass_allowSeb_late, /* "Заповнені дані, перевищено час дозволу заїзду СЕБ" */
.seb .pass_allowStock_late, /* "Заповнені дані, перевищено час дозволу заїзду СКЛАД" */
.seb .pass_allowSeb_late, /* "Заповнені дані, перевищено час дозволу заїзду СЕБ" */


    /*.seb .over_late, /* "Відпрацьовано авто, перевищено норму" */
.seb .pass_late, /* "Заповнені дані, превищено час планового заїзду" */
.seb .inside_late, /* "В очікуванні на території, перевищено ліміт часу" */
.seb .receive_late, /* "Перевищено час прийому товару" */
.seb .returns_late, /* "Перевищено час повернення товару" */
.seb .out_late, /* "Перевищено час виїзду авто" */
.stock .data_late, /* "Перевищено час присвоєння замовлення" */
.stock .receive_late, /* "Перевищено час прийому товару" */
.stock .returns_late, /* "Перевищено час повернення товару" */
.stock .receive_return_late /* Перевищено час повернення товару після прийому */
{
    border-left: 5px solid red;
    border-right: 5px solid red;
    background-image: repeating-linear-gradient(-45deg, #FCC, #FCC);
}

/*border green*/
.archive .good,
.stock .over /* "Відпрацьовано авто в межах норми" */
{
    border-left: 5px solid green;
    border-right: 5px solid green;
}

/*full green*/
.archive .out,
.seb .pass_allowSEB, /* "Дозволено заїзд СЕБ" */
.stock .pass_allowStock, /* "Дозволено заїзд Склад" */
.stock .receive, /* "У роботі, прийом товару" */
.stock .returns, /* "У роботі, возврат товару" */
.stock .receive_return /* "У роботі, возврат після прийому" */
{
    border-left: 5px solid green;
    border-right: 5px solid green;
    background-image: repeating-linear-gradient(-45deg, #CFC, #CFC);
}

/*full yellow*/
.seb .pass_allowStock, /* "Дозволено заїзд Склад" */
.seb .out /* "Завершено прийом авто, до виїзд" */
{
    border-left: 5px solid #FC0;
    border-right: 5px solid #FC0;
    background-image: repeating-linear-gradient(-45deg, #FC0, #FC0);
}

/* endregion CARD*/

/*region DND*/
.board_slot {
    position: relative;
    display: flex;
    width: 100%;
    border-radius: 8px;
    transition: height 300ms;
    animation: slot_appear 100ms;
    margin: -10px 0;
    background-color: #fff1;
    height: 0;
    z-index: 1000;
}

.board_slot::before {
    content: "";
    display: block;
    position: absolute;
    inset: -50px 0;
}

.board_slot:hover {
    height: 150px;
    background-color: #fff3;
}

.board_filler {
    transition: 300ms height 300ms;
    margin: -10px 0;
}

[dnd] .dnd-hidden {
    display: none;
}

[dnd] .dnd-only {
    display: flex;
}

.dnd-hidden {
    display: inherit;
}

.dnd-only {
    display: none;
}

/*endregion DND*/