/* ============================================ */
/* GROUP CARDS & EXPANDED VIEW                  */
/* ============================================ */

/* Group Card (ตัวแม่) */
.group-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-card:hover {
    background: var(--bg-primary);
    border-color: var(--border-light);
}

/* Row 1: Name + Member Count + Edit Button */
.group-card .row-1 {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.group-card .name {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
}

.group-card .member-count {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 8px;
    flex-shrink: 0;
}

.group-card .btn-edit-group {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    flex-shrink: 0;
}

.group-card .btn-edit-group:hover {
    background: var(--bg-primary);
    border-color: var(--primary);
    color: var(--primary);
}

/* Row 2: Expiry Date */
.group-card .row-2 {
    margin-bottom: 14px;
}

.group-card .expiry {
    font-size: 14px;
    color: var(--text-secondary);
}

.group-card .expiry .label {
    color: var(--text-muted);
}

/* Row 3: Alert Bars */
.group-card .row-3 {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.group-card .row-3:empty {
    display: none;
}

.alert-bar {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-bar.warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.alert-bar.danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.alert-bar .count-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/* Hint Expand */
.group-card .hint-expand {
    text-align: center;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ===== Expanded Detail (ตัวลูก) ===== */
.group-detail {
    /* ★ พื้นหลังอ่อนกว่าตัวแม่ ★ */
    background: var(--bg-primary);

    /* ★ วาดขอบซ้าย-ขวา-ล่างเอง ★ */
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-top: none;

    /* ดึงขึ้นมาติดตัวแม่ */
    margin-top: 0;
    margin-bottom: 12px;
    padding: 0 20px 20px;

    /* มนเฉพาะมุมล่าง */
    border-radius: 0 0 16px 16px;

    display: none;
}

.group-detail.open {
    display: block;
}

/* Service Info */
.service-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.service-info .s-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-info .s-val {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.service-info .s-expiry {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.service-info .s-days {
    font-size: 11px;
    margin-top: 2px;
    font-weight: 500;
}

.s-days.green { color: var(--success); }
.s-days.yellow { color: var(--warning); }
.s-days.red { color: var(--danger); }

/* Add Member Button */
.btn-add-member {
    width: 100%;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-add-member:hover {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning);
}

/* Member List */
.member-list-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    /* ★ แถวสมาชิกใช้พื้นหลังตัวแม่เพื่อคอนทราสต์ ★ */
    background: var(--bg-card);
    border: 1px solid transparent;
}

.member-row.status-expired {
    background: var(--danger-bg);
    border-color: var(--danger);
}

.member-row.status-warning {
    background: var(--warning-bg);
    border-color: var(--warning);
}

.member-row .mem-info {
    flex: 1;
    min-width: 0;
}

.member-row .mem-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.member-row.status-expired .mem-name { color: var(--danger); }
.member-row.status-warning .mem-name { color: var(--warning); }

.member-row .mem-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.member-row .mem-expiry {
    text-align: right;
    flex-shrink: 0;
}

.member-row .mem-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.member-row .mem-days {
    font-size: 11px;
    font-weight: 600;
}

.mem-days.green { color: var(--success); }
.mem-days.yellow { color: var(--warning); }
.mem-days.red { color: var(--danger); }

.member-row .mem-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-sm:hover {
    background: var(--bg-primary);
    border-color: var(--primary);
    color: var(--primary);
}

/* ★ Group Card Expanded State (ตัวแม่) ★ */
.group-card.expanded {
    /* มนเฉพาะมุมบน */
    border-radius: 16px 16px 0 0;
    /* ★ เอาขอบล่างออก ★ */
    border-bottom: none;
}

/* Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.group-detail.open {
    animation: slideDown 0.2s ease;
}

/* Hint Expand */
.group-card .hint-expand {
    text-align: center;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

/* ลูกศร */
.group-card .hint-expand .arrow {
    display: inline-block;
    transition: transform 0.4s ease;
}