/* =========================================================
   СТАТУС КЛИЕНТА
   ========================================================= */

.standard-table-client-status {

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.4;

    color: #374151;

}

/* =========================================================
   КВАДРАТНЫЕ ОБЪЕКТЫ
   ========================================================= */

.status-square-sky,
.status-square-blue,
.status-square-navy,
.status-square-graphite {

    display: inline-block;

    width: 12px;

    height: 12px;

    margin-right: 8px;

    border-radius: 4px;

    vertical-align: -1px;

    transition:
        transform .25s ease;

}


/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */

.status-square-sky:hover,
.status-square-blue:hover,
.status-square-navy:hover,
.status-square-graphite:hover {

    transform: scale(1.08);

}


/* =========================================================
   СВЕТЛО-ГОЛУБОЙ
   ========================================================= */

.status-square-sky {

    background: radial-gradient(
        circle at 18% 28%,
        #E0F2FE 0%,
        #7DD3FC 22%,
        #38BDF8 58%,
        #0284C7 100%
    );

}


/* =========================================================
   СИНИЙ
   ========================================================= */

.status-square-blue {

    background: radial-gradient(
        circle at 28% 28%,
        #DBEAFE 0%,
        #60A5FA 18%,
        #2563EB 58%,
        #1E3A8A 100%
    );

}


/* =========================================================
   ТЕМНО-СИНИЙ
   ========================================================= */

.status-square-navy {

    background: radial-gradient(
        circle at 28% 28%,
        #A5B4FC 0%,
        #4F7DFF 18%,
        #1E40AF 56%,
        #172554 100%
    );

}


/* =========================================================
   ГРАФИТОВЫЙ
   ========================================================= */

.status-square-graphite {

    background: radial-gradient(
        circle at 28% 28%,
        #F9FAFB 0%,
        #D1D5DB 18%,
        #6B7280 56%,
        #374151 100%
    );

}


/* =========================================================
   КНОПКИ CLIENT STATUS
   ========================================================= */

/* =========================================================
   ОБЩАЯ КНОПКА
   ========================================================= */

.client-status-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 8px 15px;

    border-radius: 8px;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    text-decoration: none;

    cursor: pointer;

    width: 210px;

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

}

/* =========================================================
   РАССТОЯНИЕ МЕЖДУ  КНОПКАМИ CLIENT STATUS
   ========================================================= */

.client-status-buttons {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

}

/* =========================================================
   СИНЯЯ КНОПКА
   ========================================================= */

.client-status-button-blue {

    background: var(--blue);

    color: #FFFFFF;

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

    box-shadow:
        0 1px 3px rgba(30, 64, 175, .15);

}


/* =========================================================
   СИНЯЯ КНОПКА — HOVER
   ========================================================= */

.client-status-button-blue:hover {

    background: var(--blue-dark);

    border-color: var(--blue-dark);

    box-shadow:
        0 4px 10px rgba(30, 64, 175, .20);

    transform: translateY(-1px);

}


/* =========================================================
   СИНЯЯ КНОПКА — ACTIVE
   ========================================================= */

.client-status-button-blue:active {

    transform: translateY(0);

}


/* =========================================================
   СИНЯЯ КНОПКА — FOCUS
   ========================================================= */

.client-status-button-blue:focus-visible {

    outline: 2px solid var(--blue);

    outline-offset: 2px;

}



/* =========================================================
   ТЕМНО-СЕРАЯ КНОПКА
   ========================================================= */

.client-status-button-gray {

    background: #6B7280;

    color: #FFFFFF;

    border: 1px solid #6B7280;

    box-shadow:
        0 1px 3px rgba(17, 24, 39, .12);

}


/* =========================================================
   ТЕМНО-СЕРАЯ КНОПКА — HOVER
   ========================================================= */

.client-status-button-gray:hover {

    background: #4B5563;

    border-color: #4B5563;

    color: #FFFFFF;

    box-shadow:
        0 4px 10px rgba(17, 24, 39, .18);

    transform: translateY(-1px);

}


/* =========================================================
   ТЕМНО-СЕРАЯ КНОПКА — ACTIVE
   ========================================================= */

.client-status-button-gray:active {

    transform: translateY(0);

}


/* =========================================================
   ТЕМНО-СЕРАЯ КНОПКА — FOCUS
   ========================================================= */

.client-status-button-gray:focus-visible {

    outline: 2px solid #6B7280;

    outline-offset: 2px;

}

/* =========================================================
   LOT_DETAIL ДОПОЛНИТЕЛЬНАЯ СТРУКТУРА
   ========================================================= */

/* =========================================================
   ТЕКСТОВАЯ ЧАСТЬ СТАТУСА КЛИЕНТА
   ========================================================= */

.client-status-text {

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.5;

}

/* =========================================================
   ДОПОЛНИТЕЛЬНЫЕ ЦВЕТА MESSAGE
   ========================================================= */

.additionally-status-sky {

    color: #4B5563;

}

.additionally-status-blue {

    color: #4B5563;

}

.additionally-status-navy {

    color: #4B5563;

}

.additionally-status-graphite {

    color: #4B5563;

}

#client-action {
    display: flex;
    justify-content: center;
}


#client_status {
    display: block;
    text-align: center;
}