/*анимация заднего фона*/
body {
    position: relative;
    overflow-x: hidden;
}
#footer {
    position: relative;
    z-index: 2;
}

/* затемнение */

body.main-background::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(4,12,25,.45);
    z-index:0;

}

/* canvas */

#bg-particles {
    position:fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    z-index:1;
    pointer-events:none;
}
#main {
    position:relative;
    z-index: 1030;
}
/*end*/
#main > .container {
    padding-top: 20px;
    padding-bottom: 20px;
}
.main-background {
    background: url('/images/banner-crm3.jpg') center center;
    margin: 0;
    min-height: 100vh;
    background-attachment: fixed;
    position:relative;
    background-repeat: no-repeat;
    background-size: cover;
    /* overflow:hidden; */
}
[data-bs-theme="light"] #main > .container {
    background-color: #FFF;
    border-radius: 8px;
}
[data-bs-theme="dark"] #main > .container {
    background-color: #212529;
    border-radius: 8px;
}
[data-bs-theme="dark"] h1 {
    color: #FFF !important;
}
.mt-custom {
    margin-top: calc(60px + 20px);
}
/* Базовые стили для селекта статусов */
.task-status-select {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Цвета для разных статусов (применяются к самому select) */
.status-new {
    background-color: #f8f9fa;
    color: #212529;
}
.status-in_progress {
    background-color: #fff3cd;
    color: #856404;
}
.status-blocked {
    background-color: #f8d7da;
    color: #721c24;
}
.status-done {
    background-color: #d4edda;
    color: #155724;
}
select.task-status-select option[value="new"] {
    background-color: #f8f9fa;
    color: #212529;
}
select.task-status-select option[value="in_progress"] {
    background-color: #fff3cd;
    color: #856404;
}
select.task-status-select option[value="blocked"] {
    background-color: #f8d7da;
    color: #721c24;
}
select.task-status-select option[value="done"] {
    background-color: #d4edda;
    color: #155724;
}
.lead-card{
    transition:.2s;
    cursor:pointer;
}

.lead-card:hover{
    transform:translateY(-2px);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.12)!important;
}

.lead-card h5{
    font-size:16px;
    margin-bottom:4px;
}

.badge{
    font-size:13px;
}

.lead-card{
    transition:.2s;
    border-radius:14px;
}

.lead-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.15)!important;
}

.lead-card .card-header{
    border-bottom:1px solid rgba(0,0,0,.05);
}

.lead-card .card-footer{
    border-top:1px solid rgba(0,0,0,.05);
}

.lead-card a{
    text-decoration:none;
}

.kanban {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    align-items: flex-start;
    padding-bottom: 60px;
}

.kanban-column-wrapper {
    max-width: 320px;
    width: 100%;
    flex-shrink: 0;
}

.kanban-column{
    min-height:650px;
    /* background:#f4f6f9; */
    border-radius:12px;
    padding:12px;
}

.kanban-column::-webkit-scrollbar{

    width:6px;

}

.kanban-column::-webkit-scrollbar-thumb{

    background:#ccc;

    border-radius:10px;

}

.lead-card{

    cursor:grab;

    border-radius:12px;

    transition:.15s;

}

.lead-card:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.sortable-ghost{
    opacity:.4;
}

.sortable-chosen{
    transform:rotate(2deg);
}
[data-bs-theme="dark"] .lead-sidebar {
    background: #212529;
}
[data-bs-theme="dark"] .lead-sidebar-header h4,
 [data-bs-theme="dark"] .lead-sidebar-header small {
    color: #FFF;
}

.lead-sidebar{
    position:fixed;
    top:0;
    right:-650px;
    max-width: calc(100% / 4);
    width: 100%;
    height:100%;
    background:#fff;
    box-shadow:-10px 0 30px rgba(0,0,0,.2);
    transition:.3s;
    z-index:9;
    overflow:auto;
}

.lead-sidebar.open{
    right:0;
}

.lead-sidebar-content{
    padding:25px;
    /* color: #000; */
}
/*coments*/
.comments-chat{
    max-height:500px;
    overflow-y:auto;
    padding:10px;
    /* background:#f8f9fa; */
    border-radius:12px;
}
[data-bs-theme="light"] .comment-item {
    border: 1px solid #dee2e6;
}
.comment-item{
    /* background:#fff; */
    border-radius:12px;
    padding:12px;
    margin-bottom:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    /* color: #000; */
    border: 1px solid #495057;
}

.comment-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
    /* color: #000; */
}
.comment-date{
    color:#888;
    font-size:12px;
}
.comment-body{
    white-space:pre-wrap;
}
/*end*/
[data-bs-theme="light"] .d-grid > .btn.login-btn.btn-lg.rounded-3.text-white {
    border: 1px solid #dee2e6;
    color: #000 !important;
}
.logo_form {
    display: flex;
    max-width: 350px;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.logo_item {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.logo_item > img {
    width: 100%;
    object-fit: contain;
    max-height: 200px;
    height: 100%;
}

@media screen and (max-width:768px) {
    .lead-sidebar{
        max-width: 100%;
        height: 100%;
        object-fit: contain;
    }
}