/* Groups UI Styles - Clean & Professional */

/* Container Setup */
#groups-view-container {
    height: calc(100vh - 200px);
    /* Adjust based on header/nav */
    min-height: 600px;
}

/* Sidebar Styling */
#groups-sidebar {
    background-color: #f9fafb;
    /* Gray-50 */
}

.group-list-item {
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.group-list-item:hover {
    background-color: #f3f4f6;
    /* Gray-100 */
}

.group-list-item.active {
    background-color: #eef2ff;
    /* Indigo-50 */
    border-left-color: #4f46e5;
    /* Indigo-600 */
}

.group-list-item .group-name {
    color: #1f2937;
    /* Gray-800 */
}

.group-list-item.active .group-name {
    color: #4338ca;
    /* Indigo-700 */
    font-weight: 700;
}

/* Scrollbar for lists */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 20px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

/* Member Balances List */
.member-balance-item:last-child {
    border-bottom: none;
}

/* Modal Animations (if not using standard library or Tailwind classes for it) */
.fixed.inset-0 {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Transaction Card Hover */
#group-transactions-list>div:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Settlement Animation */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-2px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(2px);
    }
}

.shake-animation {
    animation: shake 0.5s;
}

/* Responsive adjustments are now handled by JS for a true app-like feel */
/* We rely on the flex 'hidden/flex' toggling instead of CSS column stacking */