/**

 * Grup Listesi Kartları Stilleri

 */



.group-list-card {

    height: 100px;

    max-height: 100px;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    border: 2px solid transparent;

    overflow: hidden;

}



.group-list-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

    border-color: var(--uk-primary);

}



.group-list-card .operation-header {

    position: relative;

    padding-right: 45px; /* Space for delete button */

}



.group-list-card .operation-header h4 {

    font-size: 14px;

    margin-bottom: 5px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.group-list-card .operation-icon {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: bold;

    font-size: 14px;

    margin-right: 10px;

    flex-shrink: 0;

}



.group-list-card .uk-button-danger {

    background: #f0506e;

    border: none;

    border-radius: 50%;

    width: 30px;

    height: 30px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    transition: all 0.2s ease;

}



.group-list-card .uk-button-danger:hover {

    background: #e73c5a;

    transform: scale(1.1);

}



.group-list-card ul {

    max-height: 100px;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color: #ddd transparent;

}



.group-list-card ul::-webkit-scrollbar {

    width: 4px;

}



.group-list-card ul::-webkit-scrollbar-track {

    background: transparent;

}



.group-list-card ul::-webkit-scrollbar-thumb {

    background: #ddd;

    border-radius: 2px;

}



.group-list-card ul::-webkit-scrollbar-thumb:hover {

    background: #bbb;

}



.group-list-card ul li {

    margin: 2px 0;

    font-size: 12px;

    line-height: 1.3;

}



.group-list-card .uk-button-small {

    padding: 4px 8px;

    font-size: 11px;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.group-list-card .uk-button-small:hover {

    transform: translateY(-1px);

}



/* Responsive Grid Layout */

@media (max-width: 768px) {

    .group-list-card .operation-header h4 {

        font-size: 13px;

    }

    

    .group-list-card .operation-icon {

        width: 30px;

        height: 30px;

        font-size: 12px;

    }

    

    .group-list-card .uk-button-small {

        padding: 3px 6px;

        font-size: 10px;

    }

}



/* Animasyonlar */

@keyframes groupCardSlideIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.group-list-card {

    animation: groupCardSlideIn 0.3s ease-out;

}



/* Loading State */

.group-list-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100px;

    color: #666;

    font-style: italic;

}



.group-list-empty {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100px;

    color: #999;

    text-align: center;

    border: 2px dashed #ddd;

    border-radius: 8px;

}



.group-list-empty .empty-icon {

    font-size: 48px;

    margin-bottom: 10px;

    opacity: 0.5;

}



.group-list-empty .empty-text {

    font-size: 14px;

    margin-bottom: 5px;

}



.group-list-empty .empty-subtext {

    font-size: 12px;

    color: #ccc;

}



/* Avatar Sistemi */

.group-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: bold;

    font-size: 11px;

    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    border: 2px solid white;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



/* Grup Drag & Drop Stilleri */

.group-list-card[draggable="true"] {

    cursor: move;

    position: relative;

}



.group-list-card[draggable="true"]:hover {

    transform: scale(1.02);

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    border-color: #ff9800;

}



.group-list-card.dragging {

    opacity: 0.7;

    transform: rotate(2deg) scale(0.95);

    z-index: 1000;

    box-shadow: 0 8px 25px rgba(255, 152, 0, 0.3);

}



.group-list-card.dragging .group-avatars {

    animation: groupDragPulse 1s infinite alternate;

}



@keyframes groupDragPulse {

    0% { opacity: 0.8; }

    100% { opacity: 1; }

}



.group-avatar:hover {

    transform: scale(1.1);

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    z-index: 1;

    position: relative;

}



.group-avatar.remaining-count {

    background: #666 !important;

    font-size: 10px;

    font-weight: 600;

}



.group-avatars {

    height: 36px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 2px;

}



/* Tooltip on hover */

.group-avatar[title]:hover::after {

    content: attr(title);

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(0,0,0,0.8);

    color: white;

    padding: 4px 8px;

    border-radius: 4px;

    font-size: 10px;

    white-space: nowrap;

    z-index: 10;

    margin-bottom: 4px;

}



.group-avatar[title]:hover::before {

    content: '';

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%);

    border: 4px solid transparent;

    border-top-color: rgba(0,0,0,0.8);

    z-index: 10;

}



/* Color Variables for Different Group States */

.group-card-primary { border-left: 4px solid var(--uk-primary); }

.group-card-secondary { border-left: 4px solid var(--uk-secondary); }

.group-card-success { border-left: 4px solid var(--uk-success); }

.group-card-warning { border-left: 4px solid var(--uk-warning); }

.group-card-danger { border-left: 4px solid var(--uk-danger); }

.group-card-info { border-left: 4px solid var(--uk-info); }