/* Container & Wrapper */
.ecc-container { font-family: sans-serif; }

/* Attendance Summary */
.ecc-attendance-summary {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #580000;
    background: #fffafa;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px dashed #580000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.ecc-attend-count-badge {
    background: #580000;
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 14px;
}

/* Form Styling */
.ecc-form-wrapper {
    background: #ffffff; padding: 20px; border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px;
}
.ecc-form-group { margin-bottom: 15px; }
.ecc-form-group label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; }
.ecc-req { color: red; }
.ecc-form-wrapper input[type="text"], .ecc-form-wrapper textarea {
    width: 100%; padding: 12px; border: 1px solid #ced4da; border-radius: 6px; outline: none; transition: border-color 0.3s;
}
.ecc-form-wrapper input[type="text"]:focus, .ecc-form-wrapper textarea:focus { border-color: #a80000; }

.ecc-status-group { display: flex; gap: 15px; }
.ecc-radio-btn { flex: 1; cursor: pointer; }
.ecc-radio-btn input { display: none; }
.ecc-radio-btn span {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 6px; border: 1px solid #ced4da; background: #f8f9fa; transition: all 0.3s;
}
.ecc-attend input:checked + span { background-color: #d4edda; border-color: #28a745; color: #155724; }
.ecc-decline input:checked + span { background-color: #f8d7da; border-color: #dc3545; color: #721c24; }

.ecc-form-footer { margin-bottom: 15px; }
.ecc-btn-sticker { background: #fff; border: 1px solid #ced4da; padding: 8px 15px; border-radius: 20px; cursor: pointer; color: #555; }
.ecc-btn-submit {
    width: 100%; background-color: #580000; color: white; border: none; padding: 15px; border-radius: 6px;
    font-weight: bold; font-size: 16px; cursor: pointer; transition: background 0.3s; opacity: 1;
}
.ecc-btn-submit:hover { opacity: 0.8; }

/* Comment Item - Flex Layout for Avatar */
.ecc-comment-item { 
    border-bottom: 1px solid #eee; 
    padding: 20px 0; 
    display: flex;
    gap: 15px;
}
.ecc-comment-avatar {
    flex-shrink: 0;
}
.ecc-comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
}
.ecc-comment-content-wrap {
    flex: 1;
}

.ecc-comment-header { margin-bottom: 8px; display: flex; align-items: center; gap: 10px;}
.ecc-comment-header strong { font-size: 15px; color: #222;}
.badge-hadir { background: #28a745; color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
.badge-tidak-hadir { background: #dc3545; color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
.ecc-comment-body { color: #555; line-height: 1.5; }

/* Aksi Edit/Delete */
.ecc-comment-actions { margin-top: 10px; font-size: 12px; color: #888; }
.ecc-comment-actions span { margin-right: 15px; cursor: pointer; transition: color 0.3s; }
.ecc-comment-actions span:hover { color: #580000; }

/* Inline Edit Styling */
.ecc-edit-form { margin-top: 10px; }
.ecc-edit-textarea { width: 100%; padding: 10px; border: 1px solid #007cba; border-radius: 5px; font-size: 14px; margin-bottom: 8px; resize: vertical; }
.ecc-edit-actions { display: flex; gap: 10px; }
.ecc-btn-save-edit { background-color: #2271b1; color: white; border: none; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.ecc-btn-save-edit:hover { background-color: #135e96; }
.ecc-btn-cancel-edit { background-color: #f0f0f1; color: #2271b1; border: 1px solid #2271b1; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.ecc-btn-cancel-edit:hover { background-color: #f6f7f7; }