/* Kanban Board Container */
#kanban-board {
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow-x: auto;
    white-space: nowrap;
    max-height: calc(100vh - 200px);
}

/* Kanban Column Styling */
.kanban-column {
    flex: 1;
    min-width: 300px; /* Minimum width for columns */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-right: 10px;
    display: inline-block; /* Keeps columns inline */
    vertical-align: top;
    overflow-y: auto;
}

/* Kanban Column Header */
.kanban-column h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Darker text color for headers */
    padding-bottom: 10px;
    border-bottom: 2px solid #e1e4e8; /* Subtle border under header */
    margin: 0 0 10px 0;
}

/* Empty Column Message */
.kanban-column p {
    color: #999; /* Lighter text color for empty column message */
    font-style: italic;
}

/* Kanban Card Styling */
.kanban-card {
    background-color: #f9fafb; /* Slightly off-white for card background */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover effect */
    cursor: grab; /* Indicate draggable items */
}

.kanban-card.visibility-1 {
    opacity: 1;
}
.kanban-card.visibility-2 {
    opacity: 0.6;
}
.kanban-card.visibility-3 {
    opacity: 0.4;
}
.kanban-card.visibility-4 {
    opacity: 0.2;
}

.kanban-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* Card Link */
.kanban-card a {
    font-weight: bold;
    color: #007bff; /* Blue color for links */
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

.kanban-card a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Card Description */
.kanban-card span {
    display: block;
    color: #555; /* Darker color for text */
    margin-bottom: 10px;
    font-size: 14px;
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Target Version */
.kanban-card p {
    font-size: 12px;
    color: #777; /* Gray color for less important text */
    margin: 0;
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-card .bug-id {
    float: left;
}

.kanban-card .bug-handler, .kanban-card .bug-category {
    float: right;
    background-color: #d5d5d5;
    padding: 5px;
    font-size: 9px;
    margin-bottom: 10px;
    margin-left: 5px;
}

.kanban-card .bug-handler {
    border-radius: 50%;
}

.kanban-card .bug-category {
    border-radius: 10px;
}

/* Status Colors for Column Headers */
.kanban-column[data-status='new'] h2 {
    border-color: #ff6f61; /* Custom color for 'new' status */
}

.kanban-column[data-status='feedback'] h2 {
    border-color: #ffb74d; /* Custom color for 'feedback' status */
}

.kanban-column[data-status='acknowledged'] h2 {
    border-color: #64b5f6; /* Custom color for 'acknowledged' status */
}

.kanban-column[data-status='confirmed'] h2 {
    border-color: #81c784; /* Custom color for 'confirmed' status */
}

.kanban-column[data-status='assigned'] h2 {
    border-color: #4db6ac; /* Custom color for 'assigned' status */
}

.kanban-column[data-status='resolved'] h2 {
    border-color: #9575cd; /* Custom color for 'resolved' status */
}

.kanban-column[data-status='closed'] h2 {
    border-color: #f06292; /* Custom color for 'closed' status */
}


/* Filtering part of the board*/

#kanban-filter-board {
    padding: 5px;
}

/* Version */

#version-filter .version-selection {
    padding: 5px 15px;
    background: #f5f5f5;
    margin: 0px 5px 5px 0px;
    border-radius: 10px;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
    font-size: 10px;
    color: #333;
}

#version-filter .version-selection:hover  {
    background: #a0a0a0;
    color: white;
}

#version-filter .version-selection.active  {
    background: #909090;
    color: white;
}

/* Users */

#user-filter .user-selection {
    padding: 5px 15px;
    background: #f5f5f5;
    margin: 0px 5px 5px 0px;
    border-radius: 10px;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
    font-size: 10px;
    color: #333;
}

#user-filter .user-selection:hover  {
    background: #a0a0a0;
    color: white;
}

#user-filter .user-selection.active  {
    background: #909090;
    color: white;
}

.debug {
    background: rgb(226, 195, 195);
    color:red;
}